styles.css

body {
    background-color: #e4e4e4;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Lato', sans-serif;
}

.container {
	display: flex;
    flex-direction: column;
	width: clamp(75px, 80%, 500px);
	margin: 2vh auto 0vh;
	background-color:#fff;
	padding: 0px 10px 10px 10px;
	border-radius:10px
}

#insertTask {
    display: flex;
}

#inputTask {
	font-size: clamp(0.5rem, 6.5vw, 1.2rem);
    width: 85%;
    padding: 10px;
	border: 1px solid #ddd;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    color: #888;
}

#inputTask:focus {
	color: #333;
}

button {
	background: none;
	border: 0px;
	color: #888;
	font-size: clamp(0.5rem, 6.5vw, 1.2rem);
	/* width: 10vh; */
	margin: 10px 0 0 10px;
	font-family: Lato, sans-serif;
	cursor: pointer;
}

button:hover {
	color: #333;
}

hr {
    border-color: #333;
    /* top | right | bottom | left */
    border-style: solid none none none;
    border-width: 0.1cm;
    width: 100%;
}

.btnDoneCurrent:hover {
    font-weight: 600;
    color: #0FC57C;
    font-size: x-large;
}

.btnRemoveCurrent:hover, .btnRemoveDoneCurrent:hover {
    color: #CF2323;
    font-weight: 600;
    font-size: x-large;
}

.btnEditCurrent:hover {
    color: darkorange;
    font-size: x-large;
    font-weight: 600;
}

.btnRevertCurrent:hover {
    color: cornflowerblue;
    font-weight: 600;
    font-size: x-large;
}

.btnRevertCurrent {
    margin-left: 6vh;
}

.crossed {
    text-decoration: line-through;
}

h1 {
    font-size: clamp(0.5rem, 6.0vw, 1.6rem);
    text-align: center;
}

p {
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(0.5rem, 4.5vw, 1.2rem);
}

#btn-clearAll {
    align-self: center;
    width: clamp(30%, 65%, 20vh);
    margin: 3vh 3vh 1vh;
    padding: 1vh;
    border: solid 1px #888;
    text-transform: uppercase;
    font-size: clamp(0.5rem, 4.5vw, 1.2rem);
}

#btn-clearAll:hover {
    color: red;
    background: rgb(85, 19, 19);
}

li {
    display: flex;
    /* float: left; */
	padding: 1vh;
	border-bottom: 2px solid #dbdbdb;
    word-wrap: break-word;
}

li > label {
    text-transform: capitalize;
	font-size: clamp(0.5rem, 5.5vw, 1.2rem);
	line-height: clamp(1rem, 10vw, 2.4rem);
	width: clamp(75px, 60%, 500px);
	padding: 0;
}

li > button {
	/* font-size: 18px; */
	/* line-height: 40px; */
	width: 6vh;
    float: right;
    margin: auto;
}

ol {
    margin: 0;
    padding: 0;
}

#done > li > label {
    text-decoration: line-through;
}

@media (max-width: 600px) {
    .btnDoneCurrent:hover, .btnEditCurrent:hover, .btnRevertCurrent:hover, .btnRemoveDoneCurrent:hover, .btnRemoveCurrent:hover{
        font-size: 0.8rem;
    }
}