body {
  background: #030f23;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
body.lightsOn {
  background: #efeddf;
}
body.lightsOn .animal-wrapper .eye-wrapper .eye .pupil {
  width: 57px;
  height: 75px;
}
body.lightsOn .switch-wrapper {
  top: -20px;
}
body.lightsOn .switch-wrapper .string {
  background: #ff6347;
}
body.lightsOn .switch-wrapper .knot,
body.lightsOn .switch-wrapper .tassel {
  background: #ffc32d;
}
body.lightsOn .switch-wrapper .gap {
  background: #efeddf;
}

.round, .animal-wrapper .eye-wrapper .eye, .animal-wrapper .eye-wrapper .eye .pupil, .switch-wrapper .knot,
.switch-wrapper .tassel {
  border-radius: 50%;
  transform-origin: 50%;
}

.center, .animal-wrapper .eye-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.swing {
  animation: swing 1s 1;
}

.hide {
  display: none;
}

.animal-wrapper {
  position: relative;
  margin-top: 150px;
}
.animal-wrapper #animal-body {
  position: absolute;
  bottom: -710px;
  left: 50%;
  transform: translateX(-50%);
}
.animal-wrapper .eye-wrapper {
  top: 195px;
  display: flex;
  justify-content: space-between;
  width: 280px;
}
.animal-wrapper .eye-wrapper .eye-inner-wrapper {
  animation: blink 4s infinite;
}
.animal-wrapper .eye-wrapper .eye {
  position: relative;
  background: #fff;
  border: 4px solid #000;
  width: 85px;
  height: 85px;
}
.animal-wrapper .eye-wrapper .eye .pupil {
  background: #000;
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: 16px;
  right: 13px;
}

.switch-wrapper {
  position: absolute;
  top: 0;
  left: 20%;
  transition: all 0.2s;
}
.switch-wrapper .string {
  background: #fff;
  width: 7px;
  height: 280px;
}
.switch-wrapper .knot,
.switch-wrapper .tassel {
  cursor: pointer;
  background: #daa520;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.switch-wrapper .knot {
  width: 28px;
  height: 22px;
  bottom: 71px;
}
.switch-wrapper .tassel {
  width: 105px;
  height: 75px;
  bottom: -2px;
  -webkit-clip-path: polygon(38% 0, 62% 0, 80% 100%, 20% 100%);
  clip-path: polygon(38% 0, 62% 0, 80% 100%, 20% 100%);
}
.switch-wrapper .gap {
  background: #030f23;
  width: 20px;
  height: 20px;
  -webkit-clip-path: polygon(49% 0, 29% 100%, 56% 100%);
  clip-path: polygon(49% 0, 29% 100%, 56% 100%);
  position: absolute;
  bottom: 0;
  left: -22px;
}

@keyframes blink {
  0%, 100% {
    transform: scaleY(0.01);
  }
  5%, 95% {
    transform: scaleY(1);
  }
}
@keyframes swing {
  0%, 100% {
    transform: rotate(0deg) translate(0);
  }
  25% {
    transform: rotate(-2deg) translateX(10px);
  }
  50% {
    transform: rotate(2deg) translateX(-10px);
  }
}