:root{
    --gap-nav: 3em;
    --padding-hamburger:0.5em;
}

.navbar{
    padding-block:min(0.5rem,3vh);
    margin-bottom:1.5px; /*so box-shadow will show up on color backgrounds */
}

nav {
    justify-content:flex-end;
    width:100%;
    gap:var(--gap-nav);
}

#hamburger{
    padding-inline: var(--padding-hamburger);
}

#hamburgerMenu{
    display:none;
}

#hamburgerMenu a{
    padding: 1rem;
    &:hover,
    &:focus{
        background-color: var(--clr-accent-primary);
        color: var(--clr-bg-primary);
    }
    &:active{
        background-color: var(--clr-accent-lighter);
        color: var(--clr-bg-primary);
    }
}

#hamburgerMenu > *:last-child{
    padding-bottom:calc(var(--gap-nav)/2);
}

@media screen and (max-aspect-ratio: 1/1){
    :root{
        --gap-nav:2em;
    }
    .navbar{
        padding-block:var(--gap-m);
    }
    .mobile{
        display:flex;
    }
    .desktop{
        display:none;
    }
}