@import url('https://fonts.googleapis.com/css?family=Rock+Salt');

body,
html {
  height: 100%;
  font-family: "Venus Cormier";
}

main {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  color: white;
}

button  {
  position: sticky;
  z-index: 13;
  background-color: rgb(167, 229, 250);      /* couleur de fond */
  color: rgb(255, 126, 221);                 /* couleur du texte */
  font-size: 1rem;              /* taille du symbole */
  padding: 0.5em 0.8em;         /* espace intérieur */
  border: none;                 /* pas de bordure */
  border-radius: 50%;           /* bouton rond */
  cursor: pointer;              /* curseur main */

}
.feuille {

  flex-direction: column;
  position: fixed;
  display: flex;
  padding: 2em;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  transition: all 500ms;
  cursor: s-resize;
  display: grid;

}

.feuille.invisible {
  transform: translateY(-100vw);
}



/* FEUILLE 8 ----------------------------------- */
#feuille8 {
  background-color: rgb(51, 206, 123);

}

.conclusion {
  display: flex;
  top: -18vh;
  right: 1vh;
  color: rgb(172, 229, 255);
  position: relative;
  font-family: "Venus Cormier";
  font-size: 8vw;

}


/*----------------------------------- */


/* FEUILLE 7 ----------------------------------- */
#feuille7 {
  background-color: rgb(253, 182, 220);
  grid-template-columns: 1fr 1.2fr; 
  /* crée deux colonnes */
 grid-template-rows: 70px 400px 400px 700px ;
 gap: 1em; /*contours*/
}


.pourfairevisu{
  font-family: "Venus Cormier";
  font-size: 3.5vw;
  margin: 0px 0px 0px 0px;
  margin-top: 2em;
  color: rgb(79, 84, 255);
  white-space: pre-line;
}

.regletronc{
  font-family: "Zalando";
  font-size: 1em ;
  margin-top: 15em;

  color: rgb(71, 71, 255);
}


.tronc{
  z-index: 20;
  margin-top: 6em;
  margin-left: 18em;
  align-content: center;

}

/*----------------------------------- */

/* FEUILLE 6 ----------------------------------- */

#feuille6 {
  background-color: rgb(233, 240, 158);
  grid-template-columns: 1fr 1.2fr; 
  /* crée deux colonnes */
  grid-template-rows: 350px 10px ;
 gap: 1em; /*contours*/
}

.image {

  height: 70vh;
   z-index: 20;
  margin-top: 8em;
  align-content: center;
margin-left: 15em;

}

.textimg {
  color: rgb(237, 80, 177);
  font-family: "Zalando";
  white-space: pre-line;
  margin-top: 10em;
}

.textimg2 {
  color: rgb(237, 80, 177);
  font-size: 5vw;
  text-transform: uppercase;
  white-space: pre-line;
  
}

/* FEUILLE 5 ----------------------------------- */
#feuille5 {
  background-color: rgb(151, 198, 255);
  grid-template-columns: 1.2fr 1fr; 
  /* crée deux colonnes */
 grid-template-rows: 70px 400px 400px 700px ;
}

.pourcefaire {
  font-family: "Venus Cormier";
  font-size: 4vw;
  margin: 0px 0px 0px 0px;
  color: rgb(218, 255, 145);

}


.cequonvoulait {
  font-family: "Zalando";
  font-size: 1em ;
  margin-top: 1em;
  white-space: pre-line;
  color: rgb(218, 255, 145);
}


.commentonafait{
  font-family: "Zalando";
  font-size: 1em ;
  white-space: pre-line;
  align-items: center;
  margin-top: 15em;
  margin-right: 5em;
  color: rgb(218, 255, 145);

}

.donneesun{
  z-index: 20;
  position: fixed;

  margin-top: 15em;
  
}

/* ----------------------------------- */















/* FEUILLE 4 ----------------------------------- */

#feuille4 {
  background-color: pink;
  grid-template-columns: 1fr 1fr;
  /* crée deux colonnes */
 grid-template-rows: 300px 400px 700px;


}

  .moyenneeleves {
    color: rgb(128, 139, 255);
    position: relative;
    font-family: "Venus Cormier";
     white-space: pre-line;
  }

  .moyennesemaine {
    color: rgb(128, 139, 255);
    position: relative;
     white-space: pre-line;
  }

  .donneseleve {
    color: rgb(176, 172, 255);
    position: relative;
      white-space: pre-line;
      margin: 0px 0px 0px 0px;
  }

  .donnesecole {
    color: rgb(176, 172, 255);
    position: relative;
      white-space: pre-line;
      margin: 0px 0px 0px 0px;
  }


  .parsemaine {
    color: rgb(98, 109, 228);
    font-family: "Zalando";
  position: inherit;
  }

.moyen {
  font-size: 4vw;
  white-space: pre-line;
  margin: 0px 0px 0px 0px;
}

.grand {
  font-size: 5vw;
  margin-top: 1em;
  white-space: pre-line;
}

.petit {
  font-size: 2vw;
  white-space: pre-line;
   
}

/* FEUILLE 3 ----------------------------------- */

#feuille3 {
  background-color: rgb(214, 154, 252);
 display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 2em;

  align-items: center;
}

.but {
  color: rgb(167, 229, 250);
  z-index: 10;
  font-family: "Venus Cormier";
  max-width: 15em;
  font-size: 3em;
}

.noteintention {
  font-size: 1em;
  color: rgb(167, 229, 250);
  font-family: "Zalando";
  /* margin-top: -3em; */
  max-width: 50em;
}

/* FEUILLE 2 ----------------------------------- */

#feuille2 {
  background-color: rgb(81, 162, 243);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 2em;
  align-items: center;

}

.debutinfo {
  font-size: 2em;
  color: rgb(255, 215, 234);
}

.info1 {
  font-size: 4em;
  white-space: pre-line;
  color: rgb(255, 215, 234);
}

.info4 {
  font-size: 1em;
  font-family: "Zalando";
  color:rgb(255, 215, 234);
  position: 50%;
}

.infofeuille2 p+p::before {
  content: '';
  display: flex;
  position: relative;
  /* la position relative permet de décaler l’élément vers le haut */
  padding: 0.3vh;
  width: 12em;
  background: rgb(255, 215, 234);
  bottom: 2vh;
}


/* FEUILLE 1 ----------------------------------- */

#feuille1 {
  background-color: rgb(51, 206, 123);

}

.titre {
  display: flex;
  top: -20vh;
  right: 1vh;
  color: rgb(172, 229, 255);
  position: relative;
  font-family: "Venus Cormier";
  font-size: 10vw;

}

.prénoms {
  top: -40vh;
  color: rgb(172, 229, 255);
  position: relative;
  font-family: "Zalando";

}

/*----------------------------------- */