:root {
    --neutral-900: hsl(227, 75%, 14%);
    --neutral-800: hsl(226, 25%, 17%);
    --neutral-700: hsl(225, 23%, 24%);
    --neutral-600: hsl(226, 11%, 37%);
    --neutral-300: hsl(0, 0%, 78%);
    --neutral-200: hsl(217, 61%, 90%);
    --neutral-100: hsl(0, 0%, 93%);
    --neutral-0: hsl(200, 60%, 99%);

    --red-400: hsl(3, 86%, 64%);
    --red-500: hsl(3, 71%, 56%);
    --red-700: hsl(3, 77%, 44%);

    --light-gradient: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
    --light-gradient-to-right: linear-gradient(to right, #EBF2FC 0%, #EEF8F9 100%);
    --dark-gradient: linear-gradient(180deg, #040918 0%, #091540 100%);
    --dark-gradient-to-right: linear-gradient(to right, #040918 0%, #091540 100%);



    --fsize: 16px;
    --fweight-normal: 400;
    --fweight-semibold: 500;
    --fweight-bold: 700;
    --ff-base: "Noto Sans";
    --fstyle: normal;
    --f-optical-sizing: auto;
    --font-variation-settings: "wdth" 100;


    /* theme colors */

    &[data-theme="light"] {
        --body-bg-color: var(--light-gradient);

        --primary-bg-color: var(--neutral-0);
        --nav-bg-shadow: 0 0 5px var(--neutral-300);
        --theme-image: url("assets/images/icon-moon.svg");
        --theme-bg: var(--neutral-100);
        --theme-btn-hover: var(--neutral-300);
        --theme-btn-focus: var(--neutral-100);

        --font-color: var(--neutral-900);
        --font-color-hover: var(--neutral-600);
        --font-color-selected: var(--neutral-0);
        --font-color-paragraph: var(--neutral-600);

        --accent-color: var(--red-700);
        --accent-color-selected: var(--red-500);

        --btn-bg: var(--neutral-0);
        --btn-bg-2: var(--neutral-0);
        --btn-bg-hover: var(--neutral-0);
        --btn-bg-focus: var(--neutral-0);
        --item-border: 1px solid var(--neutral-300);
        --item-border-hover: var(--neutral-200);
        --item-border-focus: transparent;

        --slider-color: var(--neutral-0);
        --slider-bg: var(--neutral-300);
        --slider-bg-hover: var(--neutral-700);

        --footer-bg-color: var(--light-gradient-to-right);
        --footer-color: var(--neutral-600);
        --footer-accent-color: var(--red-700);
    }

    &[data-theme="dark"] {
        --body-bg-color: var(--dark-gradient);

        --primary-bg-color: var(--neutral-800);
        --nav-bg-shadow: none;
        --theme-image: url("assets/images/icon-sun.svg");
        --theme-bg: var(--neutral-700);
        --theme-btn-hover: var(--neutral-600);
        --theme-btn-focus: var(--neutral-600);

        --font-color: var(--neutral-0);
        --font-color-hover: var(--neutral-0);
        --font-color-selected: var(--neutral-900);
        --font-color-paragraph: var(--neutral-300);

        --accent-color: var(--red-400);
        --accent-color-selected: var(--red-500);

        --btn-bg: var(--neutral-700);
        --btn-bg-2: var(--neutral-800);
        --btn-bg-hover: var(--neutral-600);
        --btn-bg-focus: var(--neutral-600);
        --item-border: 1px solid var(--neutral-600);
        --item-border-hover: transparent;
        --item-border-focus: transparent;

        --slider-color: var(--neutral-0);
        --slider-bg: var(--neutral-600);
        --slider-bg-hover: var(--neutral-600);

        --footer-bg-color: var(--dark-gradient-to-right);
        --footer-color: var(--neutral-300);
        --footer-accent-color: var(--red-400);
    }

}

@layer reset {

    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html, body {
        line-height: 1;
        -webkit-font-smoothing: antialiased;

        font-family: var(--ff-base), sans-serif;
        font-weight: var(--fweight-normal);
        font-style: var(--fstyle);
        font-size: var(--fsize);
        font-optical-sizing: var(--f-optical-sizing);
        font-variation-settings: var(--font-variation-settings);
    }

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font: inherit;
    }

    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    p {
        text-wrap: pretty;
    }

    #root, #__next {
        isolation: isolate;
    }
}

body {
    --padding-inline: 1rem;

    min-height: 100dvh;
    max-inline-size: 500px;

    margin-inline: auto;
    padding-inline: var(--padding-inline);
    padding-block-start: 1rem;
    padding-block-end: 4rem;

    background: var(--body-bg-color);
    color: var(--font-color);

    @media (min-width: 768px) {
        max-inline-size: 1600px;
    }
}

.navbar {
    --nav-padding-block: .5rem;
    --nav-padding-inline: .75rem;


    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;

    background-color: var(--primary-bg-color);
    box-shadow: var(--nav-bg-shadow);

    border-radius: .5rem;
    padding-block: var(--nav-padding-block);
    padding-inline: var(--nav-padding-inline);
    margin-bottom: 3rem;
}

.logo-container {
    & .color-logo {
        fill: var(--accent-color);
    }

    & .color-logo-font {
        fill: var(--font-color);
    }
}

.theme-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background-color: var(--theme-bg);
    border: none;
    border-radius: .75rem;
    padding: .875rem;

    cursor: pointer;
    outline: none;

    transition: background-color 0.25s ease;

    &::before {
        content: '';
        background: var(--theme-image);
        height: 22px;
        width: 22px;
    }

    &::after {
        content: '';
        position: absolute;
        inset: -4px;
        border: 2px solid transparent;
        border-radius: 1rem;

        transition: border-color 0.25s ease;
    }

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

    &:is(:focus-visible, :active) {
        background-color: var(--theme-btn-focus);

        &::after {
            border-color: var(--accent-color);
        }
    }
}

.heading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;

    & h1 {
        text-align: center;
    }

    @media (min-width: 768px) {
        flex-direction: row;
        justify-content: space-between;
    }
}

.btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;

    list-style: none;
    padding: 0;
}

.btn-filter {
    position: relative;

    padding-block: 0.75rem;
    padding-inline: 1.25rem;

    border: var(--item-border);
    border-radius: 1.5rem;

    background-color: var(--btn-bg);
    color: var(--font-color);

    font-size: 1.25rem;

    outline: none;
    cursor: pointer;

    transition: background-color, color, border-color 0.25s ease;

    &.active {
        color: var(--font-color-selected);
        background-color: var(--accent-color);
        border-color: transparent;

        &:hover {
            color: var(--font-color-selected);
            background-color: var(--accent-color-selected);
        }

        &:is(:focus-visible, :active) {
            background-color: var(--accent-color);
        }

    }

    &::before {
        content: '';
        position: absolute;
        inset: -5px;
        border: 2px solid transparent;
        border-radius: 1.75rem;

        transition: border-color 0.25s ease;
    }

    &:hover {
        color: var(--font-color-hover);
        background-color: var(--btn-bg-hover);
        border-color: var(--item-border-hover);
    }

    &:is(:focus-visible, :active) {
        background-color: var(--btn-bg-focus);
        border-color: var(--item-border-focus);

        &::before {
            border-color: var(--accent-color);
        }
    }

}

.content-container {
    display: grid;
    gap: .75rem;
    
    @media (min-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

.grid-item {
    display: grid;
    gap: 2rem;

    background-color: var(--primary-bg-color);
    padding: 1.25rem;

    border: var(--item-border);
    border-radius: 1.25rem;
}

.grid-item__top {
    display: flex;
    gap: 1rem;
    align-self: flex-start;
}

.grid-item__img {
    align-self: flex-start;
    background-repeat: no-repeat;
    height: 60px;
    width: 60px;
    flex-shrink: 0;
}

.grid-item__text {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    & h3 {
        font-size: 1.25rem;
        font-weight: var(--fweight-bold);
    }

    & p {
        font-size: var(--fsize);
        font-weight: var(--fweight-normal);
        color: var(--font-color-paragraph);
        line-height: 1.3;
    }
}

.grid-item__bottom {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-remove {
    position: relative;

    color: var(--font-color);
    background-color: var(--btn-bg-2);

    border: var(--item-border);
    border-radius: 1.25rem;

    font-size: var(--fsize);
    font-weight: var(--fweight-semibold);
    padding-block: 0.625rem;
    padding-inline: 1rem;

    cursor: pointer;
    outline: none;

    transition: color, background-color, border-color 0.25s ease;

    &:hover {
        border-color: transparent;
        color: var(--font-color-selected);
        background-color: var(--accent-color);
    }

    &:is(:focus-visible, :active) {
        color: var(--font-color);
        background-color: var(--theme-btn-focus);
    }

    &::before {
        content: '';
        position: absolute;
        inset: -5px;
        border: 2px solid transparent;
        border-radius: 1.75rem;

        transition: border-color 0.25s ease;
    }

    &:is(:focus-visible, :active)::before {
        border-color: var(--accent-color);
    }

}

.slider-container {
    --width-container: 2.5rem;
    --padding-container: .125rem;

    height: 1.25rem;
    width: var(--width-container);
    position: relative;

    background-color: var(--slider-bg);

    border-radius: 1.25rem;
    padding: var(--padding-container);

    cursor: pointer;
    pointer-events: auto;
    outline: none;

    transition: background-color 0.5s ease;

    &.active {
        background-color: var(--accent-color);

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

        & .slider {
            transform: translateX(calc(var(--width-container) - var(--dimension-slider) - 2 * var(--padding-container)));
        }
    }

    &::before {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid transparent;
            border-radius: 1.75rem;

            transition: border-color 0.25s ease;
    }

    &:is(:focus-visible, :active)::before {
        border-color: var(--accent-color);
    }
}

.slider {
    --dimension-slider: 1rem;

    border: none;
    background-color: var(--slider-color);
    height: var(--dimension-slider);
    width: var(--dimension-slider);
    border-radius: 50%;

    transition: transform 0.5s ease;
}

#footer {
    &.visible {
        .attribution {
            display: flex;
        }
    }

    &.deactivated {
        z-index: -1;
    }

    & .attribution {
        font-size: 15px;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        height: 3rem;
        gap: .25rem;

        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        border-top: 1px solid var(--footer-color);
        color: var(--footer-color);

        background: var(--footer-bg-color);

        & a {
            text-decoration: none;
            color: var(--footer-accent-color);
            position: relative;
            transition: margin-inline 0.25s ease;

            &::after {
                content: ' ';
                position: absolute;
                inset: -2px -4px;
                border: 2px solid transparent;
                border-radius: 4px;
                transition: border-color ease 0.25s;
            }

            &:focus-visible {
                outline: none;
                margin-inline: 6px;

                &::after {
                    border-color: var(--footer-accent-color);
                }
            }
        }

        & .author {
            color: var(--footer-accent-color);

            &:focus-visible::after {
                border-color: var(--footer-accent-color);
            }
        }

        @media (min-width: 500px) {
            flex-direction: row;
            justify-content: center;

            gap: .75rem;
        }
    }
}