html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 600px) {
  body, html {
    overflow-x: hidden;
  }
}


.animation-wrapper {
  position: absolute;
  top: 8em;
  width: 100%;
  overflow: visible;
}

/* @keyframes swim {
  0% { margin-left: -235px; }
  70% { margin-left: 100%; }
  100% { margin-left: 100%; }
} */

@keyframes swim {
  0% { left: -100px; }   /* Start offscreen on the left */
  70% { left: calc(100vw + 200px); }  /* Move to the right edge */
  100% { left: calc(100vw + 200px); } /* Stay at the right edge */
}




@keyframes hop {
  0%, 100% {
      transform: translateY(0) scaleX(-1); /* Start and end on the ground */
  }
  20% {
      transform: translateY(-30px) scaleX(-1); /* Move up slightly */
  }
  40% {
      transform: translateY(-60px) scaleX(-1); /* Peak of the jump */
  }
  60% {
      transform: translateY(-30px) scaleX(-1); /* Descending */
  }
  80% {
      transform: translateY(0) scaleX(-1); /* Back on the ground */
  }
}

.animal {
  width: 200px;
  height: 70px;
  margin-left: -250px;
  overflow: visible;
  position: absolute;	
  animation: swim 20s linear infinite, hop 1.5s ease-in-out infinite;
}

.animal2 {
  width: 200px;
  height: 70px;
  margin-left: -250px;
  overflow: visible;
  position: absolute;	
  animation: swim 20s linear infinite, hop 1.5s ease-in-out infinite;
  animation-delay: 0.75s;
}