html, body {
  height: 100%;
}

#creatureContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.creature {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30px;
  width: 40px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 30%;
  border-bottom-left-radius: 30%;
  will-change: transform, opacity;
  z-index: -1;
}

.creature:nth-child(1) {
  background: radial-gradient(circle at top center, hsl(274, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(274, 50%, 80%));
  box-shadow: 0 0 10px hsl(274, 50%, 80%);
  animation: swim1 97s infinite linear alternate;
}
.creature:nth-child(1) .seg {
  background: hsl(274, 50%, 80%);
  box-shadow: 0 0 5px hsl(274, 50%, 80%);
}
.creature:nth-child(1) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-19.5deg);
}
.creature:nth-child(1) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-6.5deg);
}
.creature:nth-child(1) .leg:nth-child(3) {
  transform: translateX(2px) rotate(6.5deg);
}
.creature:nth-child(1) .leg:nth-child(4) {
  transform: translateX(6px) rotate(19.5deg);
}
.creature:nth-child(1) .leg:nth-child(5) {
  transform: translateX(10px) rotate(32.5deg);
}

@keyframes swim1 {
  0% {
    transform: rotate(-23.0784430822deg) translate3d(276.7814988979px, -176.493777261px, -15px) scale(1);
  }
  50% {
    transform: rotate(8.7665953566deg) translate3d(-100.0172215318px, 146.0418465944px, -9px) scale(1);
  }
  100% {
    transform: rotate(-3.442011deg) translate3d(125.0676475103px, 14.1116484838px, -63px) scale(1);
  }
}
.creature:nth-child(2) {
  background: radial-gradient(circle at top center, hsl(217, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(217, 50%, 80%));
  box-shadow: 0 0 10px hsl(217, 50%, 80%);
  animation: swim2 87s infinite linear alternate;
}
.creature:nth-child(2) .seg {
  background: hsl(217, 50%, 80%);
  box-shadow: 0 0 5px hsl(217, 50%, 80%);
}
.creature:nth-child(2) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-18deg);
}
.creature:nth-child(2) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-6deg);
}
.creature:nth-child(2) .leg:nth-child(3) {
  transform: translateX(2px) rotate(6deg);
}
.creature:nth-child(2) .leg:nth-child(4) {
  transform: translateX(6px) rotate(18deg);
}
.creature:nth-child(2) .leg:nth-child(5) {
  transform: translateX(10px) rotate(30deg);
}

@keyframes swim2 {
  0% {
    transform: rotate(18.6844164808deg) translate3d(-34.4060342016px, -164.4479191262px, -159px) scale(1);
  }
  50% {
    transform: rotate(0.0095549369deg) translate3d(-12.9285869013px, -108.6908615511px, -8px) scale(1);
  }
  100% {
    transform: rotate(-3.5749086442deg) translate3d(23.8124808786px, 166.8457050479px, -96px) scale(1);
  }
}
.creature:nth-child(3) {
  background: radial-gradient(circle at top center, hsl(176, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(176, 50%, 80%));
  box-shadow: 0 0 10px hsl(176, 50%, 80%);
  animation: swim3 60s infinite linear alternate;
}
.creature:nth-child(3) .seg {
  background: hsl(176, 50%, 80%);
  box-shadow: 0 0 5px hsl(176, 50%, 80%);
}
.creature:nth-child(3) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-30deg);
}
.creature:nth-child(3) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-10deg);
}
.creature:nth-child(3) .leg:nth-child(3) {
  transform: translateX(2px) rotate(10deg);
}
.creature:nth-child(3) .leg:nth-child(4) {
  transform: translateX(6px) rotate(30deg);
}
.creature:nth-child(3) .leg:nth-child(5) {
  transform: translateX(10px) rotate(50deg);
}

@keyframes swim3 {
  0% {
    transform: rotate(18.1252122958deg) translate3d(-127.4674077523px, -314.5892353145px, -41px) scale(1);
  }
  50% {
    transform: rotate(46.5554592966deg) translate3d(157.8125625504px, -378.8151923397px, -5px) scale(1);
  }
  100% {
    transform: rotate(19.9579897755deg) translate3d(436.6901868178px, -151.6622274665px, -61px) scale(1);
  }
}
.creature:nth-child(4) {
  background: radial-gradient(circle at top center, hsl(167, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(167, 50%, 80%));
  box-shadow: 0 0 10px hsl(167, 50%, 80%);
  animation: swim4 99s infinite linear alternate;
}
.creature:nth-child(4) .seg {
  background: hsl(167, 50%, 80%);
  box-shadow: 0 0 5px hsl(167, 50%, 80%);
}
.creature:nth-child(4) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-27deg);
}
.creature:nth-child(4) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-9deg);
}
.creature:nth-child(4) .leg:nth-child(3) {
  transform: translateX(2px) rotate(9deg);
}
.creature:nth-child(4) .leg:nth-child(4) {
  transform: translateX(6px) rotate(27deg);
}
.creature:nth-child(4) .leg:nth-child(5) {
  transform: translateX(10px) rotate(45deg);
}

@keyframes swim4 {
  0% {
    transform: rotate(-18.1382963842deg) translate3d(-359.6233064787px, 262.8114032459px, -59px) scale(1);
  }
  50% {
    transform: rotate(0.2720875087deg) translate3d(-49.4064469588px, 35.6704120529px, -4px) scale(1);
  }
  100% {
    transform: rotate(-19.7022059982deg) translate3d(-102.4580726147px, 81.2042272745px, -82px) scale(1);
  }
}
.creature:nth-child(5) {
  background: radial-gradient(circle at top center, hsl(169, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(169, 50%, 80%));
  box-shadow: 0 0 10px hsl(169, 50%, 80%);
  animation: swim5 91s infinite linear alternate;
}
.creature:nth-child(5) .seg {
  background: hsl(169, 50%, 80%);
  box-shadow: 0 0 5px hsl(169, 50%, 80%);
}
.creature:nth-child(5) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-24deg);
}
.creature:nth-child(5) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-8deg);
}
.creature:nth-child(5) .leg:nth-child(3) {
  transform: translateX(2px) rotate(8deg);
}
.creature:nth-child(5) .leg:nth-child(4) {
  transform: translateX(6px) rotate(24deg);
}
.creature:nth-child(5) .leg:nth-child(5) {
  transform: translateX(10px) rotate(40deg);
}

@keyframes swim5 {
  0% {
    transform: rotate(-1.3433750035deg) translate3d(-148.1965485844px, -214.5945459107px, -90px) scale(1);
  }
  50% {
    transform: rotate(-11.8796218107deg) translate3d(-48.7660618806px, 50.974525959px, -8px) scale(1);
  }
  100% {
    transform: rotate(37.7415937224deg) translate3d(-31.8886349285px, -212.581066947px, -34px) scale(1);
  }
}
.creature:nth-child(6) {
  background: radial-gradient(circle at top center, hsl(115, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(115, 50%, 80%));
  box-shadow: 0 0 10px hsl(115, 50%, 80%);
  animation: swim6 90s infinite linear alternate;
}
.creature:nth-child(6) .seg {
  background: hsl(115, 50%, 80%);
  box-shadow: 0 0 5px hsl(115, 50%, 80%);
}
.creature:nth-child(6) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-19.5deg);
}
.creature:nth-child(6) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-6.5deg);
}
.creature:nth-child(6) .leg:nth-child(3) {
  transform: translateX(2px) rotate(6.5deg);
}
.creature:nth-child(6) .leg:nth-child(4) {
  transform: translateX(6px) rotate(19.5deg);
}
.creature:nth-child(6) .leg:nth-child(5) {
  transform: translateX(10px) rotate(32.5deg);
}

@keyframes swim6 {
  0% {
    transform: rotate(-37.5501966137deg) translate3d(263.5811530863px, -25.5277562292px, -126px) scale(1);
  }
  50% {
    transform: rotate(18.4843467497deg) translate3d(157.569910193px, 4.3033170768px, -9px) scale(1);
  }
  100% {
    transform: rotate(-15.3125490236deg) translate3d(58.6537431029px, 108.5119883607px, -58px) scale(1);
  }
}
.creature:nth-child(7) {
  background: radial-gradient(circle at top center, hsl(134, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(134, 50%, 80%));
  box-shadow: 0 0 10px hsl(134, 50%, 80%);
  animation: swim7 62s infinite linear alternate;
}
.creature:nth-child(7) .seg {
  background: hsl(134, 50%, 80%);
  box-shadow: 0 0 5px hsl(134, 50%, 80%);
}
.creature:nth-child(7) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-30deg);
}
.creature:nth-child(7) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-10deg);
}
.creature:nth-child(7) .leg:nth-child(3) {
  transform: translateX(2px) rotate(10deg);
}
.creature:nth-child(7) .leg:nth-child(4) {
  transform: translateX(6px) rotate(30deg);
}
.creature:nth-child(7) .leg:nth-child(5) {
  transform: translateX(10px) rotate(50deg);
}

@keyframes swim7 {
  0% {
    transform: rotate(-19.4162366765deg) translate3d(45.2156033069px, -122.1106975091px, -82px) scale(1);
  }
  50% {
    transform: rotate(9.2777771399deg) translate3d(60.8118470125px, 24.2266607644px, -1px) scale(1);
  }
  100% {
    transform: rotate(32.1987650808deg) translate3d(-519.313568017px, -417.0830932651px, -12px) scale(1);
  }
}
.creature:nth-child(8) {
  background: radial-gradient(circle at top center, hsl(248, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(248, 50%, 80%));
  box-shadow: 0 0 10px hsl(248, 50%, 80%);
  animation: swim8 80s infinite linear alternate;
}
.creature:nth-child(8) .seg {
  background: hsl(248, 50%, 80%);
  box-shadow: 0 0 5px hsl(248, 50%, 80%);
}
.creature:nth-child(8) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-30deg);
}
.creature:nth-child(8) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-10deg);
}
.creature:nth-child(8) .leg:nth-child(3) {
  transform: translateX(2px) rotate(10deg);
}
.creature:nth-child(8) .leg:nth-child(4) {
  transform: translateX(6px) rotate(30deg);
}
.creature:nth-child(8) .leg:nth-child(5) {
  transform: translateX(10px) rotate(50deg);
}

@keyframes swim8 {
  0% {
    transform: rotate(-6.9091666302deg) translate3d(-39.4986497078px, 144.1918569529px, -116px) scale(1);
  }
  50% {
    transform: rotate(-8.4069212822deg) translate3d(-284.7405168695px, 49.9621903908px, -4px) scale(1);
  }
  100% {
    transform: rotate(-14.0992781708deg) translate3d(78.9914960936px, -12.5818071927px, -46px) scale(1);
  }
}
.creature:nth-child(9) {
  background: radial-gradient(circle at top center, hsl(149, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(149, 50%, 80%));
  box-shadow: 0 0 10px hsl(149, 50%, 80%);
  animation: swim9 91s infinite linear alternate;
}
.creature:nth-child(9) .seg {
  background: hsl(149, 50%, 80%);
  box-shadow: 0 0 5px hsl(149, 50%, 80%);
}
.creature:nth-child(9) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-18deg);
}
.creature:nth-child(9) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-6deg);
}
.creature:nth-child(9) .leg:nth-child(3) {
  transform: translateX(2px) rotate(6deg);
}
.creature:nth-child(9) .leg:nth-child(4) {
  transform: translateX(6px) rotate(18deg);
}
.creature:nth-child(9) .leg:nth-child(5) {
  transform: translateX(10px) rotate(30deg);
}

@keyframes swim9 {
  0% {
    transform: rotate(13.9005051884deg) translate3d(141.4253363097px, -13.2539570618px, -196px) scale(1);
  }
  50% {
    transform: rotate(6.1764489395deg) translate3d(173.865879585px, -105.8750851397px, -5px) scale(1);
  }
  100% {
    transform: rotate(-9.7953423769deg) translate3d(-62.5665876491px, 302.812349859px, -39px) scale(1);
  }
}
.creature:nth-child(10) {
  background: radial-gradient(circle at top center, hsl(237, 50%, 80%), rgba(255, 255, 255, 0.7), hsl(237, 50%, 80%));
  box-shadow: 0 0 10px hsl(237, 50%, 80%);
  animation: swim10 65s infinite linear alternate;
}
.creature:nth-child(10) .seg {
  background: hsl(237, 50%, 80%);
  box-shadow: 0 0 5px hsl(237, 50%, 80%);
}
.creature:nth-child(10) .leg:nth-child(1) {
  transform: translateX(-6px) rotate(-24deg);
}
.creature:nth-child(10) .leg:nth-child(2) {
  transform: translateX(-2px) rotate(-8deg);
}
.creature:nth-child(10) .leg:nth-child(3) {
  transform: translateX(2px) rotate(8deg);
}
.creature:nth-child(10) .leg:nth-child(4) {
  transform: translateX(6px) rotate(24deg);
}
.creature:nth-child(10) .leg:nth-child(5) {
  transform: translateX(10px) rotate(40deg);
}

@keyframes swim10 {
  0% {
    transform: rotate(4.5600805823deg) translate3d(371.9997017143px, -200.1937363277px, -17px) scale(1);
  }
  50% {
    transform: rotate(-28.7651804509deg) translate3d(-43.8546913027px, 6.7495604922px, -1px) scale(1);
  }
  100% {
    transform: rotate(-24.3942905487deg) translate3d(42.2307038714px, -246.2269764603px, -50px) scale(1);
  }
}
.leg {
  position: absolute;
  transform-origin: top;
  top: 20px;
  left: 20px;
  opacity: 0.8;
  -webkit-filter: blur(0.1px);
  filter: blur(0.1px);
  will-change: transform;
}

.seg {
  height: 2px;
  width: 2px;
  transform-origin: bottom;
  animation: sway 3s infinite ease-in-out alternate;
  will-change: transform;
}

@keyframes sway {
  0% {
    transform: rotate(-20deg) translateX(-5px);
  }
  50% {
    transform: rotate(20deg) translateX(5px);
  }
  100% {
    transform: rotate(-20deg) translateX(-5px);
  }
}
.seg:nth-child(1) {
  animation-delay: -0.1s;
}

.seg:nth-child(2) {
  animation-delay: -0.2s;
}

.seg:nth-child(3) {
  animation-delay: -0.3s;
}

.seg:nth-child(4) {
  animation-delay: -0.4s;
}

.seg:nth-child(5) {
  animation-delay: -0.5s;
}

.seg:nth-child(6) {
  animation-delay: -0.6s;
}

.seg:nth-child(7) {
  animation-delay: -0.7s;
}

.seg:nth-child(8) {
  animation-delay: -0.8s;
}

.seg:nth-child(9) {
  animation-delay: -0.9s;
}

.seg:nth-child(10) {
  animation-delay: -1s;
}

.seg:nth-child(11) {
  animation-delay: -1.1s;
}

.seg:nth-child(12) {
  animation-delay: -1.2s;
}

.seg:nth-child(13) {
  animation-delay: -1.3s;
}

.seg:nth-child(14) {
  animation-delay: -1.4s;
}

.seg:nth-child(15) {
  animation-delay: -1.5s;
}

.seg:nth-child(16) {
  animation-delay: -1.6s;
}

.seg:nth-child(17) {
  animation-delay: -1.7s;
}

.seg:nth-child(18) {
  animation-delay: -1.8s;
}

.seg:nth-child(19) {
  animation-delay: -1.9s;
}

.seg:nth-child(20) {
  animation-delay: -2s;
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-event: none;
  z-index: -2;
  transform: translateZ(0);
}
.grain:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 9999;
  position: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
  opacity: 0.12;
  pointer-events: none;
  -webkit-animation: noise 1s steps(2) infinite;
  animation: noise 1s steps(2) infinite;
}
@-webkit-keyframes noise {
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}
@keyframes noise {
  0% {
    transform: translate3d(0, 9rem, 0);
  }
  10% {
    transform: translate3d(-1rem, -4rem, 0);
  }
  20% {
    transform: translate3d(-8rem, 2rem, 0);
  }
  30% {
    transform: translate3d(9rem, -9rem, 0);
  }
  40% {
    transform: translate3d(-2rem, 7rem, 0);
  }
  50% {
    transform: translate3d(-9rem, -4rem, 0);
  }
  60% {
    transform: translate3d(2rem, 6rem, 0);
  }
  70% {
    transform: translate3d(7rem, -8rem, 0);
  }
  80% {
    transform: translate3d(-9rem, 1rem, 0);
  }
  90% {
    transform: translate3d(6rem, -5rem, 0);
  }
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}

.submarine {
  background-color: #dd0e49;
  height: 80px;
  width: 200px;
  border-radius: 80px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  animation: horizontalMove 10s infinite alternate, verticalMove 6s infinite alternate ease-in-out;
  position: relative;
  will-change: transform;
}

@keyframes verticalMove {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.submarine:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 80px;
  background-color: #ee689e;
  border-radius: 5px;
  top: 7px;
  left: 28px;
}

.submarine:after {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  border: 5px solid transparent;
  border-right: 5px solid #ee689e;
  border-radius: 50%;
  transform: rotate(45deg);
  bottom: 10px;
  right: 14px;
}

.top {
  height: 0;
  width: 65px;
  border-bottom: 25px solid #dd0e49;
  border-right: 18px solid transparent;
  position: relative;
  bottom: 25px;
  left: 50px;
}

.top:before {
  position: absolute;
  content: "";
  height: 0;
  width: 81px;
  border-bottom: 3px solid #a30036;
  border-right: 2px solid transparent;
  top: 22px;
}

.top:after {
  position: absolute;
  content: "";
  height: 3px;
  width: 30px;
  background-color: #ee689e;
  border-radius: 30px;
  right: 5px;
  top: 5px;
}

.pipe {
  height: 17px;
  width: 10px;
  border-right: 5px solid #dd0e49;
  border-top: 5px solid #dd0e49;
  border-radius: 0 5px 0 0;
  position: relative;
  bottom: 22px;
  left: 4px;
}

.pipe:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 5px;
  background-color: #a30036;
  top: 15px;
  left: 10px;
}

.pipe:after {
  position: absolute;
  content: "";
  height: 8px;
  width: 4px;
  background-color: #f8d02e;
  bottom: 16px;
}

.light {
  height: 5px;
  width: 0;
  border-left: 115px solid #ffffff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  position: relative;
  right: 115px;
  bottom: 28px;
  opacity: 0.15;
}

.window {
  height: 20px;
  width: 20px;
  background-color: #2adab7;
  border: 4px solid #a30036;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
}

.window-1 {
  left: 20px;
}

.window-2 {
  left: 65px;
}

.shine {
  height: 35px;
  width: 4px;
  background-color: #ffffff;
  transform: rotate(135deg);
  position: relative;
  top: 2px;
  right: 2px;
  animation: shine-move 2s infinite;
}

@keyframes shine-move {
  100% {
    transform: rotate(135deg) translate(-30px);
  }
}
.shadow {
  height: 7px;
  width: 60px;
  background-color: #a30036;
  border-radius: 60px;
  position: relative;
  top: 9px;
  left: 100px;
}

.propeller {
  perspective: 1200px;
}

.back {
  height: 20px;
  width: 5px;
  background-color: #a30036;
  position: relative;
  left: 198px;
}

.wing {
  background-color: #f8d02e;
  height: 30px;
  width: 17px;
  transform-style: preserve-3d;
  position: relative;
  bottom: 25px;
  left: 202px;
  animation: spin 0.5s infinite linear;
}

@keyframes spin {
  100% {
    transform: rotateX(180deg);
  }
}
.bubble-submarine {
  background-color: #ffffff;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  bottom: 35px;
  opacity: 0.3;
  will-change: transform;
}

.bubble-1 {
  animation: bubble-move-1 3s 2s infinite;
}

@keyframes bubble-move-1 {
  100% {
    transform: translate(50px, -20px);
    opacity: 0;
  }
}
.bubble-2 {
  animation: bubble-move-2 3s 0.5s infinite;
}

@keyframes bubble-move-2 {
  100% {
    transform: translate(30px, -20px);
    opacity: 0;
  }
}
.bubble-3 {
  animation: bubble-move-3 4s 1s infinite;
}

@keyframes bubble-move-3 {
  100% {
    transform: translateX(50px);
    opacity: 0;
  }
}

/*# sourceMappingURL=animation.css.map */