.medusa {
  animation-duration: 4s;
  animation-name: medusa;
  animation-iteration-count: infinite;
  left: 21.3%;
  width: 43%;
  max-width: 688.17px;
  position: absolute;
}

@keyframes medusa {
  from {
    opacity: 0;
    transofrm: rotate(deg);
  }

  20% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

.hagi-vagi {
  animation-duration: 4s;
  animation-name: hagi-vagi;
  animation-iteration-count: infinite;
  width: 53%;
  max-width: 857px;
  left: 34.7%;
  top: 3%;
}

@keyframes hagi-vagi {
  from {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

.teenager {
  animation-duration: 4s;
  animation-name: teenager;
  animation-iteration-count: infinite;
  width: 57%;
  max-width: 919px;
  left: 2%;
  top: -6.5%;
}

@keyframes teenager {
  from {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}
.leopard {
  animation-duration: 4s;
  animation-name: leopard;
  animation-iteration-count: infinite;
  max-width: 1221px;
  width: 75%;
  left: 29%;
}

@keyframes leopard {
  from {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  95% {
    opacity: 1;
  }

  5% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

.span__medusa {
  animation-duration: 4s;
  animation-name: span__medusa;
  animation-iteration-count: infinite;
}

@keyframes span__medusa {
  from {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

.span__hagi-vagi {
  animation-duration: 4s;
  animation-name: span__hagi-vagi;
  animation-iteration-count: infinite;
}

@keyframes span__hagi-vagi {
  from {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  65% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}