CSS quests

/* BASE STYLING */
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: radial-gradient(ellipse at center, #D6412A 0%, #f9f100 49%, #D6412A 100%);
}
/* VARS */
/* MIXINS */
/* CACTUS */
.glasses {
  width: 100px;
  height: 7px;
  background: #000;
  position: absolute;
  top: 50px;
  left: -10px;
  display: flex;
  justify-content: space-around;
}
.eye {
  background: #111;
  width: 36px;
  height: 32px;
  background: linear-gradient(45deg, #000000 2%, #2D2D2D 50%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  position: relative;
  top: -6px;
  border-radius: 4px 4px 22px 22px;
  border: 3px solid #000;
}
.mouth {
  width: 50px;
  background: #003400;
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: 0 0 50% 50%;
  border: 4px solid #006700;
  display: flex;
  justify-content: center;
  animation: mouth 0.6s infinite alternate cubic-bezier(0.76, 0.05, 0.86, 0.06);
}
.tooth {
  width: 8px;
  height: 11px;
  background: #fff;
  border-radius: 0 0 2px 2px;
  margin: 0 3px;
}
.tongue {
  background: red;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin: auto;
  width: 20px;
  height: 5px;
  border-radius: 60px;
  box-shadow: 0px 5px 5px 0px #111;
}
.cactus {
  width: 80px;
  height: 340px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
  animation: cactus 0.5s infinite alternate linear;
}
.cactus__body {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to right, green, green 70%, #006700 30%, #006700);
  background-size: 10px 100%;
  border-radius: 80px 45px 0 0;
}
.cactus__arm {
  width: 45px;
  height: 140px;
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  will-change: transform;
  background: linear-gradient(to right, green, green 70%, #006700 30%, #006700);
  background-size: 10px 100%;
}
.cactus__arm:before {
  display: block;
  height: 80px;
  width: 45px;
  content: "";
  position: absolute;
  background: linear-gradient(to right, green, green 70%, #006700 30%, #006700);
  background-size: 10px 100%;
}
.cactus__arm:after {
  background: green;
  height: 45px;
  content: "";
  display: block;
  position: absolute;
  will-change: transform;
  background: linear-gradient(to right, green, green 70%, #006700 30%, #006700);
  background-size: 10px 100%;
}
.cactus__arm--left {
  top: 0;
  left: 0;
  border-radius: 0 0 0 50px;
  animation: leftArm 0.5s infinite alternate linear;
}
.cactus__arm--left:before {
  border-radius: 25px 80px 80px 25px;
  top: -55px;
  left: 0 ;
  animation: hand 1s infinite alternate ease-in;
}
.cactus__arm--left:after {
  bottom: 0;
  right: -40px;
  width: 60px;
  transform: translateX(20px);
}
.cactus__arm--right {
  border-radius: 0 0 50px 0;
  right: -85px;
  animation: rightArm 0.5s infinite alternate linear;
  height: 90px;
}
.cactus__arm--right:before {
  border-radius: 25px 80px 80px 25px;
  top: -55px;
  left: 0;
  transform: translateX(-23px) rotate(-90deg);
  animation: hand 1s infinite alternate ease-in;
}
.cactus__arm--right:after {
  bottom: 0;
  left: 0;
  width: 60px;
  transform: translateX(-60px);
}
.note {
  width: 36px;
  height: 40px;
  border-width: 8px 4px 4px 4px;
  border-style: solid;
  border-color: #000 #000 transparent #000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: auto;
}
.note--one {
  animation: note 1s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.note--two {
  animation: note2 1s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
  bottom: 290px;
}
.note:after,
.note:before {
  display: block;
  width: 12px;
  height: 12px;
  content: '';
  background: #000;
  position: absolute;
  bottom: -7px;
  border-radius: 50%;
}
.note:before {
  left: -12px;
}
.note:after {
  right: -4px;
}
.ghettoblaster {
  background: #121212;
  width: 180px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(200px);
}
.ghettoblaster:before,
.ghettoblaster:after {
  position: absolute;
  top: 10px;
  background: #333;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  content: '';
  display: block;
}
.ghettoblaster:before {
  left: 15px;
}
.ghettoblaster:after {
  right: 15px;
}
.ghettoblaster__handle {
  border: 6px solid #121212;
  width: 80%;
  height: 46px;
  box-sizing: border-box;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin: auto;
}
/* ANIMATIONS */
@keyframes cactus {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(40px);
  }
}
@keyframes hand {
  0% {
    transform: translateX(18px) rotate(-90deg);
  }
  50% {
    height: 46px;
    top: -38px;
    transform: translateX(0) rotate(-90deg);
  }
  100% {
    transform: translateX(-18px) rotate(-90deg);
  }
}
@keyframes leftArm {
  0% {
    transform: translateY(60px) translateX(-85px);
  }
  100% {
    transform: translateY(30px) translateX(-85px);
  }
}
@keyframes rightArm {
  0% {
    transform: translateY(90px) translateX(0);
  }
  100% {
    transform: translateY(115px) translateX(-20px);
  }
}
@keyframes mouth {
  0% {
    height: 50px;
  }
  100% {
    height: 35px;
  }
}
@keyframes note {
  0% {
    transform: translateX(-100px) rotate(0);
  }
  50% {
    transform: translateX(-110px) rotate(50deg);
  }
  100% {
    transform: translateX(-100px) rotate(-50deg);
  }
}
@keyframes note2 {
  0% {
    transform: translateX(160px) rotate(0);
  }
  50% {
    transform: translateX(180px) rotate(50deg);
  }
  100% {
    transform: translateX(160px) rotate(-50deg);
  }
}