* {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Calibri";
    box-sizing: border-box
}

body {
    background-color: rgba(24, 24, 24, .9)
}

a {
    text-decoration: none
}

#background-video {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    box-sizing: border-box
}

#background-video #mobile-bg,
#background-video #player {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#background-video #mobile-bg,
#background-video #player {
    display: block
}

#video-overlay {
    z-index: 1;
    position: fixed;
    bottom: 0;
    right: 0
}

#content,
#video-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#content {
    z-index: 4;
    position: absolute
}

#header {
    background-color: rgba(24, 24, 24, .9);
    z-index: 987
}

#header,
#mobile-menu-header {
    position: fixed;
    width: 100%;
    height: 15vh
}

#menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row
}

#mobile-menu {
    flex: 1;
    padding-top: 3vh;
    position: relative;
    display: none
}

#mobile-menu>.fa {
    cursor: pointer;
    font-size: 2rem;
    color: hsla(0, 0%, 87.8%, .9);
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

#mobile-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: -100vw;
    top: 0;
    background: #000;
    z-index: 988;
    transition-property: left;
    transition-duration: .15s;
    transition-timing-function: linear
}

#mobile-overlay .fa {
    cursor: pointer;
    font-size: 2rem;
    color: hsla(0, 0%, 87.8%, .9);
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

#mobile-overlay #mobile-menu-header {
    display: flex;
    flex-direction: row
}

#mobile-overlay #mobile-menu-header #close-button {
    padding-top: 1vh;
    position: relative;
    flex: 1
}

#mobile-overlay #mobile-menu-header #mobile-header-filler {
    flex: 9
}

#mobile-overlay>.background-image {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#mobile-overlay>.background-image>img {
    width: 100%;
    margin-left: 50%;
    margin-top: 60%;
    transform: translate(-50%, -50%);
    opacity: .1
}

#mobile-overlay ul {
    width: 80%;
    position: relative;
    display: block;
    list-style: none;
    margin: 20vh auto 0;
    text-align: center
}

#mobile-overlay ul li,
#mobile-overlay ul li a {
    margin-bottom: 2vh;
    font-weight: 700;
    font-size: 2rem;
    color: hsla(0, 0%, 87.8%, .9)
}

.mobileOverlayOut {
    left: 0 !important
}

.menu-links {
    flex: 4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: "Calibri", sans-serif;
    padding: 3vw
}

.menu-item,
.menu-item a {
    color: #fff;
    font-size: .9em;
    font-family: "Calibri", sans-serif;
 }

#online-info {
    flex: 3;
    color: #fff;
    text-align: center;
    padding: .5vw
}

#online-info .title {
    font-size: .5em;
    margin-top: 2vw
}

#online-info .count {
    font-size: .9em
}

.discord-link {
    position: relative;
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.user-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.menu-icon>img {
    width: 15vw
}

@media screen and (max-width:790px) {
    #header {
        height: 10vh
    }

    #mobile-menu {
        padding-top: 1vh;
        padding-left: 3vw;
        display: block
    }

    #online-info {
        flex: 2;
        font-size: .7rem
    }

    .menu-links {
        display: none
    }

    .menu-icon img {
        width: 30vw
    }

    .discord-status>.info {
        margin-top: -20px !important
    }

    .discord-status>.info .discord-online {
        height: 4px;
        width: 4px
    }

    .discord-status>.info .players-online {
        font-size: .3rem
    }
}