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

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

h1 {
  font-size:4vh;
  margin-top: 0;
}

.rond {
  position: absolute;
  bottom:0vh;
  right: 0vh;
  
  width: 100vh;
  height: 100vh;
  border-radius: 50%;
  background-color: #0A997F;
  
  transition: all .7s ease-out;
}

/* au survol sur l’affiche */
#affiche:hover .rond {
  bottom: -50vh;
  right: -50vh;
}

/* au survol sur le rond (se combine au survol sur l’affiche) */ 
#affiche .rond:hover {
  background-color: #0A99ff;
}