@font-face {
    font-family: Fantasma;
    src: url(Fantasma.otf);
}

:root {
    --parallax-strength: 5px;
}

body {
    padding: 0 6em;
    color: white;
    background-color: #16161d;
    font-family: monospace;
}

.header {
    display: flex;
}

.header h1 {
    font-family: Fantasma;
    min-width: 35%;
    font-size: 3em;
    letter-spacing: 0.15em;
    color: #b2ffff;
}

.greeter {
    height: 80%;
    display: flex;
    align-items: center;
    align-content: center;
}

.main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    justify-content: space-between;
    min-height: 60vh;
    padding-top: 2em;

    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform 0.06s linear;
}

.menu-row {
    display: flex;
    min-width: 100%;
    justify-content: space-around;
    min-height: 9em;
}

.menu-item {
    max-width: 6em;
    text-align: center;
    font-family: Fantasma;
    font-size: 2em;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    will-change: transform;
}

.menu-item:hover {
    color: #b2ffff;
    transform: translateY(-4px);
}