main, #menu, nav {
    transition-behavior: allow-discrete;
    transition: 0.3s linear;
}

main.mobile-hidden {
    filter: blur(20px);
}

nav.mobile-hidden {
    display: none;
    opacity: 0;
    z-index: -1;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

header button {
    background: none;
    border: none;

    font-size: 3rem;
    color: var(--color-deepblue);
}

nav a {
    color: var(--theme--color-text);
    text-decoration: none;
}

nav .navlink {
    width: fit-content;
    white-space: nowrap;
}

nav .navlink .content {
        text-decoration: underline;
}

nav .navlink:hover {
    animation-name: nav-link-color;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

nav .icon {
    font-size: 50%;
    vertical-align: middle;
}

@media (min-width: 768px) {
    header button {
        display: none;
    }

    #current-page {
        border-top: solid var(--color-blue) 3px;
    }

    header {
        backdrop-filter: blur(10px);
        transition: background 0.3s linear;
    }

    header:hover,
    header:active {
        background: color-mix(in srgb, white 75%, transparent);
    }

    nav, nav.mobile-hidden {
        display: block;
        opacity: 100;
        z-index: 11;

        border-bottom: solid var(--color-deepblue) 2px;
    }

    main, main.mobile-hidden {
        filter: none;
    }

    nav ul {
        padding: 0;
    }

    nav li {
        display: inline-block;
        font-family: var(--theme--font-heading);
        font-size: 2rem;
        padding: 0 1rem;
    }
}

@media (max-width: 767px) {
    header {
        position: fixed;
        top: unset;
        bottom: 0.5in;
        right: 0.25in;
    }

    header button {
        display: block;
    }

    #current-page {
        border-left: solid var(--color-blue) 6px;
        padding-left: 5px;
        margin-left: -8px;
    }

    nav {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        font-size: 3rem;
    }

    nav li {
        display: block;
    }
}

/*
 * -- Animation ---------------------------------------------------------
*/

@keyframes nav-link-color {
    50% {color: var(--color-orange);}
}