:root {
    --nav-gap: 3.5vw;
    --ru: 1vw;
}

@media (min-aspect-ratio: 1/1) {
    :root {
        --ru: 1vh;
    }
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Serif';
    src: url('IBMPlexSerif-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('IBMPlexMono-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Oxanium';
    src: url('Oxanium-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: stretch;
    padding: 0;
    height: calc(7 * var(--ru));
    background: rgba(10, 14, 19, 0.75);
    backdrop-filter: blur(1vw);
    z-index: 1000;
}

.nav-title {
    color: #32ff00;
    font-family: 'Oxanium', sans-serif;
    font-size: calc(3 * var(--ru));
    font-weight: 100;
    text-decoration: none;
    margin-right: auto;
    padding: 0 3vw;
    display: flex;
    align-items: center;
    text-shadow: 0 0 0.0625vw rgba(50, 255, 0, 0.75),
        0 0 0.125vw rgba(50, 255, 0, 0.75),
        0 0 0.25vw rgba(50, 255, 0, 0.75),
        0 0 0.5vw rgba(50, 255, 0, 0.75),
        0 0 1vw rgba(50, 255, 0, 0.75),
        0 0 2vw rgba(50, 255, 0, 0.75),
        0 0 4vw rgba(50, 255, 0, 0.75),
        0 0 8vw rgba(50, 255, 0, 0.75);
}

.nav-title:hover {
    font-weight: 100;
    text-shadow: 0 0 0.0625vw rgba(50, 255, 0, 1),
        0 0 0.125vw rgba(50, 255, 0, 1),
        0 0 0.25vw rgba(50, 255, 0, 1),
        0 0 0.5vw rgba(50, 255, 0, 1),
        0 0 1vw rgba(50, 255, 0, 1),
        0 0 2vw rgba(50, 255, 0, 1),
        0 0 4vw rgba(50, 255, 0, 1),
        0 0 8vw rgba(50, 255, 0, 1);
}

.nav-title:hover,
nav ul a:hover {
    text-decoration: none;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0 3vw 0 0;
    height: 100%;
}

nav li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}

nav a {
    color: #a0a8b1;
    text-decoration: none;
    font-family: 'IBM Plex Serif', serif;
    font-weight: 400;
    font-size: calc(2 * var(--ru));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.75vw;
}

nav ul a:hover {
    color: #32ff00;
    text-shadow: 0 0 0.0625vw rgba(50, 255, 0, 0.25),
        0 0 0.125vw rgba(50, 255, 0, 0.25),
        0 0 0.25vw rgba(50, 255, 0, 0.25),
        0 0 0.5vw rgba(50, 255, 0, 0.25),
        0 0 1vw rgba(50, 255, 0, 0.25),
        0 0 2vw rgba(50, 255, 0, 0.25),
        0 0 4vw rgba(50, 255, 0, 0.25),
        0 0 8vw rgba(50, 255, 0, 0.25);
}