@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
    --gradient: linear-gradient(
        0deg,
        hsl(240deg 100% 7%) 0%,
        hsl(259deg 100% 7%) 50%,
        hsl(278deg 100% 8%) 100%
      );
    --gradient-inverse: linear-gradient(
        180deg,
        hsl(240deg 100% 7%) 0%,
        hsl(259deg 100% 7%) 50%,
        hsl(278deg 100% 8%) 100%
      );
}



body {
    width: 100vw;
    height: 100vh;
    margin: 0;
}
body .container {
    width: 100%;
    height: 100%;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}
body .container section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
}
body .container section:nth-of-type(1) {
    background-image: var(--gradient);
}
body .container section:nth-of-type(2) {
    background-image: var(--gradient-inverse);
}
body .container section:nth-of-type(3) {
    background-image: var(--gradient);
}
body .container section:nth-of-type(4) {
    background-image: var(--gradient-inverse);
}
body .container section:nth-of-type(5) {
    background-image: var(--gradient);
}
body .container section:nth-of-type(6) {
    background-image: var(--gradient-inverse);
}

.s {
    display: flex;
    flex-direction: column;
    align-items:center;
}

.title1 {
    font-size: 6vw;
    font-family: 'Press Start 2P', cursive;
    color: purple;
    user-select: none;
    text-align: center;
}

.title2 {
    font-size: 6vw;
    font-family: 'Press Start 2P', cursive;
    color: blue;
    user-select: none;
    text-align: center;
}

.subtitle1 {
    width: 80%;
    font-size: 1.7vw;
    font-family: 'Press Start 2P', cursive;
    color: darkcyan;
    line-height: 2vw;
    text-align: center;
}

.subtitle2 {
    width: 80%;
    font-size: 1.7vw;
    font-family: 'Press Start 2P', cursive;
    color: darkcyan;
    line-height: 2vw;
    text-align: center;
}

.planet {
    height: 10vw;
    width: auto;
    
}

nav {
    position:fixed;
    margin-top: 2em;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    
}

nav a {
    padding: 1rem;
    text-decoration: none;
    text-decoration-color: purple;
    color: rgb(240, 223, 130);
    font-family: 'Press Start 2P', cursive;
    font-size: 100%;
    padding-top: 0%;
    padding-bottom: 0%;

}

.links {
    display: flex;
    flex-direction: row;
    width: 90%;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 2%;
}

.links i {
    font-size: 5vw;
}

.fa-discord {
    color: rgb(88,101,242);
}

.fa-instagram {
    color: rgb(245, 96, 64);
}

.fa-twitter {
    color: rgb(29, 161, 242);
}

.fa-reddit {
    color: rgb(255, 69, 0);
}

.fa-telegram-plane {
    color: rgb(42, 171, 238);
}

.fa-tiktok {
    color: rgb(254, 44, 85) 
}

.roadmap {
    
    width: 80vw;
    height: auto;
}

.roadmap2 {
    
    width: 40vw;
    height: auto;
}

.team {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.team img {
    width: 10vw;
    height: auto;
}

.team img:hover {
    animation: flip 2s;
}

@keyframes flip {
    from {
        trasform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}