/*
  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;
}

body[data-bouton="1"] #affiche {
  background-color: #0A997F;
}

body[data-bouton="2"] #affiche {
  background-color: #FECD62;
}

body[data-bouton="3"] #affiche {
  background-color: #ff2719;
}