body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  
  background-image: url(pexels-lone-jensen-2156311.jpeg);
}


body {
  margin: 0;
  overflow: hidden;
}
#octocat {
  height: 300px;
  width: 200px;
  background: url(https://codinhood.com/static/9a146dac647e7129fa173acc0b0d437f/299c1/octocat.png) left center;
  animation: animateSprite 15s steps(1) infinite, swim 15s ease-in-out infinite;
  position: absolute;
  right: -200px;
  top: 50%;
  margin-top: -150px;
  z-index: 100;
}


@keyframes animateSprite {
  0% {
    background-position: -600px; /* Starting position moving left sprite */
  }
  20% {
    background-position: 0px; /* Straight on sprite */
  }
  25% {
    background-position: -200px; /* Moving up sprite */
  }
  35% {
    background-position: -400px; /* Moving right sprite */
  }
  40% {
    background-position: -400px;
  }
  50% {
    background-position: -200px;  /* Moving up sprite */
  }
  60% {
    background-position: -0px; /* Straight on sprite */
  }
  67% {
    background-position: -600px; /* Moving up sprite */
  }

  100% {
    background-position: -600px;
  }
}

@keyframes swim {
  0% {
    transform: translate(0, 0); /* Starting position */
  }
  20% {
    transform: translate(calc(-50vw - 100px), 0); /* Animate to center of screen */
  }
  25% {
    transform: translate(calc(-50vw - 100px), 0); /* Stay at the center for 1 second */
  }
  35% {
    transform: translate(calc(-50vw - 100px), -20vh); /* Animate up for 2 seconds */
  }
  50% {
    transform: translate(-25vw, 15vh); /* Animate bottom right for 3 seconds */
  }
  60% {
    transform: translate(-25vw, -20vh); /* Animate up at right of the screen */
  }
  67% {
    transform: translate(-25vw, -20vh);
  }

  100% {
    transform: translate(calc(-100vw - 300px), 0); /* Animate past left past the screen */
  }
}
.ocean {
  position: relative;
  width: 100vw;
  height: 100vh;
  
}

.bubble {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  position: absolute;
  background-color: white;
  bottom: -30px;
  opacity: 0.2;
  animation: bubble 15s ease-in-out infinite,
    sideWays 7s ease-in-out infinite alternate;
}

@keyframes bubble {
  0% {
    transform: translateY(0%);
    opacity: 0.06;
  }
  100% {
    transform: translateY(-120vh);
  }
}

@keyframes sideWays {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 200px;
  }
}

.bubble--1 {
  left: 10%;
  animation-delay: 0.5s;
  animation-duration: 16s;
  opacity: 0.2;
}

.bubble--2 {
  width: 15px;
  height: 15px;
  left: 40%;
  animation-delay: 1s;
  animation-duration: 10s;
  opacity: 0.1;
}

.bubble--3 {
  width: 10px;
  height: 10px;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubble--4 {
  width: 25px;
  height: 25px;
  left: 40%;
  animation-delay: 8s;
  animation-duration: 17s;
  opacity: 0.2;
}

.bubble--5 {
  width: 30px;
  height: 30px;
  left: 60%;
  animation-delay: 10s;
  animation-duration: 15s;
  opacity: 0.1;
}

.bubble--6 {
  width: 10px;
  height: 10px;
  left: 80%;
  animation-delay: 3s;
  animation-duration: 30s;
  opacity: 0.4;
}

.bubble--7 {
  width: 15px;
  height: 15px;
  left: 90%;
  animation-delay: -7s;
  animation-duration: 25s;
  opacity: 0.3;
}

.bubble--9 {
  width: 20px;
  height: 20px;
  left: 50%;
  bottom: 30px;
  animation-delay: -5s;
  animation-duration: 19s;
  opacity: 0.2;
}

.bubble--10 {
  width: 40px;
  height: 40px;
  left: 30%;
  bottom: 30px;
  animation-delay: -21s;
  animation-duration: 16s;
  opacity: 0.3;
}

.bubble--11 {
  width: 30px;
  height: 30px;
  left: 60%;
  bottom: 30px;
  animation-delay: -13.75s;
  animation-duration: 20s;
  opacity: 0.3;
}

.bubble--11 {
  width: 25px;
  height: 25px;
  left: 90%;
  bottom: 30px;
  animation-delay: -10.5s;
  animation-duration: 19s;
  opacity: 0.3;
}





/* Bubbles */
.bubbles {
  position: absolute;
  bottom: 0;
  z-index: 5;
  margin-right: 50px;
  background-color: white;
  border-radius: 50%;
  opacity: .50;
  width: 40px;
  height: 40px;
  animation: up 4s infinite;
}

.bubble-2 {
  left: 350px;
  animation: up 4s infinite;
}

.bubble-3 {
  left: 750px;
  opacity: .30;
  animation: up 10s infinite;
}

.bubble-4 {
  left: 1150px;
  animation: up 12s infinite;
}

.bubble-5 {
  left: 50px;
  animation: up 10s infinite;
}

.bubble-6 {
  left: 300px;
  opacity: .30;
  animation: up 7s infinite;
}

.bubble-7 {
  left: 670px;
  animation: up 7s infinite;
}

.bubble-8 {
  left: 1050px;
  opacity: .30;
  animation: up 5s infinite;
}

body {
  background-color: #42a1c6;
}

/* Franklin's Container */
.fish {
  width: 150px;
  height: 100px;
  animation: move 3s infinite; 
}

/* Franklin */
.fish-body {
  position: relative;
  margin-top: 30px;
  margin-left: 40px;
  background-color: orange;
  border-radius: 50%;
  width: 150px; 
  height: 100px;
}

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

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

.fin {
  margin-top: -100px; 
  background-color: orange;
  border-radius: 50%;
  transform: rotate(40deg);
  width: 80px;
  height: 50px;
}

.fin-bottom {
  margin-top: -10px;
  transform: rotate(-40deg);
}

/* Bubbles */
.bubbles {
  position: absolute;
  bottom: 0;
  z-index: 5;
  margin-right: 50px;
  background-color: white;
  border-radius: 50%;
  opacity: .50;
  width: 40px;
  height: 40px;
  animation: up 6s infinite;
}

.bubble-2 {
  left: 350px;
  animation: up 7s infinite;
}

.bubble-3 {
  left: 750px;
  opacity: .30;
  animation: up 10s infinite;
}

.bubble-4 {
  left: 1150px;
  animation: up 12s infinite;
}

.bubble-5 {
  left: 50px;
  animation: up 10s infinite;
}

.bubble-6 {
  left: 300px;
  opacity: .30;
  animation: up 7s infinite;
}

.bubble-7 {
  left: 670px;
  animation: up 8s infinite;
}

.bubble-8 {
  left: 1050px;
  opacity: .30;
  animation: up 3s infinite;
}



/* Bubbles Animation */
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@keyframes up {
  100% {
    transform: translateY(-900px);
  }
}