/* 
  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: 6vh;
  background-color: #181818;
  color: white;
}

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

h1 {
  font-size:7vh;
  margin-top: 0;
  
  transition: all .4s ease-out;
}

.button_rond {
  position: absolute;
  left: calc(64vh/2 - 10vh/2);
  width: 10vh;
  bottom:50%;
  z-index: 2;
  
  appearance:none;
  font-family: 'Space Mono';

  padding: 1vh;
  font-size: 2vh;
  
  background-color: #fff;
  
  border: 0;
  border-radius: 5px;
}

.rond {
  position: absolute;
  
  left: calc(64vh/2 - 30vh/2);
  
  width: 30vh;
  height: 30vh;
  bottom: 0vh;
  
  border-radius: 50%;
  background-color: #0A997F;
  box-shadow: 5px 10px 50px black;
  
  transition: all .4s ease-out;
}

/* voir le fichier js/main.js pour comprendre comment
démarre l’animation */
body.mode_rond .rond {
  width: 104vh;
  height: 104vh;
}

body.mode_rond h1 {
  font-size: 2vh;
}