@charset "UTF-8";
@import url("https://use.typekit.net/mfr4vbt.css");

body{
    margin: 0;
    font-family: indivisible,sans-serif;
    font-size: 1.2em;
    color: #fff;
    background: #fff;
}

a{
    text-decoration-line: none;
}

h2{
    margin-top: 1vh;
}

logo{
    background: #FFDD58;
    grid-area: logo;
    /* margin: 2vh 2vw 0 2vw; */
    padding: 3.5vh 0 2vh 2vw;
}
logo img{
    position: absolute;
    object-fit: cover;
    width: 17vw;
}
logo img:hover, logo img:focus{
    opacity: 0.25;
    transition: opacity 0.25s ease-out;
    /* cursor: url('media/burning_up/Icon.png'), auto; */
}
nav{
    background: #FFDD58;
    grid-area: nav;
    text-transform: capitalize;
    padding: 2vh 2vw 2vh 30vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "ul     social media";
}
nav ul{
    grid-area: ul;
    width: 140%;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
nav li{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0A1319;
    position: relative;
}
nav li:hover{
    color: #EA596E;
    font-weight: 900;
}
nav .active{
    font-weight: 900;
}
nav li::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #EA596E;
    transform-origin: middle left;
    transition: transform 0.25s ease-out;
}
nav li:hover::before{
    transform: scaleX(1);
    transform-origin: middle left;
}
.dropdown{
    display: none;
}
.social_media{
    grid-area: social_media;
    position: absolute;
    text-align: right;
    top: 4.5vh;
    right: 2vw;
}
nav img{
    object-fit: cover;
    width: 24px;
    padding-left: 0.5vw;
}
nav img.top{
    opacity: 1;
    transition: opacity 0.25s ease-out;
}
nav img.top:hover{
    opacity: 0.4;
    transition: opacity 0.25s ease-out;
}
#gotop{
    display: none;
    position: fixed;
    bottom: 10vh;
    right: 2vw;
    border: none;
    color: #202128;
    font-size: 2.5em;
    background: #ffffffcc;
    border-radius: 10px;
    z-index: 99;
    /* transform: rotate(-90deg); */
}
#gotop:hover{
    color: #e8bc5d;
    cursor: pointer;
}

.bul_page{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: .5fr 5fr .1fr; */
    grid-template-areas:
        "logo     nav      nav      nav"
        "hero     hero     hero     hero"
        "waitlist waitlist waitlist waitlist"
        "htp      htp      htp      htp"
        "tokens   tokens   tokens   tokens"
        "cards    cards    cards    cards"
        "footer   footer   footer   footer";
}

hero{
    /* background: peru; */
    grid-area: hero;
    position: relative;
    height: 90vh;
    overflow: hidden;
}
hero img{
    object-fit: cover;
    width: 100%;
    margin-top: -24vh;
}

waitlist{
    background: #0A1319;
    color: #fff;
    grid-area: waitlist;
    position: relative;
    padding: 8vh 2vw 10vh 2vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "waitlist     description";
}
.waitlist{
    grid-area: waitlist;
    margin: 1vh 1vw 0 0;
    align-self: center;
    text-align: center;
}
.waitlist p{
    padding: 0 12vw 0 12vw;
}
.waitlist button{
    background: #EA596E;
    color: #fff;
    font-size: 0.9em;
    padding: 1.5vw;
    border: none;
    border-radius: 12px;
}
.waitlist button:hover{
    opacity: 0.4;
    transition: opacity 0.25s ease-out;
    cursor: pointer;
}
.description{
    grid-area: description;
    margin: 0 0 0 1vw;
    width: 80%;
}

tokens{
    background: #FFDD58;
    color: #0A1319;
    grid-area: tokens;
    position: relative;
    padding: 8vh 2vw 10vh 2vw;
    text-align: center;

}
.tokens img{
    object-fit: contain;
    width: 12%;
    opacity: 0.7;
}
.tokens img:hover{
    opacity: 1;
    transform: scale(125%);
    transition: opacity 0.25s ease-out;
    transition: transform 0.25s ease-out;
}

cards{
    background: #fff;
    color: #0A1319;
    grid-area: cards;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "a-cards   q-cards";
    padding: 8vh 2vw 10vh 2vw;
    text-align: center;
}
.cards img{
    object-fit: contain;
    width: 25%;
    opacity: 0.7;
}
.cards img:hover{
    opacity: 1;
    transform: scale(125%);
    transition: opacity 0.25s ease-out;
    transition: transform 0.25s ease-out;
}
.cards h3{
    padding: 0 7vw 0 7vw;
}
.cards.a{
    grid-area: a-cards;
}
.cards.q{
    grid-area: q-cards;
}
htp{
    background: #0A1319;
    grid-area: htp;
    position: relative;
    /* height: 92vh; */
}
video{
    width: 100%;
    height: 100%;
}

footer{
    background: #ea596e;
    grid-area: footer;
    /* margin: 0 2vw 0.5vh 2vw; */
    padding: 0 2vw 0.5vh 2vw;
    display: grid;
    grid-template-areas: 
        "copyright";
    color: #0A1319;
}
footer img{
    grid-area: copyright;
    object-fit: cover;
    width: 8vw;
}
copyright{
    grid-area: copyright;
    padding: 3.5vh 30vw 0 8vw;
}

/* Tablet */
@media only screen and (max-width: 1366px){
    logo img{
        position: absolute;
        object-fit: cover;
        width: 24vw;
    }
    nav{
        /* margin: 0 2vw 0 0; */
        padding: 4vh 2vw 0 30vw;
    }
    .social_media{
        top: 5.9vh;
    }
    .waitlist p{
        padding: 0 7vw 0 7vw;
    }
    .cards.a h3{
        padding: 0 4vw 0 4vw;
    }
    footer{
        padding: 1vh 2vw 2vh 2vw;
    }
    copyright{
        padding: 2vh 16vw 0 8vw;
    }
}

/* Mobile */
@media only screen and (max-width: 1080px){
    nav ul{
        display: none;
    }
    .dropdown{
        grid-area: social_media;
        position: relative;
        display: block;
    }
    .dropdown button{
        background: none;
        border: none;
        cursor: pointer;
    }
    .bar1, .bar2, .bar3{
        width: 8vw;
        height: 10px;
        background: #0A1319;
        margin: 1vh 0;
    }
    .dropbtn:hover{
        opacity: 0.25;
        transition: opacity 0.25s ease-out;
    }
    .dropdown{
        position: relative;
        display: inline-block;
    }
    .dropdown-content{
        display: none;
        position: absolute;
        min-width: 20vw;
        height: 30vh;
        overflow: auto;
        z-index: 1;
    }
}