@charset "utf-8";

/*  Color Palette (light-dark)  */
/* Primary:   #0C03BA - #4E45FC */
/* Secondary: #1C6D26 - #92E39B */
/* Accent:    #9F7A90 - #856076 */

:root {
    color-scheme: light dark;

    --primary-color: light-dark(hsl(243, 97%, 37%), hsl(243, 97%, 63%));
    --secondary-color: light-dark(hsl(127, 59%, 27%), hsl(127, 59%, 73%));
    --accent-color: light-dark(hsl(324, 16%, 55%), hsl(324, 16%, 45%));

    --background-10: light-dark(hsl(0 0 90), hsl(0 0 10));
    --background: light-dark(hsl(0 0 80), hsl(0 0 20));

    --text-color: light-dark(hsl(0 0 15), white);

    --heading-size: 2em;
    --text-size: 1em;

    --default-bradius: 10px;
}

* {
    padding: 0px;
    margin: 0px;

    box-sizing: border-box;
    vertical-align: middle;
}

body {
    height: 100vh;
    width: 100dvw;

    color: var(--text-color);
    font-family: sans-serif;

    background-color: var(--background-10);

    .light-mode { color-scheme: only light; }
    .dark-mode { color-scheme: only dark; }

    .default-button {
        height: fit-content;
        width: fit-content;

        padding: 3px;

        border: none;
        border-radius: 20px;

        cursor: pointer;
        text-align: center;

        fill: white;
        color: white;
        background-color: var(--primary-color);

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

    .secundary-button {
        padding: 3px;

        border: none;
        border-radius: 6px;

        cursor: pointer;

        svg { fill: var(--text-color); }

        background-color: transparent;

        &:active { background-color: var(--primary-color); }
    }

    :where(.default-button, .secundary-button) > svg {
        height: 24px;
        width: 24px;
    }

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        border-radius: var(--default-bradius);
        background-color: var(--background);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: var(--default-bradius);
        background-color: var(--secondary-color);

    }

    @supports ( scrollbar-color: var(--secondary-color) var(--background) ) {
        & { scrollbar-color: var(--secondary-color) var(--background); }
    }

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 8dvh;
        padding: 10px;

        border-bottom: 1px solid var(--secondary-color);

        & > div {
            display: flex;
            align-items: center;
            gap: 4px;
            & > a:first-of-type { margin-left: 10px; }
            /* & > a:last-of-type { margin-right: 1px; } */
        }

        img {
            height: var(--heading-size);
        }

        a {
            display: inline-block;

            svg#logo {
                height: var(--heading-size);
                fill: var(--text-color);    
            }
        }
    }
}