.yeti-speech {
  position: absolute;
  bottom: 30%;
  right: 25%;
  width: 25%;
  transform: translateX(195%);
  transition: 0.5s ease all;
}

.trunk {
  position: absolute;
  top: 0;
  width: 50%;
  left: 4%;
  transform: translateX(-110%);
  transition: 0.5s ease all;
}
.eyes {
  position: absolute;
  top: 14%;
  right: 4%;
  width: 40%;
  transform: translateX(110%);
  transition: 0.8s 0.5s ease all;
}

#panel-4 {
  height: 50vh;
  overflow: hidden;
}

#panel-5 {
  overflow: hidden;
}

.rock {
  position: absolute;
  top: 10%;
  left: 15%;
  width: 70%;
  transform: translateY(205%);
  transition: 0.4s 0.5s ease all;
}

.bush {
  position: absolute;
  top: 0%;
  width: 65%;
  left: 16.5%;
  transform: translateY(160%);
  transition: 0.8s 0.2s ease all;
}

.leg {
  position: absolute;
  bottom: 15%;
  width: 80%;
  left: 10%;
  transform: translateX(-120%);
  transition: 0.8s 0.8s ease all;
}

.rabbit-open {
  transform: scale(0.5);
  transition: all 0.8s ease;
}

.five {
  position: absolute;
  top: 0;
  width: 50%;
  left: 80%;
  transform: translateX(120%);
  transition: 0.5s 0.5s ease all;
}
.six {
  transform: translateX(110%);
  transition: 0.8s 1s ease all;
}

.end {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
}

#button1 {
  bottom: 10%;
  left: 5%;
  padding: 10% 17%;
  background-image: url(../assets/rabbit/rabbit-gametwo-left.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeIn 1s 3s ease forwards;
  transition: fadeIn 1s ease-in;
}

#button1::before {
  content: '';
  position: absolute;
  padding: 14% 10%;
  border: none;
  background-image: url(../assets/rabbit/rabbit-gamethree-left.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button1[data-clicked='true'] {
  background: url(../assets/rabbit/rabbit-gameone-left.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button2 {
  bottom: 10%;
  left: 34%;
  padding: 10% 17%;
  background-image: url(../assets/rabbit/rabbit-gametwo-middel.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeIn 1s 3s ease forwards;
  transition: fadeIn 1s ease-in;
}

#button2::before {
  content: '';
  position: absolute;
  padding: 14% 10%;
  border: none;
  background-image: url(../assets/rabbit/rabbit-gamethree-middel.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button2[data-clicked='true'] {
  background: url(../assets/rabbit/rabbit-gameone-middel.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button3 {
  bottom: 10%;
  left: 58%;
  padding: 10% 17%;
  background-image: url(../assets/rabbit/rabbit-gametwo-right.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: fadeIn 1s 3s ease forwards;
  transition: fadeIn 1s ease-in;
}

#button3::before {
  content: '';
  position: absolute;
  padding: 14% 10%;
  border: none;
  background-image: url(../assets/rabbit/rabbit-gamethreeright.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#button3[data-clicked='true'] {
  background: url(../assets/rabbit/rabbit-gameone-right.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

.breakpoint--bottom {
  bottom: 45%;
}