@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --azul900: hsl(227, 75%, 14%);
    --azul800: hsl(226, 25%, 17%);
    --azul700: hsl(225, 23%, 24%);
    --azul600: hsl(226, 11%, 37%);
    --gris300: hsl(0, 0%, 78%);
    --gris200: hsl(217, 61%, 90%);
    --gris100: hsl(0, 0%, 93%);
    --gris000: hsl(200, 60%, 99%);
    --rojo700: hsl(3, 77%, 44%);
    --rojo500: hsl(3, 71%, 56%);
    --rojo400: hsl(3, 86%, 64%);
    --gradienteOscuro: linear-gradient(180deg, #040918 0%, #091540 100%);
    --gradienteClaro: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
}

* {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

body {
    background: var(--gradienteOscuro);
    background-repeat: no-repeat;
    font-size: 16px;
    margin-inline: 10rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}

header {
    background-color: var(--azul800);
    border-radius: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sun {
        padding: 1rem;
        background-color: var(--azul700);
        border-radius: 1rem;
        border: 2px solid transparent;

        &:hover {
            border-color: var(--rojo400);
            background-color: var(--azul600);
            cursor: pointer;
        }
    }

    .moon {
        display: none;
        padding: 1rem;
        background-color: var(--azul700);
        border-radius: 1rem;
        border: 2px solid transparent;

        &:hover {
            border-color: var(--rojo400);
            background-color: var(--azul600);
            cursor: pointer;
        }
    }
}

main {
    margin-top: 2rem;

    article {
        display: flex;
        justify-content: space-between;
        color: white;

        ul {
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: center;

            li {
                list-style-type: none;
                padding-inline: 1rem;
                padding-block: 0.5rem;
                background-color: var(--azul700);
                border-radius: 30px;
                border: 2px solid transparent;

                &:hover {
                    border-color: var(--rojo400);
                    background-color: var(--azul600);
                    cursor: pointer;
                }
            }
        }
    }
}

.remove {
    border: 2px solid transparent;

    &:hover {
        cursor: pointer;
        background-color: var(--azul600);
        border-color: var(--rojo400);
    }
}

footer {
    text-align: center;
    color: white;
    margin-top: 0.5rem;

    a {
        text-decoration: none;

        &:any-link {
            color: #09f;
            text-decoration: none;
        }
    }
}

.activo {
    background-color: var(--rojo400);
    color: var(--azul900);
    font-weight: bold;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;

    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        padding: 0.5rem;
        border-radius: 1rem;
        background-color: var(--azul800);
        border: 2px solid var(--azul600);

        h1 {
            font-size: 20px;
            font-weight: 700;
        }

        p {
            color: var(--gris300);
            font-size: 14px;
            font-weight: 400;
            margin-top: 8px;
        }

        img {
            width: 60px;
        }
    }
}

.divContainer {
    display: flex;
    gap: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-switch-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--azul600);
    border-radius: 20px;
    transition: background-color 0.3s ease-in-out;
    border: 2px solid transparent;

    &:hover {
        border-color: var(--rojo400);
    }
}

.toggle-switch-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
    background-color: var(--rojo400);
    box-shadow: inset 0 0 0 2px var(--rojo400);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
    transform: translateX(20px);
}

.botones {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
        color: white;
        border: 1px solid var(--azul600);
        padding-inline: 1rem;
        padding-block: 0.5rem;
        border-radius: 1rem;
        background-color: transparent;
    }
}

.subheader {
    h1 {
        font-size: 24px;
        font-weight: 700;
    }
}

.light {
    background: var(--gradienteClaro);
    background-repeat: no-repeat;

    header {
        background-color: var(--gris000);
        color: var(--azul900);
        box-shadow: 2px 2px 2px var(--gris300);

        svg path[fill="white"] {
            fill: var(--azul900);
        }

        .moon {
            background-color: var(--gris100);
        }
    }

    .subheader {
        h1 {
            color: var(--azul900);
        }

        li {
            color: black;
            background-color: var(--gris000);

            &:hover {
                border-color: var(--rojo400);
                background-color: var(--gris100);
                cursor: pointer;
            }
        }

        .activo {
            background-color: var(--rojo400);
            color: var(--azul900);
            font-weight: bold;
        }
    }

    .card {
        background-color: var(--gris000);
        border: 2px solid var(--gris100);

        h1 {
            color: var(--azul900);
        }

        p {
            color: var(--azul600);
        }

        button {
            color: black;

            &:hover {
                background-color: var(--gris100);
            }
        }
    }
}

@media (width<=800px) {
    * {
        font-size: 10px;
    }

    body {
        margin-inline: 2rem;
    }

    .container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .subheader {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;

        li {
            padding-inline: 2rem;
            padding-block: 1rem;
            font-size: 14px;
        }
    }
}