@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;600;700&display=swap');

/* font-family: 'League Spartan', sans-serif; */


* {margin:0; padding:0; } /*enlever toutes les marges instaurée par défaut de tous les éléments */
p{margin-bottom: 8px; color: white;}
* { box-sizing: border-box;} /*mesure tout depui l'exterieur*/
img{max-width: 100%;}

h2{
    font-family: 'League Spartan', sans-serif;
    font-weight:600;
    font-size: 2.7rem;
    /* line-height: 20%; */
    color: white;
}

p{
    font-family: 'League Spartan', sans-serif;
    font-size: 1.7rem;
    line-height: 120%;
}

#astronaute{
    position: absolute;
    right: 40rem;
    width: 35rem;
    top: 280rem;
    pointer-events: none;
}

.texte{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    top:45rem;
    margin-left: 3rem;
    gap: 98rem;
    animation: flotter 2s ease-in-out infinite;
}

.texte2{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    margin-right: 3rem;
    top:100rem;
    gap: 98rem;
    animation: flotter 2s ease-in-out infinite;
}

@keyframes flotter {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-1 3rem);
    }
  }

article.texte2{
    right: 0rem;
}


#fusee{
    position: absolute;
    right: 17.5rem;
    height: 400%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    
}

#fond{
    position: relative;
    width: 100%;
    height: 100%;

}

#articleWrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
#scrollstack{
    display: flex;
    align-items: flex-end;
}

#backwrapper{
    display: flex;
}

.stop{
    position: absolute;
    bottom: 23rem;
    right: 37rem;
    width: 20rem;
}

.etape1, .etape2, .etape3, .etape4, .etape5{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

button#begin{
    background-color: rgb(211, 57, 57);
    z-index: 7;
    height: 5rem;
    width: 20rem;
    position: absolute;
    color: white;
    border-radius: 50%;
    border: none;
    top: 310rem;
    align-content: center;
    margin-left: 40%;
}

button :hover{
    font-size: 2.9rem;
    color: rgb(255, 221, 87);
    
}

.etape3{
    margin-top: 5.5rem;
}


#pause{
    pointer-events: none;
}

img{
    top: 263rem;
}

.vide{
    position: absolute;
    height: 20rem;
    top: 8.7rem;
    left: 43%;
    z-index: 100000;
    opacity: 0%;
}

.plein{
    position: absolute;
    height: 20rem;
    top: 8.7rem;
    left: 43%;
    z-index: 100000;
    opacity: 100%;
}

#retour{
    position: absolute;
    top: 3rem;
    left: 3rem;
    position: fixed;
    z-index: 1000;
}