header {
    top: 50dvh;
    left: 0;
    right: 0;
    height: var(--header-height);
    transform: translateY(-50%);
    z-index: 200;
}
@media (hover: hover) {
    body[data-transition="false"] header:not(.bg-white--blur) {transition: background 500ms, backdrop-filter 500ms;}
    body[data-transition="false"] header:not(.bg-white--blur):hover {
        background: var(--c-white_alpha);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

/* LAYOUT */
#header-layout nav {column-gap: .3em;}


/* LOGO */
#header-logo {left: 50%; transform: translateX(-50%);}

#header-logo svg {
    height: 1.55rem;
    fill: var(--c-gray);
    margin-bottom: 1.5px;
}


@media (hover: hover) {
    header a,
    header button {transition: opacity 500ms}

    #header-about:hover a,
    #header-about:hover button,
    #header-layout:hover a,
    #header-layout:hover button {opacity: .4;}

    #header-about a:hover,
    #header-about button:hover,
    #header-layout a:hover,
    #header-layout button:hover {opacity: 1;}
}