* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none !important;
}

body{
    font-family: "Roboto Mono" !important;
    background: #0f0f0f !important;
    color: #fff !important;
    height: 100vh;

    display: grid;
    grid-template-rows: 80px 1fr 80px;

    overflow-x: hidden;
}

.hidden {
    display: none !important;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: center;
}

/* header,
footer,
main {
    padding: 20px;
    border: rgb(49, 41, 28) 1px solid;
} */

header {
    padding: 20px;  
}

main {
    display: flex;
    justify-content: center;
}

#hero {
    width: 100%;
    position: relative;
    background: url(./img/cover-desktop.png) no-repeat 50% 50%;
    background-size: contain;
}

#brand {
    text-decoration: none;
}

#archive a{
    color: white;
    text-decoration: none;
}

.sr-only {
    display: none;
}

.nav-toggle {
    display: none;
}

.flex {
    display: flex;
    gap: var(--gap, 4rem);
}


.navigation {
    background:#0f0f0f;
    align-items: center;
    justify-content: end;
    list-style: none;
    margin-inline-end: min(10vw, 10em);
}

.navigation a {
    color: white;
    text-decoration: none;
}

.archive-navigation {
    background:#0f0f0f;
    align-items: center;
    justify-content: end;
    list-style: none;
    margin-inline-end: min(10vw, 10em);
}

.logos {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    height: 10vh;
    filter: brightness(0) invert(1);
}

.active-color {
    color:#f8b03c !important;
}

h3 {
    color: #fff;
    font-weight: lighter;
    letter-spacing: 0.15em;
    display: inline-block;
    position: relative;
}

.info-line {
    position: absolute;
    color: grey;
    font-size: 12px;
    z-index: 100;
    top: 95%;
    left: 3%;
}

.control-info {
    padding: 5px 20px;    
}

.spawn-list {
    list-style-type: none;
    
}

.spawn-location {
    color: grey !important;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    
    display: inline-block;
    padding: 5px 20px;
    position: relative;  
}

.underline {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    
    display: inline-block;
    padding: 5px 20px;
    position: relative;
}

.underline:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    background: #ffffff6b;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}
.underline:hover:after { 
    width: 100%; 
    left: 0; 
}


#social li {
    text-decoration: none;
    color: white !important;
    display: inline;
    list-style: none;
}

footer {
    display: flex;
    flex-direction: row;
    margin-left: 5vw;
    margin-right: 5vw;
    align-items: center;
    justify-content: space-between;
}

footer p{
    color: grey;
}

@media (max-width: 50em) {
    
    #hero {
        background: url(img/cover-mobile.png) no-repeat 50% 50%;
        background-size: contain;    
    }

    nav #social {
        right: 95%;
        top: 80px;
    }
    
    .navigation {

        --gap: 6em; 

        position: fixed;
        inset: 0 0 0 30%;
        margin-inline-end: 0;

        flex-direction: column;
        justify-content: center;
        padding: min(30vh, 10rem) 2em;
        z-index: 1000;
        
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .navigation[data-visible="true"] {
        transform: translateX(0%);
    }

    .nav-toggle {
        display: block;
        position: absolute;
        z-index: 9999;
        background: url("./img/menu_hamburger.png") no-repeat 50% 50%;
        background-size: cover;
        border: 0;
        width: 2rem;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
    }

    .nav-toggle[aria-expanded="true"] {
        background: url("./img/menu_close.png") no-repeat 50% 50%;
        background-size: cover;
    }

    .hide {
        display: None;
    }

    .info-line {
        display: None;
    }    

    footer {
        justify-content: center;
    }
    .footer-location {
        display: none;
    }

    .footer-contact {
        text-align: center;
    }

}