app.css

:root {
    --body-font: 'Figtree', sans-serif;

    --color-body: #dfeff7;
    --color-header: #061b25;
    --color-text: #061b25;
    --color-text-muted: #A4D0E3;
    --color-input: #082937;
    --color-input-lighter: #0b374a;
    --color-secondary: #FF8C42;
    --color-secondary-darker: #cc7035;
    --color-secondary-lighter: #ffa368;
    --color-teritory: #1C89BB;
    --color-text-badge: #E8F3F8;
    --color-disabled: #D2E7F1;
    --color-text-disabled: #77BBD4;

    --global-border-radius: 6px;
    --global-transition: all 0.2s ease-in-out;
}


/* =========== UTILITY STYLES ========== */

html {
    font-size: 18px;
}

body {
    font-family: var(--body-font);
    background-color: var(--color-body);
    color: var(--color-text);
}

.container {
    padding: 0 1.5rem;
}

button,
input[type="checkbox"] {
    cursor: pointer;
}

ol,
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1 {
    color: #fff;
    margin-bottom: 0 0 2rem;
}

a {
    color: var(--color-text);
    transition: var(--global-transition);
}

a:hover {
    color: var(--color-secondary);
}

/* =========== FORMS ============ */

#todo-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#todo-form input {
    background-color: var(--color-input);
    border: 0;
    outline: 0;
    padding: 1rem;
    border-radius: var(--global-border-radius);
    color: #fff;
}

#todo-form input:hover,
#todo-form input:focus {
    background-color: var(--color-input-lighter);
}

#todo-form input::placeholder {
    color: var(--color-text-muted);
}

#todo-form button {
    border: 0;
    outline: 0;
    padding: 1rem;
    border-radius: var(--global-border-radius);
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--color-secondary);
    color: #fff;
}

#todo-form button:hover {
    background-color: var(--color-secondary-darker);
}

#todo-form button:active {
    background-color: var(--color-secondary-lighter);
}

#todo-form button,
#todo-form input {
    transition: var(--global-transition);
}

small,
#todo-form button,
.stats span {
    font-size: 0.75rem;
}

/* ================= HEADER ================= */

#main-header {
    background-color: var(--color-header);
    padding: 3rem 0;
    margin-bottom: 2rem;
}

/* ===== Stats ==== */

.stats {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.stats li {
    display: flex;
}

.stats span {
    padding: 0.25rem 0.5rem;
}

.stats span:first-child {
    background-color: var(--color-header);
    color: var(--color-text-muted);
    border-radius: var(--global-border-radius) 0 0 var(--global-border-radius);
}

.stats span:nth-child(2) {
    background-color: var(--color-teritory);
    color: var(--color-body);
    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
    font-weight: 700;
}

/* ============== To do Lists ================ */

.todos {
    margin-bottom: 4rem;
}

.todos li {
    background-color: #fff;
    border-radius: var(--global-border-radius);
    padding: 1.5rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todos li div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.todos li.complete {
    background-color: var(--color-disabled);
    text-decoration: line-through;
    color: #1C89BB;
}

input[type="checkbox"] {
    appearance: none;
    margin: 0;
    background-color: transparent;
    height: 1.2rem;
    width: 1.2rem;
    border: 2px solid var(--color-text);
    border-radius: 100%;
    display: grid;
    place-content: center;
    transition: var(--global-transition);
}

input[type="checkbox"]::before {
    content: url(tick-svgrepo-com\ \(2\).svg);
    transform: scale(0);
}

input[type="checkbox"]:checked {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.todos li button {
    padding: 2px;
    background-color: transparent;
    border: 0;
}

.todos li button svg path {
    transition: var(--global-transition);
}

.todos li button:hover svg path {
    stroke: var(--color-text);
    scale: 1.1;
}

.todos li button:active svg {
    scale: 0.8;
}

.todos li button,
input[type="checkbox"] {
    outline: none;
}

.todos li span {
    padding: 3px;
    border-radius: var(--global-border-radius);
    transition: var(--global-transition);
}

.todos li span:focus {
    background-color: var(--color-body);
    outline: none;
}

.todos li span[contenteditable]:hover {
    background-color: var(--color-body);
}

footer div {
    text-align: center;
    padding-block: 2rem;
}

/* ============== 768px and above ======= */
@media screen and (min-width: 768px) {
    .container {
        max-width: 30rem;
        margin: 0 auto;
        position: relative;
    }

    #todo-form {
        flex-direction: row;
    }

    #todo-form input {
        flex-grow: 1;
    }

    footer div {
        padding: 5rem;
    }
}


/* ============== 1024px and above ========== */

@media screen and (min-width: 1024px) {
    .stats {
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 0;
        transform: translateX(-100%);
        padding-right: 4rem;
    }
}