.aquarium-holder {
  position: relative;
  width: 100%;
  height: auto;
}

.fish {
  content: "";
  position: absolute;
  &::before, &::after {
    content: "";
    position: absolute;
  }
  * {
    content: "";
    position: absolute;
    &::before, &::after {
      content: "";
      position: absolute;
    }
  }
}

.aquarium-holder * {
  content: "";
  position: absolute;
  &::before, &::after {
    content: "";
    position: absolute;
  }
}

@keyframes moveWater {
  0%, 100% {
    transform: translateX(-50%) rotate(0.6deg);
  }

  50% {
    transform: translateX(-50%) rotate(-0.6deg);
  }
}


.fish {
  width: 120px;
  height: 70px;
  background: #f4af23;
  left: 50%;
  background: #f4af23;
  background: linear-gradient(#f4af23, #fff658);
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  border-right: 2px solid rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  border-radius: 50% 60% 0 50%;
  animation: fishVertical 1.4s ease-in-out infinite, fishHorizontal 5s ease-in-out infinite;
  &::before, &::after {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid black;
    background: radial-gradient(circle at center, black 30%, white 30%);
  }
  &::before {
    z-index: -1;
    left: -4px;
    top: 0px;
  }
  &::after {
    left: 6px;
    top: -5px;
  }
}

@keyframes fishVertical {
  0%, 100% {
    top: 51%;
  }

  50% {
    top: 49%;
  }
}


@keyframes fishHorizontal {
  0%, 100% {
    left: 50%;
  }

  20% {
    left: 30%;
  }
}


.fin {
  width: 50px;
  height: 30px;
  background: #f4af23;
  background: linear-gradient(#f4af23 20%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 25%, #f4c623 25%) (left / 20%) 20%;
  border-radius: 0 90% 50% 0;
  z-index: -1;
  border-right: 3px solid #444;
  border-top: 1px solid #444;
  transform: rotate(-40deg);
  left: 50px;
  top: -16px;
  animation: finTop .8s linear infinite;
  &::before, &::after {
    width: 42px;
    height: 24px;
    border-radius: 50%;
    border-right: 2px solid #444;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    transform-origin: 0 50%;
    background: #f4af23;
    background: linear-gradient(#f4af23 20%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 25%, #f4c623 25%) (left / 20%) 20%;
  }
  &::before {
    transform: rotate(55deg);
    top: 68px;
    left: 10px;
    animation: tail2 .3s infinite;
  }
  &::after {
    transform: rotate(120deg);
    top: 75px;
    left: 15px;
    animation: tail .3s infinite;
  }
}

@keyframes tail {
  0%, 100% {
    transform: skewY(5deg) rotate(120deg);
  }

  50% {
    transform: skewY(-5deg) rotate(120deg);
  }
}


@keyframes tail2 {
  0%, 100% {
    transform: rotate(55deg) skewX(20deg);
  }

  50% {
    transform: rotate(55deg) skewX(-20deg);
  }
}


@keyframes finTop {
  0%, 100% {
    transform: rotate(-40deg) skewY(5deg);
  }

  50% {
    transform: rotate(-40deg) skewY(-5deg);
  }
}


.face-fin {
  width: 40px;
  height: 23px;
  border-radius: 50% 0 0 50%;
  border-left: 4px solid #e20000;
  border-bottom: 1px solid transparent;
  left: -10px;
  top: 24px;
  transform: rotate(-100deg);
  &::before {
    width: 30px;
    height: 24px;
    border-radius: 20% 50% 50% 20%;
    border-right: 3px solid rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(0, 0, 0, 0.3);
    background: #f4af23;
    background: linear-gradient(#f4af23 20%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 25%, #f4c623 25%) (left / 20%) 20%;
    transform-origin: 0 50%;
    transform: rotate(140deg);
    right: 12px;
    top: 42px;
    z-index: 1;
    animation: fin .15s linear infinite;
  }
  &::after {
    width: 20px;
    height: 11px;
    border-radius: 0 0 50% 50%;
    background: #f4af23;
    background: linear-gradient(#f4af23 20%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 25%, #f4c623 25%) (left / 30%) 30%;
    right: 54px;
    top: 40px;
    transform: rotate(96deg);
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 2px solid rgba(0, 0, 0, 0.5);
  }
}

@keyframes fin {
  0%, 100% {
    transform: rotate(142deg) skewY(5deg);
  }

  50% {
    transform: rotate(138deg) skewY(-5deg);
  }
}


.bubble {
  z-index: 9;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  /*   background: linear-gradient(rgba(0, 0, 0, .1), rgba(225, 188, 255, .1)); */
  background: rgba(0, 103, 214, 0.2);
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.7);
  top: 63%;
  left: 32%;
  opacity: 0;
  /*   transform: scale(8) translateY(-22px); */
  animation: bubble 5s 1s linear infinite;
  &::before {
    width: 20%;
    height: 25%;
    border-radius: 50%;
    top: 25%;
    left: 15%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, 1);
  }
}

.bbl-2 {
  left: 33%;
  animation: bubble 5s 1.5s linear infinite;
}

.bbl-3 {
  left: 43%;
  animation: bubble 5s 3s linear infinite;
}

@keyframes bubble {
  0%, 5% {
    opacity: 1;
  }

  12.5% {
    transform-origin: 0% 50%;
    transform: scale(2) translateY(-10px);
  }

  25% {
    transform-origin: 100% 50%;
    transform: scale(3) translateY(-20px);
  }

  37.5% {
    transform-origin: 0% 50%;
    transform: scale(4) translateY(-26px);
  }

  49% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(5) translateY(-32px);
  }

  50%, 100% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(8) translateY(-22px);
  }
}