h1 {
    color: rgb(175, 244, 183);
    font-size: 10rem;
    font-family: "Roberte";
    top: 40%;
    left: 30%;
    position: fixed;
    animation: slide5 60s infinite;

}

@keyframes slide5{
  0%{
    top: 45%;
    left: 40%;
  }
  50%{
    top: 45%;
    left: 100%;
  }
  100%{
    top: 45%;
    left: 0%;
  }
}


h2{
  color: lemonchiffon;
  position: fixed;
  left: 10%;
  top: 10%;
  animation: slide2 55s infinite;
}

@keyframes slide2{
  0%{
    top: 5%;
    left: 0%;
  }
  50%{
    top: 5%;
    left: 100%;
  }
  100%{
    top: 5%;
    left: 0%;
  }
}


a {
  position: fixed;
  right: 35%;
  top: 35%;
  font-size: 2rem;
  animation: slide4 60s infinite;
}

@keyframes slide4{
  0%{
    top: 50%;
    right: 0%;
  }
  50%{
    top: 50%;
    right: 100%;
  }
  100%{
    top: 50%;
    right: 0%;
  }
}


#wiki {
  position: fixed;
  left: 25%;
  bottom: 25%;
  font-size: 3rem;
  animation: circle 50s infinite;
}

@keyframes circle{
  0%{
    transform: rotate(0deg);
  } 100% {
    transform: rotate(-360deg);
  }
}


#gradient {
    display: flex;
  background: radial-gradient(
    ellipse farthest-corner,
    white,
    navy 30%,
    black 50%,
    #37335c
  );
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: unset;
  z-index: -1;
  justify-content: center;
  align-items: center;

} 

#terre {
  /* position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   */
   width: 450px;
   height: 450px;


}

#ligne {
  position: fixed;
  width: 30%;
  height: 30%;
  left: 5%;
  bottom: 5%;
  z-index: 1;

}


ol{color:white;}
ul{color:white;}


div{
/* border-radius: 100px;
background-color: #b7eb8d;
width: 100vw;
height: 30vh;
 */
}

@font-face {
    font-family: "Roberte";
    src: url("webfonts/Roberte-Regular.woff");
}

@font-face {
    font-family: "Bouclees";
    src: url("font/Bouclees-Regular.woff");
}


#p1{
  color: white;
  position: relative;
  font-size: 5rem;
  font-family: "Bouclees";
  animation: slide 100s infinite;
}

@keyframes slide{
  0%{
    top: 0%;
    left: 0%;
  }
  50%{
    top: 0%;
    left: 100%;
  }
  100%{
    top: 0%;
    left: 0%;
  }
}


#p2{
  color: white;
  font-size: 2rem;
  font-family: "Bouclees";
  position: fixed;
  right: 5%;
  bottom: 5%;
  animation: slide3 80s infinite;
}

@keyframes slide3{
  0%{
    bottom: 10%;
    right: 0%;
  }
  50%{
    bottom: 10%;
    right: 100%;
  }
  100%{
    bottom: 10%;
    right: 0%;
  }
}