@font-face {
    font-family: momo;
    src: url(/media/MomoTrustDisplay-Regular.ttf);
}

body {
    margin: 0;
    background: black;
    font-family: momo;
}


nav {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-areas:
        "buttons"
        "nav-icon";
    width: 99%;
    margin-left: 0.5%;
    margin-top: 0.5%;
    min-height: 50px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.buttons {
    padding: 0;
    margin: 0;
    list-style: none;
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "titleheading"
            "Home"
"Servers"
"Discord";
    text-align: center;
    display: none;
    margin-top: 10px;
}

.nav-icon{
    color: white    ;
    grid-area: nav-icon;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.4rem;
    padding: 10px 14px;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.15s ease;
}

.titleHeading {
    grid-area: titleheading;
}
.title{
    color: white;
    text-decoration: none;
    font-family: momo;
}

.home {
    grid-area: Home;
}

.discord {
    grid-area: Discord;
}

.servers {
    grid-area: Servers;
}

nav button{
    width: 90vw;
    margin: 1px;
}

button {
    background: #d50e53;
    border: 2px solid #ffffff;
    border-radius: 5px;
}

button a {
    color: white;
    font-family: momo;
    text-decoration: none;
}

@media screen and (min-width: 883px) {
    .titleHeading {
        justify-self: start;
    }

    .nav-icon {
        display: none;
    }

    .buttons {
        column-gap: 10px;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr;
        grid-template-areas: "titleheading Home Servers Discord";
        align-items: center;
    }

    nav button {
        width: auto;
        padding: 8px 16px;
    }
}