nav {
    --nav-height: 4em;

    @media (orientation: portrait) {
        --nav-height: 8.5vh;
    }

    @media (pointer: coarse) and (orientation: landscape) {
        --nav-height: 20vh;
    }

    display: flex;
    flex-direction: row;
    height: var(--nav-height);
    width: 100%;

    background-color: var(--red);

    box-sizing: border-box;
    padding: .8vw 2vw .8vw 5vw;

    align-items: center;
    justify-content: end;
    column-gap: 3%;

    position: fixed;
    z-index: 100;
}

.landingpage-nav {
    background-color: var(--white);
}

@media (pointer: fine) {
    #desktop-navigation {
        display: flex;
    }

    #mobile-navigation {
        display: none;
    }
}

@media (pointer: coarse) {
    #desktop-navigation {
        display: none;
    }

    #mobile-navigation {
        display: flex;
    }
}

/* Desktop Navigation */
nav a {
    max-height: 100%;

    box-sizing: border-box;
    margin: auto 0 auto 0;

    align-items: center;

    letter-spacing: 2px;
    color: var(--white);
}

nav .current-page {
    letter-spacing: 2px;
    padding-right: -0.01 em;
    border-bottom: 3px solid var(--white);
}

nav .contact-button {
    background-color: var(--blue);
    font-weight: bold;
    text-decoration-line: none;

    border-radius: 2em;
    padding: .3em 1.5em .5em 1.5em;
    letter-spacing: 0.15em;
}

nav #desktop-logo-link {
    height: 100%;
    margin: 0 auto 0 0;
    padding-bottom: 0.25em;

    align-content: center;
}

nav #desktop-logo-link .flightcase-logo-img {
    max-height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Mobile Navigation */
nav #burger-menu {
    height: 100%;
    max-width: 30%;
    aspect-ratio: 1/1;

    box-sizing: border-box;
    padding: 4%;

    @media (orientation: landscape) {
        padding: 1%;
    }
}

nav .landing-page-burger-menu {
    filter: invert(1) opacity(0.7);
}

nav #mobile-logo-link {
    height: 100%;
    align-self: start;
    margin: 0 auto 0 0;
}

nav #mobile-logo-link .flightcase-logo-img {
    height: 100%;
    max-width: 80%;
    object-fit: contain;
}

nav #mobile-menu {
    display: none;
}

nav #mobile-menu.open {
    position: absolute;
    left: 0;
    top: var(--nav-height);

    display: flex;
    flex-direction: column;
    width: 100%;

    background-color: var(--red);

    box-sizing: border-box;
    padding: .8vw 2vw .8vw 5vw;

    align-items: center;

    z-index: 2;
}

nav #mobile-menu.open a {
    margin: .5em 0 .5em 0;
}