/* Fish Container */
.fish {
z-index: 5;
  width: 50px;
  height: 20px;
  animation: swim 10s infinite ease-in-out; 
}

/* Fish */
.fish-body {
z-index: 5;
  position: relative;
  margin-top: -15px;
  margin-left: 0px;
  background-color: silver;
  border-radius: 50%;
  width: 50px; 
  height: 20px;
}

.eye {
  position: absolute;
  margin-left: 35px;
  margin-top: 5px;
  z-index: 6;
  background-color: white;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.pupil {
  position: absolute;
  z-index: 7;
  margin-left: 4px;
  margin-top: 4px;
  background-color: black;
  border-radius: 50%;
  height: 2px;
  width: 2px;
}

.fin {
  margin-top: -25px; 
  background-color: blue;
  border-radius: 50%;
  transform: rotate(-40deg);
  width: 10px;
  height: 20px;
}

.fin-bottom {
  margin-top: -5px;
  transform: rotate(20deg);
}
/* Swim Animation */
@keyframes swim {
  0% {
    transform: translateY(-50px) translateX(0) rotate(30deg);
  }
  25% { 
    transform: translateY(100px) translateX(300px) rotate(20deg);
  }
  50% {
    transform: translateY(200px) translateX(600px);
  }
  75% {
    transform: translateY(100px) translateX(900px) rotate(-20deg);
  }
  100% {
    transform: translateY(-170px) translateX(1900px) rotate(-40deg);
  }
}
/* ANIMATION */

.fish-body {
    animation: fish-body 1s infinite;
    -webkit-animation: fish-body 1s infinite;
    transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

@-webkit-keyframes fish-body {
  0%, 100%   { -webkit-transform: rotate(5deg); }
  50% { -webkit-transform: rotate(-5deg); }
}