.nav-bar {
    position: fixed;
    width: 100vw;
    background-color: rgba(0,0,0,.75);
    backdrop-filter: blur(10px) saturate(50%);
    z-index: 99;
    display: flex;
    height: var(--nav-bar-height);
    justify-content: space-between;
    overflow: hidden;
}

.nav-bar > .logo-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-bar > .logo-wrapper > .logo-hl {
    display: flex;
    align-items: center;
    height: 60%;
    padding: calc((var(--nav-bar-height) - 0.6 * var(--nav-bar-height)) / 2);
}
.nav-bar > .logo-wrapper > .logo-hl > .logo-emblem {
    height: 100%;
}
.nav-bar > .logo-wrapper > .logo-hl > .logo-text {
    margin-left: 10px;
    height: 100%;
    transition: height 0.2s ease-in-out;
}

.nav-bar > .nav-wrapper {
    display: flex;
    margin-right: calc(var(--nav-bar-height) / 5 * 2);
}
.nav-bar > .nav-wrapper a,
.nav-bar > .nav-wrapper span {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-size: calc(var(--nav-bar-height) / 5);
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc(var(--nav-bar-height) / 5);
    text-shadow: 0 0 50px white;
    transition: color 0.2s, text-shadow 0.2s, text-decoration-color 0.2s;
}
.nav-bar > .nav-wrapper > .current-page,
.nav-bar > .nav-wrapper a:hover {
    color: var(--light-blue);
    text-shadow: 0 0 50px var(--light-blue);
}
.current-page {
    font-weight: bold;
    text-decoration: underline !important;
    text-decoration-color: var(--light-blue) !important;
    text-decoration-thickness: 2.5px !important;
    text-underline-offset: 7.5px !important;
}
span.current-page:hover {
    cursor: default;
}
a.current-page:hover {
    color: var(--blue) !important;
    text-decoration-color: var(--blue) !important;
    text-shadow: 0 0 50px var(--blue) !important;
    cursor: dragon !important;
}

@media (max-width: 780px) {
    .nav-bar > .logo-wrapper > .logo-hl > .logo-text {
        height: 0;
    }
}