@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Roboto+Condensed:wght@300&family=Zilla+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Fjalla+One&family=Roboto+Condensed:wght@300&family=Zilla+Slab:wght@300&display=swap');
body{
  margin: 0;
}



/*en tête*/
.intro{
  background: black;
  height : 85%;
}

#lo_go{
  width: 20%;
  margin-left: 2%;
  margin-top: 2%;
  position : fixed;
  font-family: 'Zilla Slab', serif;
  font-size: 2vw;
}
#lo_go a{
  text-decoration: none;
  color: white;
}
.logo{
  color: white;
  background-color: ;
  width: 20%;
  margin-left: 2%;
  margin-top: 2%;
  position : fixed;
  font-family: 'Zilla Slab', serif;
  font-size: 2vw;
}

.projets{
  color: white;
  font-family: 'EB Garamond', serif;
  font-size: 1vw;
}

#con_finement{
  position: absolute;
  margin-left: 10%;
  margin-top: 10%;
}
#con_finement a{
  text-decoration: none;
  color: white;
}

#calla_rosa{
  position: absolute;
  margin-left: 20%;
  margin-top: 20%;
}
#calla_rosa a{
  text-decoration: none;
  color: white;
}

#please_dont{
  position: absolute;
  margin-left: 30%;
  margin-top: 30%;
}
#please_dont a{
  text-decoration: none;
  color: white;
}

#palympseste{
  position: absolute;
  margin-left: 60%;
  margin-top: 20%;
}
#palympseste a{
  text-decoration: none;
  color: white;
}

#tout_est_la_montagne{
  position: absolute;
  margin-left: 35%;
  margin-top: 15%;
}
#tout_est_la_montagne a{
  text-decoration: none;
  color: white;
}

#colle_âge{
  position: absolute;
  margin-left: 70%;
  margin-top: 5%;
}
#colle_âge a{
  text-decoration: none;
  color: white;
}

#con_tact{
  position: absolute;
  margin-left: 20%;
  margin-top: 5%;
}
#con_tact a{
  text-decoration: none;
  color: white;
}

#octo_pus{
  position: absolute;
  margin-left: 90%;
  margin-top: 30%;
}

#octo_pus a{
  text-decoration: none;
  color: white;
}


.imagefix{
  margin-left: 66%;
  margin-top: 6%;
  position: absolute;
}

.imagegauche{
  margin-left: 12%;
  margin-top: 4%;
  position: absolute;
}

.image{
  display: flex;
  animation-duration: 20s;
  animation-name: images;
  animation-iteration-count: infinite;
}

#caroussel{
  width: 333px;
  overflow: hidden;
  position: absolute;
  margin-left: 66%;
  margin-top: 6%;
}

@keyframes images{
  0%{
    transform: translateX(0);
  }
  25%{
    transform: translateX(-333px);
  }
  50%{
    transform: translateX(-666px);
  }
  75%{
    transform: translateX(-999px);
  }
  100%{
    transform: translateX(0px);
  }
}

.imagestitre{
    position: absolute;
    margin-top: 4%;
    margin-left: 18%;
    width: 20%;
}
.titre{
  position: absolute;
  font-family: 'Zilla Slab', serif;
  font-size: 4vw;
  width: 30%;
  margin-left: 31%;
  margin-top: 6%;
  margin-right:40%;
  text-align: right;
}

.texte{
  position: absolute;
  margin-left: 38%;
  font-family: 'EB Garamond', serif;
  font-size: 1vw;
  margin-top: 27%;
  margin-right:44%;
  text-align: right;
  width: 20%;
}



.texte_blanc{
  position: absolute;
  margin-left: 38%;
  font-family: 'EB Garamond', serif;
  font-size: 1vw;
  margin-top: 27%;
  margin-right:44%;
  text-align: right;
  width: 20%;
  color: white;
}


/*con_finement*/
.projet_con_finement{
  height:95%;
  background-color: ;
}


/*calla_rosa*/
.projet_calla_rosa{
  height:95%;
  background-color:black;

}

/*please_dont*/
.projet_please_dont{
  background-color: white;
  height:95%;
}

/*palympseste*/
.palympseste{
  background-color: black;
  height:95%;
}

/*montagne*/
.tout_est_la_montagne{
  background-color: white;
  height:95%;
}

/*colle_âge*/
.colle_âge{
  background-color: black;
  height:95%;
}

.octo_pus{
  background-color: white;
  height:95%;
}

.fin{
  background-color: black;
  height:23%;
}


@media {

}