.fish-1-1 {
  animation: fish-1-1 4s ease-in-out infinite alternate;
}

.fish-1-2 {
  animation: fish-1-2 3.6s ease-in-out infinite alternate;
}

.fish-1-3 {
  animation: fish-1-3 3s ease-in-out infinite alternate;
}

.fish-1-4 {
  animation: fish-1-4 3.3s ease-in-out infinite alternate;
}

.fish-1-5 {
  animation: fish-1-5 6s ease-in-out infinite alternate;
}

.fish-2 {
  animation: fish-2 6s ease-in-out infinite alternate;
}

.fish-3 {
    animation: fish-3 5s ease-in-out infinite alternate;
}

.whale {
    animation: whale-shark 5s ease-in-out infinite alternate;
}

.coral-1 {
  animation: coral-1 14s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

.coral-2 {
  animation: coral-2 20s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes fish-1-1 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes fish-1-2 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 4px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes fish-1-3 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes fish-1-4 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes fish-1-5 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes fish-2 {
    0% {
      transform: translate(0px, 0px);
    }
    33% {
      transform: translate(0px, 0px);
    }
    66% {
      transform: translate(0px, -12px);
    }
    100% {
      transform: translate(0px, 0px);
    }
}


@keyframes fish-3 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes whale-shark {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-3deg);
    }
    80% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-1deg);
    }
}

@keyframes coral-1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


@keyframes coral-2 {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-5deg);
  }
  66% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}