@font-face {
    font-family: "Cascadia Mono";
    src: url('../fonts/CascadiaMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
}

@font-face {
    font-family: "Cascadia Mono";
    src: url('../fonts/CascadiaMono-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: italic;
}

:root {
    --nav-height: 17rem;
    --background-color: #F3F3F3;
    --background-color-faded: #F3F3F300;
    --bg-pattern-color: #E3E3E3;
    --text-color: #4e4e4e;
    --link-color: #3ea5ed;
    --link-active-color: #9441ea;
    --text-secondary-color: #353535;
    --font-defaults: "Cascadia Mono", monospace;


    /* Scene Defaults */
    --perspective-origin: center top;
    --perspective: 20rem;
    --light-shading: #dfdfdf;
    --medium-shading: #D9D9D9;
    --dark-shading: #C5C5C5;
    --very-dark-shading: #A0A0A0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #2B2B2B;
        --background-color-faded: #2B2B2B00;
        --bg-pattern-color: #5D5D5D;
        --link-color: #75c4ff;
        --link-active-color: #cc9cff;
        --text-color: #F3F3F3;
        --text-secondary-color: #c1c1c1;
        --light-shading: #4C4C4C;
        --medium-shading: #3D3D3D;
        --dark-shading: #373737;
        --very-dark-shading: #202020;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    font-family: var(--font-defaults);
    touch-action: manipulation !important;
    /*outline: red dotted 1px;*/
}

a {
    color: var(--link-color);
}

a:active {
    color: var(--link-active-color);
!important
}

nav {
    position: fixed;
    top: 0;
    width: 100vw;
    max-height: clamp(var(--nav-height) - 4rem, 20vh, var(--nav-height));
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 2rem 8rem 2rem;
    background: linear-gradient(to bottom, var(--background-color) 0%, var(--background-color) 75%, var(--background-color-faded) 100%);
}

nav * {
    color: var(--text-color);
}

nav h1 {
    letter-spacing: 0.75rem;
    font-size: clamp(3rem, 3.5vw + 1rem, 5.5rem);
}

nav span {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 4rem);
}

nav span .active {
    color: var(--text-secondary-color);
}

/* Browser Settings */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1024px) {
    nav h1 {
        letter-spacing: 0.25rem;
    }
}

@media (max-width: 768px) {
    nav h1 {
        letter-spacing: 0;
    }

    nav {
        text-align: center;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 1rem 2rem 4rem 2rem;
    }
}

/* Text Selection Colors */
::selection {
    background-color: var(--text-color);
    color: var(--background-color);
}

::-moz-selection {
    background-color: var(--text-color);
    color: var(--background-color);
}