body {
  background: url('./images/nuit.jpg');
  overflow: hidden;
}

#sol {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100vw;
  background: url('./images/herbe.jpg') -100px;
}

#canon {
  width: 50px;
  position: fixed;
  bottom: 35px;
  left: 10px;
}

.projectile {
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
  position: fixed;
}

.alien {
  position: fixed;
  width: 96px;
  height: 96px;
  background: url('./images/alien.png')
}

@keyframes explosionJaune {
  from {
    opacity: 100;
    width: 0;
    height: 0;
    margin-left: 75px;
    margin-top: 75px;
  }
  to {
    opacity: 0;
    width: 150px;
    margin-left: 0px;
    margin-top: 0;
    height: 150px;
  }
}

@keyframes explosionOrange {
  from {
    width: 0;
    height: 0;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

@keyframes explosionRouge {
  from {
    width: 0;
    height: 0;
  }
  to {
    width: 10px;
    height: 10px;
  }
}

.explosion {
  position: fixed;
}

.explosion-jaune {
  background: yellow;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  animation-name: explosionJaune;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.explosion-orange {
  background: orange;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  animation-name: explosionOrange;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.explosion-rouge {
  background: red;
  width: 0;
  height: 0;
  border-radius: 50%;
  animation-name: explosionRouge;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}