@font-face { font-family: 'GoodTimes';
src: url('good-times.ttf'); }

@font-face { font-family: 'RobotoBlack';
src: url('robotoblack.ttf'); }

body, html { 
    margin: 0;
    padding: 0; width: 100%; 
    background: #000; color: #fff; font-family: 'GoodTimes', sans-serif; 
    overflow-x: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HEADER */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 5px 0 5px; 
    box-sizing: border-box;
    z-index: 100;
}

/* LOGO */
.logo-box {
    /* width: 38.5vw; */
    width: 30.8vw;
    /* max-width: 428px; */
    max-width: 342px;
    /* height: 123px; */
    /* max-height: 70px; */
    max-height: 56px;
    position: relative;

    background: url(rwnd.svg) center center no-repeat;
    background-size: contain;
    aspect-ratio: 6;

    margin-right: 6.5em;
}

.logo-box::after {
    content: "the";
    position: absolute;
    right: -2.5em;
    top: 5px;
    font-size: 1.7vw;
}

.logo-box:hover {
    background: url(rwnd-hover.svg) center center no-repeat;
    background-size: contain;
}

.logo-box img { 
    width: 100%; height: auto; display: block;
}

.home-trigger {
    position: absolute;
    top: 0; left: 0;
    width: 32%; 
    height: 100%; 
    cursor: pointer; 
    z-index: 20;
}
/* END LOGO */

/* MAIN NAV */
nav { 
    display: flex; gap: 3.5vw; 
    /* padding-top: 15px; */
    padding-top: 5px; 
    flex: 1;
    /* padding-left: 5em; */
    justify-content: space-between;
}
nav a { 
    color: #fff;
    text-decoration: none; font-size: 1.7vw; 
    transition: color 0.1s; 
    /* font-weight: bold; */
}
nav a:hover { color: #ff0000;
}

nav a.active {
    color: #ff0000;
}

nav ul {
    display: flex;
    flex: 1;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
}
/* END MAIN NAV */
/* END HEADER */

.hero {
    position: relative;
    width: 80%;
    margin-top: 15px;
}

.hero 
.main-bg { 
    background: url(front-bg.png) center 69px no-repeat;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-bg .wings-badge {
    margin-top: 176px;
}

.bee-bg {
    background: url(bee-bg-2.png) top center no-repeat;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-size: 60%; */
    aspect-ratio: 1.77;
    background-size: contain;
}

.bee-bg
.infected-badge {
    width: 80%;
    max-width: 500px;
    margin-top: 18%;
}

.hero {
    width: 100%;
}

.nav-active .hero { 
    display: none;
}

.content { 
    /* display: none; */
    width: 100%; 
    text-align: center; 
    margin-top: 100px; 
}

.content-top {
    margin-top: 0;
}

.content.active { 
    display: block;
}

.soon { 
    font-size: 4.5vw; 
    letter-spacing: 12px;
}

.legal { 
    margin-top: 0px;
    font-size: 19px; 
    line-height: 2; 
    letter-spacing: 1px; 
    /* max-width: 1700px;  */
    /* width: 90%; */
    margin-inline: auto; 
    text-align: left; 
    text-transform: uppercase;
    font-family: "RobotoBlack";
    color: #ffffff;
    padding: 2em;
}

.reserved {
    color: #f20000;
}

.no-upper {
    text-transform: none;
}

/* BEAT */
#beat {

}

.beat-upper {
    display: flex;
    flex-direction: row;
    gap: 5%;
    max-height: 85vh;
}

.angelsraving {
    background: url(angelsraving_desktop.png) center center no-repeat;
    flex: 1;
    aspect-ratio: 1;
    background-size: contain;
}

.earthisshaking {
    background: url(earthisshakin_desktop.png) center center no-repeat;
    flex: 1;
    aspect-ratio: 1;
    background-size: contain;
}

.keepthe90 {
    background: url(keepthefuckin90sravevibe_desktop.png) center center no-repeat;
    flex: 1;
    aspect-ratio: 1.5;
    background-size: contain;
}
/* END BEAT */

/* RAW */
#raw .legal p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    line-height: 1.4em;
}

#raw .legal > div {
    margin-bottom: 1.5em;
}

#raw .red {
    color: #f20000;
}

#raw .platform-links {
    display: flex;
    /* justify-content: space-between; */
    gap: 10%;
}        

#raw .platform-links a {
    color: #f20000;
    text-transform: uppercase;
}

#raw .platform-links a.white {
    color: #ffffff;
    text-transform: uppercase;
}

#raw .upper {
    text-transform: uppercase;
}

.end-credits {
    display: none;
}
/* END RAW */

.content-section {
    min-height: 80vh;
    width: 100%;
}

/* mobile landscape */
@media (max-width: 768px) {

    .logo-box {
        margin-right: 0;
    }

    .logo-box::after {
        display: none;        
    }

    header { 
        flex-direction: column;
        align-items: center; 
        padding: 10px 5%; 
        display: none;
    }
    
    .logo-box { 
        width: 85%;
        max-height: 40px;
    }

    nav { 
        margin-top: 0px; 
        width: 100%; 
        justify-content: space-between; 
        padding-left: 0;
    }

    nav a { 
        font-size: 1.2rem;
    }

    .main-bg {

    }

    .bee-bg {
        background-size: contain;
    }

    #raw {
        margin-top: 240px;
    }

    #raw .legal p {
        font-size: 20px;
    }

    .beat-upper {
        margin-bottom: 15px;
        max-height: 100%;
        gap: 0;
    }

    .angelsraving {
        background: url(angelsraving_mobil.png) center center no-repeat;
        flex: 1.26;
        aspect-ratio: 0.835;
        background-size: contain;
    }

    .earthisshaking {
        background: url(earthisshakin_mobil.png) center center no-repeat;
        flex: 1;
        aspect-ratio: 0.665;
        background-size: contain;
    }
}

/* mobile portrait */
@media (max-width: 576px) {

    header {
        display: flex;
    }

    .home-trigger {
        width: 100%;
        height: 100%;
    }

    .bee-bg {
        background-image: url(bee-bg_mobil.png);
        /* background-size: cover; */
        /* background-position: 55% center; */
        aspect-ratio: 0.45;
    }

    .main-bg .wings-badge {
        margin-top: 176px;
        width: auto;
    }

    .beat-upper {
        flex-direction: column;
        margin-bottom: 15px;
        max-height: 100%;
        gap: 15px;
    }

    .keepthe90 {
        background-image: url(keepthefuckin90sravevibe_mobil.png);
        aspect-ratio: 0.7;
    }

    .platform-links {
        flex-direction: column;
    }

    .end-credits {
        display: block;
        width: 100%;
    }
}

/* mobile landscape only */
@media (min-width: 577px) and (max-width: 768px) {
    .main-bg .wings-badge {
        margin-top: 50px;
        width: 100%;
        display: none;
    }

    .hero {
        margin-top: 0;
    }

    .hero 
    .main-bg { 
        background: url(front_bg_mobil.png) center center no-repeat;
        width: 100%;
        height: 100%;
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: contain;
        aspect-ratio: 2.19;
    }

    nav {
        margin-top: 5px;
    }

    header {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* make the header nav sticky on scroll */
.header {
    position: absolute;
}

.header.header--fixed {
    position: fixed;
    top: 0;
}

/* active styles */
.main-menu > li > a.active {
    color: #f20000;
}