@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --DARK-BLUE: #3C5FA6;
    --LIGHT-BLUE: #5D7CA6;
    --YELLOW: #F2AC57;
    --DARK-RED: #F26457;
    --LIGHT-RED: #F2BBBB;
    --WHITE-SMOKE: #f5f5f5;
    --WHITE: #ffffff;
    --GREEN: #5ac55a;
    --GRAY: #808080;
    --BOX-SHADOW-COLOR: #0000003c;
}

html {
    font-size: 62.5%;
    /* root equals to 10px */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

body {
    background-color: var(--LIGHT-RED);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: var(--YELLOW);
    color: var(--WHITE);
    text-align: center;
    width: 100%;
    padding: 1em;
    box-shadow: .2rem .2rem .6rem var(--BOX-SHADOW-COLOR);
}

header h1 {
    font-size: clamp(3rem, 4vw, 3.5rem);
    font-weight: 900;

}

main {
    background-color: var(--WHITE-SMOKE);
    min-height: 50vh;
    width: clamp(40rem, 55vw, 70rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 2rem;
    border-radius: 2rem;
    box-shadow: .4rem .4rem .8rem var(--BOX-SHADOW-COLOR);
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

section.add-task-input {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 2em 0 2em 3em;
    width: clamp(35em, 40vw, 50em);
}

input[type=text] {
    border: none;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    font-weight: bold;
    border-radius: .5em;
    padding: 1em;
    padding-right: 3em;
    width: clamp(30em, 50vw, 60em);
    box-shadow: .1rem .1rem .2rem var(--BOX-SHADOW-COLOR);
}

.add-task-input button {
    position: relative;
    padding: .5em;
    left: -40px;
    top: 2px;
}

.add-task-input button>img {
    width: 2.7rem;
    height: 2.7rem;
}

.add-task-input button:hover {
    filter: brightness(130%);
    transition: filter .5s;
}

.task-container {
    width: clamp(30em, 40vw, 50em);
    height: 40vh;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--LIGHT-RED) var(--WHITE-SMOKE);
    padding: 1em;
}

.item-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--WHITE);
    font-size: clamp(1.5rem, 2vw, 1.7rem);
    padding: .8em;
    border: .1rem solid var(--LIGHT-BLUE);
    border-radius: 1em;
    width: 100%;
    font-weight: 600;
    user-select: none;
    margin-bottom: 1em;
}

input[type="checkbox"] {
    margin-right: 1em;
    appearance: none;
    cursor: pointer;
}

input[type="checkbox"]::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../img/unchecked.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

input[type="checkbox"]:checked::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background-color: var(--GREEN);
    border-radius: 50%;
    background-image: url(../img/checked.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

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

.edit-task-btn,
.delete-task-btn {
    width: 2.4rem;
    height: 2.4rem;
}

.edit-task-btn:hover,
.edit-task-btn:focus,
.delete-task-btn:hover,
.delete-task-btn:focus {
    filter: brightness(150%);
    transition: filter .5s;
}

section.counter-container {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--LIGHT-BLUE);
    width: 80%;
}

hr {
    margin: 2em 0 1em 0;
    border-color: var(--LIGHT-BLUE);
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: var(--WHITE);
    font-weight: bold;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    background-color: var(--YELLOW);
    padding: .4em;
}

footer>p>a {
    text-decoration: none;
    color: inherit;
}

a:hover,
a:focus {
    text-decoration: underline;
}