/* 
  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:8vh;
  margin-top: 0;
}

.rond {
  position: absolute;
  
  /* 
  le calcul suivant : 
    la moitié de l’affiche - la moitié de la boule
    = center la boule dans l’affiche
  */
  left: calc(64vh/2 - 30vh/2);
  
  width: 30vh;
  height: 30vh;
  top: 10vh;
  
  border-radius: 50%;
  background-color: #0A997F;
  box-shadow: 5px 10px 50px black;
  
  /* plus d’information sur les animations en keyframe sur la doc de MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/animation */

  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.90, .01, .99, 1.01);
  animation-direction: alternate;
  animation-iteration-count: infinite;
  
  /* pour gagner du temps on condense les lignes précédentes dans la suivante : */
  /*  animation: bounce 1s cubic-bezier(.90, .01, .99, 1.01) infinite alternate; */
  
}

@keyframes bounce {
  0%{
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    top:calc(90vh - 30vh);
    transform: scaleX(1.1) scaleY(1);
  }
}