/*Animation des étoiles*/
#container-stars{
    position: relative;
    height: 18px;
}
#star1 {
  left: 0px;  
  width: 20px;  
  position: absolute;
  animation: starMove1 1s ;
  animation-play-state: paused;
}
#star2 {     
  width: 20px;
  left: 20px;  
  position: absolute;
  animation: starMove2 1s ;
  animation-play-state: paused;
}
#star3 {     
  width: 20px;
  left: 40px;  
  position: absolute;
  animation: starMove3 1s ;
  animation-play-state: paused;
}
@keyframes starMove1 {
  from {left: 300px;}
  to {left: 0px;}
}
@keyframes starMove2 {
  from {left: 300px;}
  to {left: 20px;}
}
@keyframes starMove3 {
  from {left: 300px;}
  to {left: 40px;}
}

/*Animation des coeurs*/
#container-hearts{
    position: relative;
    height: 18px;
}
#heart1 {
  left: 0px;  
  width: 20px;  
  position: absolute;
  animation: heartMove1 1s ;
  animation-play-state: paused;
}
#heart2 {     
  width: 20px;
  left: 20px;  
  position: absolute;
  animation: heartMove2 1s ;
  animation-play-state: paused; 
}
#heart3 {     
  width: 20px;
  left: 40px;  
  position: absolute;
  animation: heartMove3 1s ;
  animation-play-state: paused;
}
#heart4 {     
  width: 20px;
  left: 60px;  
  position: absolute;
  animation: heartMove4 1s ;
  animation-play-state: paused; 
}
#heart5 {     
  width: 20px;
  left: 80px;  
  position: absolute;
  animation: heartMove5 1s ;
  animation-play-state: paused; 
}
@keyframes heartMove1 {
  from {left: 300px;}
  to {left: 0px;}
}
@keyframes heartMove1BIS {
  from {left: 0px;}
  to {left: 300px;}
}
@keyframes heartMove2 {
  from {left: 300px;}
  to {left: 20px;}
}
@keyframes heartMove2BIS {
  from {left: 20px;}
  to {left: 3000px;}
}
@keyframes heartMove3 {
  from {left: 300px;}
  to {left: 40px;}
}
@keyframes heartMove3BIS {
  from {left: 40px;}
  to {left: 300px;}
}
@keyframes heartMove4 {
  from {left: 300px;}
  to {left: 60px;}
}
@keyframes heartMove4BIS {
  from {left: 60px;}
  to {left: 300px;}
}
@keyframes heartMove5 {
  from {left: 300px;}
  to {left: 80px;}
}

@keyframes heartMove5BIS {
  from {left: 80px;}
  to {left: 300px;}
}

/*Clignotement du curseur*/
.curseur-clignote  {
   animation-duration: 1.2s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  50%   {opacity:0; }
  100% { opacity:1; }
}

/*Animation des points*/
@keyframes myAnim {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translateY(0%);
  }
  100% {
    opacity: 0;
    transform: translateY(0%);
  }
}
.box {
  width: 149px;
  height: 100px;  
  opacity: 0;
  font-size: 30px;
  font-weight: bold;
  position: absolute;  
  z-index: 20;
  margin-top: 80px;
  margin-left: 92px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.changing {
  animation: myAnim 2s;
}