body {
  background-image: url(images/fond.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-family: 'Courier New', Courier, monospace;
}
h1 {
  text-align: center;
}
#container {
  background-color: #211b224a; /* A commenter plus tard */
  position: relative;
  margin: auto;
  height: 450px;
  width: 350px;
}

#corps {
  /*Taille*/
  height: 65%;
  width: 50%;
  /*Couleur et Position*/
  background-color: rgb(224, 141, 77);
  position: relative;
  /*Décalages*/
  top: 16%;
  left: 25%;
  /*Arrondis*/
  border-radius: 42%;
  /*Z-Index*/
  z-index: 2; /*  Le z-index: 1 est celui notre container */
}

.elements {
  z-index: 3;
  position: absolute;
}

/* Ajoutez le css des images ici */
#nose {
  top: 80px;
  left: 20px;
}
#eyes {
  top: 60px;
  left: 35px;
}
#left-ear {
  top: 40px;
  left: 160px;
}
#right-ear {
  top: 40px;
  left: -40px;
}
#eyebrows {
  top: 40px;
  left: 25px;
}
#hat {
  top: -40px;
  left: 0px;
}
#left-hand {
  top: -40px;
  left: 120px;
}
#right-hand {
  top: 140px;
  left: -50px;
}
#shoes {
  top: 250px;
  left: -25px;
}

/*GRAVES PATATE*/
#torso {
  /*Taille*/
  height: 65%;
  width: 50%;
  /*Couleur et Position*/
  background-color: rgb(243, 207, 180);
  position: relative;
  /*Décalages*/
  top: 16%;
  left: 25%;
  /*Arrondis*/
  border-radius: 42%;
  /*Z-Index*/
  z-index: 2; /*  Le z-index: 1 est celui notre container */
}

@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(2px) }
 50% { transform: translateX(-2px) }
 75% { transform: translateX(2px) }
 100% { transform: translateX(0) }
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes vertical-shaking {
 0% { transform: translateY(0) }
 25% { transform: translateY(2px) }
 50% { transform: translateY(-2px) }
 75% { transform: translateY(2px) }
 100% { transform: translateY(0) }
}
#nose2 {
  top: -50px;
  left: -60px;
  animation: horizontal-shaking 0.5s linear infinite;
}
#ice{
  height: 600px;
  top: -150px;
  left: -225px;
  opacity: 0%;
}
#ice:hover{
  opacity: 0%;
}
#eyes2 {
  top: -50px;
  left: -62px;
  animation: tilt-shaking 0.25s linear infinite;
}
#brows {
  top: -50px;
  left: -62px;
  animation: horizontal-shaking 0.5s linear infinite;
}
#smirk {
  top: -50px;
  left: -62px;
  animation: vertical-shaking 0.25s linear infinite;
}
#hair {
  top: -60px;
  left: -57px;
  animation: horizontal-shaking 0.5s linear infinite;
}
#pull {
  width: 370px;
  top: 0px;
  left: -97px;
}

/* Version animée */
#nose3 {
  top: 80px;
  left: 20px;
}
#eyes3 {
  top: 60px;
  left: 35px;
}
#left-ear3 {
  top: 40px;
  left: 160px;
}
#right-ear3 {
  top: 40px;
  left: -40px;
}
#eyebrows3 {
  top: 40px;
  left: 25px;
}
@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}
#hat3 {
  top: -40px;
  left: 0px;
  animation: MoveUpDown 1s linear infinite;
  animation-play-state: paused;
}
#hat3:hover {
  animation-play-state: running;
}
@keyframes WaveHand {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
}
#left-hand3 {
  top: -80px;
  left: 120px;
  transform-origin:bottom left;
  animation: WaveHand 3s linear infinite;
}
#right-hand3 {
  top: 140px;
  left: -50px;
}
#shoes3 {
  top: 250px;
  left: -25px;
}


/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  z-index: 40;
}

.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}