/* 
  main.css 
  --> ce fichier contiendra la mise en page de votre affiche 
*/


#affiche {
  /* vous pouvez éditer le bloc #affiche mais uniquement pour lui ajouter du padding ou changer sa mise en forme (changer sa couleur de fond, sa famille de caractères, etc.) de manière à ne pas casser la gestion du bloc dans la page */
  padding: 5vh;
  transition: background-color 2s linear;
}

/* 
  début du code CSS pour la mise en forme des éléments de l’affiche
*/

h1 {
  position: relative;
  font-size:4vh;
  margin-top: 0; 
  z-index: 1;
}

/* l’élément créé par p5.js et dans lequel on dessine */
canvas {
  position: absolute;
  z-index: 0;
  top:0;
  left:0;
}

#affiche h2 {
  /* le position: relative et z-index permettent de s’assurer que nos éléments sont au-dessus du canvas */
  position: relative;
  z-index: 1;
  color: #FECD62;
  opacity: 0;
  transform: translate(0, -100vh);
  transition: all .4s ease-out;
} 

body.esa_pau #affiche h2 {
  opacity: 1;
  transform: translate(0,0);
}