.navbar {
    --bar-height: var(--scroll-top-height);
    --bar-font-size: calc(var(--scroll-top-height) * 0.60);

    font-size: var(--bar-font-size);
    font-weight: 600;
}

.navbar-brand {
    display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;
    margin-right: auto;
    height: 100%;
    line-height: 100%;
    flex-shrink: 0;
}
.navbar-shortcut {
    height: 100%;
    line-height: 100%;
}
.navbar-logo { margin: 0 var(--gap-y) 0 0; transform: scale(80%); }

.navbar-nav {
    z-index: var(--z-index-dropdown);
    display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start;
    position: absolute; top: var(--scroll-top-height); right: 0;
    background-color: var(--color-base-2);
    transition: right 0.2s ease-out;
 }
.navbar-nav.hidden { right: -100vw; }

.navbar-nav > a { margin: 1rem var(--bar-height); }
.navbar-nav > a.active { border-bottom: 3px solid var(--color-1); }

.navbar-nav-toggle { font-weight: 300; font-size: calc(var(--scroll-top-height) * 0.80); color: var(--color-1); }

@media (min-width: 64em) {
    .navbar { --bar-font-size: calc(var(--scroll-top-height) * 0.40); }
    .navbar-nav { display: flex !important; flex-flow: row nowrap; justify-content: flex-end; position: initial; }
    .navbar-nav > a { margin: 0 0.5rem; }
    .navbar-nav-toggle { display: none; }
}
@media (min-width: 80em) { :root{ --font-size-base: 24px; --gap-x: 3.0rem; --gap-y: 1.5rem; } }