@media (prefers-color-scheme: dark) {
    :root {
        --background: oklch(15% 0 0);
        --border: oklch(25% 0 0);
        --surface: oklch(20% 0 0);
        --primary-text: oklch(90% 0 0);
        --secondary-text: oklch(65% 0 0);
        --hyperlink-color: oklch(75% 0.2 264);

        --background-snake-gif: url("/assets/gif/snake_dark.gif");
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--surface);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--border);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --background: oklch(100% 0 0);
        --border: oklch(90% 0 0);
        --surface: oklch(95% 0 0);
        --primary-text: oklch(12% 0 0);
        --secondary-text: oklch(58% 0 0);
        --hyperlink-color: oklch(50% 0.2 264);

        --background-snake-gif: url("/assets/gif/snake_light.gif");
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--surface);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--border);
    }
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar {
    width: 1dvh;
}

@font-face {
    font-family: 'InterVariable';
    src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
    /* Typography */
    --font: 'InterVariable', sans-serif;
    --font-weight-bold: 700;
    --font-weight-normal: 400;

    /* Font sizes */
    --font-size-logo: min(6dvh, 46px);
    --font-size-header: min(2.25dvh, 18px);
    --font-size-h1: min(6dvh, 46px);
    --font-size-h2: min(4dvh, 30px);
    --font-size-h3: min(3dvh, 30px);
    --font-size-p: min(2.5dvh, 20px);
    --font-size-btn: min(2.25dvh, 18px);

    /* Layout */
    --header-height: min(8dvh, 60px);
    --header-lang-svg-size: min(4dvh, 30px);
    --header-lang-gap: min(1dvh, 10px);
    --content-width: calc((100dvw - min(70dvw, 1100px)) / 2);
    --border-width: min(1px, 0.13dvh);
    --section-margin-top: min(10dvh, 80px);
    --hr-margin-bottom: min(2dvh, 15px);
    --ul-margin-left: min(5dvh, 38px);
    --cards-height: min(60dvh, 442px);

    --main-content-padding: min(1dvh, 8px) 0;
    --p-padding-bottom: min(4dvh, 30px);
    --ul-padding-bottom: min(4dvh, 30px);
    --li-padding-bottom: min(2dvh, 15px);
    --border-radius: min(4dvh, 40px);
    --nav-gap: min(4dvh, 40px);
    --cards-gap: min(2dvh, 15px);
}

@media (orientation: portrait) {
    :root {
        /* Font sizes */
        --font-size-logo: 6dvh;
        --font-size-header: 2.25dvh;

        /* Layout */
        --header-height: 8dvh;
        --header-lang-svg-size: 4dvh;
        --content-width: calc((100dvw - min(85dvw, 1100px)) / 2);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --background-snake-gif: url("/assets/gif/snake_dark_mobile.gif");
        }
    }

    @media (prefers-color-scheme: light) {
        :root {
            --background-snake-gif: url("/assets/gif/snake_light_mobile.gif");
        }
    }
}