body {
  background: #1E5799;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.camera {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.camera.-x {
  transform: rotateX(-30deg);
}
.camera.-y {
  trannsform: rotateY(0deg);
}
.under-sea {
  transform: scale3d(0.4, 0.4, 0.4);
}

.blowing-bubbles .bubble:nth-child(1) {
  left: 38px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3681ms -9511ms linear infinite;
          animation: bubbles 3681ms -9511ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(2) {
  left: -24px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5030ms -4894ms linear infinite;
          animation: bubbles 5030ms -4894ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(3) {
  left: -26px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5065ms -5783ms linear infinite;
          animation: bubbles 5065ms -5783ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(4) {
  left: -34px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3178ms -3293ms linear infinite;
          animation: bubbles 3178ms -3293ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(5) {
  left: 17px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5575ms -4018ms linear infinite;
          animation: bubbles 5575ms -4018ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(6) {
  left: 38px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4711ms -6193ms linear infinite;
          animation: bubbles 4711ms -6193ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(7) {
  left: -36px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6628ms -7032ms linear infinite;
          animation: bubbles 6628ms -7032ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(8) {
  left: -22px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3089ms -8241ms linear infinite;
          animation: bubbles 3089ms -8241ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(9) {
  left: -8px;
  width: 15px;
  height: 15px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3162ms -6962ms linear infinite;
          animation: bubbles 3162ms -6962ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(10) {
  left: 4px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6072ms -5972ms linear infinite;
          animation: bubbles 6072ms -5972ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(11) {
  left: 21px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3590ms -128ms linear infinite;
          animation: bubbles 3590ms -128ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(12) {
  left: 40px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3146ms -204ms linear infinite;
          animation: bubbles 3146ms -204ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(13) {
  left: 27px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5063ms -3372ms linear infinite;
          animation: bubbles 5063ms -3372ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(14) {
  left: -19px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3740ms -8488ms linear infinite;
          animation: bubbles 3740ms -8488ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(15) {
  left: 14px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5432ms -1006ms linear infinite;
          animation: bubbles 5432ms -1006ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(16) {
  left: -15px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4803ms -1859ms linear infinite;
          animation: bubbles 4803ms -1859ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(17) {
  left: 33px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4703ms -962ms linear infinite;
          animation: bubbles 4703ms -962ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(18) {
  left: -8px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6012ms -6955ms linear infinite;
          animation: bubbles 6012ms -6955ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(19) {
  left: 3px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6097ms -801ms linear infinite;
          animation: bubbles 6097ms -801ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(20) {
  left: 13px;
  width: 15px;
  height: 15px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4424ms -2015ms linear infinite;
          animation: bubbles 4424ms -2015ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(21) {
  left: -9px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6728ms -4004ms linear infinite;
          animation: bubbles 6728ms -4004ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(22) {
  left: 38px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4263ms -1654ms linear infinite;
          animation: bubbles 4263ms -1654ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(23) {
  left: 2px;
  width: 24px;
  height: 24px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4562ms -4603ms linear infinite;
          animation: bubbles 4562ms -4603ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(24) {
  left: 28px;
  width: 13px;
  height: 13px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5244ms -6725ms linear infinite;
          animation: bubbles 5244ms -6725ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(25) {
  left: 39px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6254ms -2796ms linear infinite;
          animation: bubbles 6254ms -2796ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(26) {
  left: 9px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4551ms -192ms linear infinite;
          animation: bubbles 4551ms -192ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(27) {
  left: 24px;
  width: 16px;
  height: 16px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5484ms -4638ms linear infinite;
          animation: bubbles 5484ms -4638ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(28) {
  left: -18px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3375ms -6313ms linear infinite;
          animation: bubbles 3375ms -6313ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(29) {
  left: -13px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3271ms -5256ms linear infinite;
          animation: bubbles 3271ms -5256ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(30) {
  left: 18px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4735ms -729ms linear infinite;
          animation: bubbles 4735ms -729ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(31) {
  left: 25px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5040ms -942ms linear infinite;
          animation: bubbles 5040ms -942ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(32) {
  left: 31px;
  width: 24px;
  height: 24px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6686ms -5892ms linear infinite;
          animation: bubbles 6686ms -5892ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(33) {
  left: -22px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3132ms -4895ms linear infinite;
          animation: bubbles 3132ms -4895ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(34) {
  left: 7px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3721ms -6321ms linear infinite;
          animation: bubbles 3721ms -6321ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(35) {
  left: 34px;
  width: 15px;
  height: 15px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4122ms -7744ms linear infinite;
          animation: bubbles 4122ms -7744ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(36) {
  left: 3px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5930ms -5571ms linear infinite;
          animation: bubbles 5930ms -5571ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(37) {
  left: 9px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4476ms -5669ms linear infinite;
          animation: bubbles 4476ms -5669ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(38) {
  left: -3px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6400ms -8883ms linear infinite;
          animation: bubbles 6400ms -8883ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(39) {
  left: -3px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4974ms -7784ms linear infinite;
          animation: bubbles 4974ms -7784ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(40) {
  left: 13px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4076ms -1707ms linear infinite;
          animation: bubbles 4076ms -1707ms linear infinite;
}

@-webkit-keyframes bubbles {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(-1000px);
  }
}

@keyframes bubbles {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(-1000px);
  }
}
.fish-body .scale {
  position: static;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 100px;
  -webkit-animation: fishColor 1000ms linear infinite alternate;
          animation: fishColor 1000ms linear infinite alternate;
}
.fish-body .scale.-top.-front {
  transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-top.-back {
  transform: scale(-1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-bottom.-front {
  transform: scale(1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-bottom.-back {
  transform: scale(-1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body > .half {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
}
.fish-body > .half.-left {
  transform: translateZ(-1px);
}
.fish-body > .half.-left .scale.-top.-front {
  -webkit-animation-delay: -200ms;
          animation-delay: -200ms;
}
.fish-body > .half.-left .scale.-top.-back {
  -webkit-animation-delay: -400ms;
          animation-delay: -400ms;
}
.fish-body > .half.-left .scale.-bottom.-front {
  -webkit-animation-delay: -600ms;
          animation-delay: -600ms;
}
.fish-body > .half.-left .scale.-bottom.-back {
  -webkit-animation-delay: -800ms;
          animation-delay: -800ms;
}
.fish-body > .half.-right {
  transform: scaleZ(-1) translateZ(-1px);
}
.fish-body > .half.-right .scale.-top.-front {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
.fish-body > .half.-right .scale.-top.-back {
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}
.fish-body > .half.-right .scale.-bottom.-front {
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}
.fish-body > .half.-right .scale.-bottom.-back {
  -webkit-animation-delay: -1600ms;
          animation-delay: -1600ms;
}

.fish-tail {
  top: 10px;
  left: -30px;
  transform-origin: 100% 50%;
  -webkit-animation: fishMotion 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: fishMotion 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.fish-tail > .scale {
  position: static;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 30px;
  -webkit-animation: fishColor 1000ms linear infinite alternate;
          animation: fishColor 1000ms linear infinite alternate;
}
.fish-tail > .scale.-top {
  transform: scale(-1, 1);
}
.fish-tail > .scale.-bottom {
  transform: scale(-1, -1);
  -webkit-animation-delay: -200ms;
          animation-delay: -200ms;
}

.swiming-fishes .rotate {
  width: 400px;
  transform-origin: 0 0;
  -webkit-animation: rotateY 10000ms linear infinite;
          animation: rotateY 10000ms linear infinite;
}
.swiming-fishes .swim:nth-child(1) .rotate {
  width: 497px;
  -webkit-animation-delay: -1768ms;
          animation-delay: -1768ms;
  -webkit-animation-duration: 13347ms;
          animation-duration: 13347ms;
}
.swiming-fishes .swim:nth-child(1) .depth {
  transform: translateY(-120px);
}
.swiming-fishes .swim:nth-child(1) .shadow {
  transform: translate(-50px, 320px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(1) .fish {
  -webkit-animation-delay: -2096ms;
          animation-delay: -2096ms;
}
.swiming-fishes .swim:nth-child(1) .fish-tail {
  -webkit-animation-delay: -1796ms;
          animation-delay: -1796ms;
}
.swiming-fishes .swim:nth-child(2) .rotate {
  width: 657px;
  -webkit-animation-delay: -6401ms;
          animation-delay: -6401ms;
  -webkit-animation-duration: 12677ms;
          animation-duration: 12677ms;
}
.swiming-fishes .swim:nth-child(2) .depth {
  transform: translateY(-275px);
}
.swiming-fishes .swim:nth-child(2) .shadow {
  transform: translate(-50px, 475px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(2) .fish {
  -webkit-animation-delay: -1274ms;
          animation-delay: -1274ms;
}
.swiming-fishes .swim:nth-child(2) .fish-tail {
  -webkit-animation-delay: -974ms;
          animation-delay: -974ms;
}
.swiming-fishes .swim:nth-child(3) .rotate {
  width: 373px;
  -webkit-animation-delay: -956ms;
          animation-delay: -956ms;
  -webkit-animation-duration: 12945ms;
          animation-duration: 12945ms;
}
.swiming-fishes .swim:nth-child(3) .depth {
  transform: translateY(-283px);
}
.swiming-fishes .swim:nth-child(3) .shadow {
  transform: translate(-50px, 483px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(3) .fish {
  -webkit-animation-delay: -1266ms;
          animation-delay: -1266ms;
}
.swiming-fishes .swim:nth-child(3) .fish-tail {
  -webkit-animation-delay: -966ms;
          animation-delay: -966ms;
}
.swiming-fishes .swim:nth-child(4) .rotate {
  width: 665px;
  -webkit-animation-delay: -7066ms;
          animation-delay: -7066ms;
  -webkit-animation-duration: 9833ms;
          animation-duration: 9833ms;
}
.swiming-fishes .swim:nth-child(4) .depth {
  transform: translateY(-88px);
}
.swiming-fishes .swim:nth-child(4) .shadow {
  transform: translate(-50px, 288px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(4) .fish {
  -webkit-animation-delay: -1297ms;
          animation-delay: -1297ms;
}
.swiming-fishes .swim:nth-child(4) .fish-tail {
  -webkit-animation-delay: -997ms;
          animation-delay: -997ms;
}
.swiming-fishes .swim:nth-child(5) .rotate {
  width: 630px;
  -webkit-animation-delay: -4417ms;
          animation-delay: -4417ms;
  -webkit-animation-duration: 12609ms;
          animation-duration: 12609ms;
}
.swiming-fishes .swim:nth-child(5) .depth {
  transform: translateY(-385px);
}
.swiming-fishes .swim:nth-child(5) .shadow {
  transform: translate(-50px, 585px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(5) .fish {
  -webkit-animation-delay: -695ms;
          animation-delay: -695ms;
}
.swiming-fishes .swim:nth-child(5) .fish-tail {
  -webkit-animation-delay: -395ms;
          animation-delay: -395ms;
}
.swiming-fishes .swim:nth-child(6) .rotate {
  width: 462px;
  -webkit-animation-delay: -2061ms;
          animation-delay: -2061ms;
  -webkit-animation-duration: 10941ms;
          animation-duration: 10941ms;
}
.swiming-fishes .swim:nth-child(6) .depth {
  transform: translateY(-632px);
}
.swiming-fishes .swim:nth-child(6) .shadow {
  transform: translate(-50px, 832px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(6) .fish {
  -webkit-animation-delay: -576ms;
          animation-delay: -576ms;
}
.swiming-fishes .swim:nth-child(6) .fish-tail {
  -webkit-animation-delay: -276ms;
          animation-delay: -276ms;
}
.swiming-fishes .swim:nth-child(7) .rotate {
  width: 224px;
  -webkit-animation-delay: -1896ms;
          animation-delay: -1896ms;
  -webkit-animation-duration: 12926ms;
          animation-duration: 12926ms;
}
.swiming-fishes .swim:nth-child(7) .depth {
  transform: translateY(-327px);
}
.swiming-fishes .swim:nth-child(7) .shadow {
  transform: translate(-50px, 527px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(7) .fish {
  -webkit-animation-delay: -1026ms;
          animation-delay: -1026ms;
}
.swiming-fishes .swim:nth-child(7) .fish-tail {
  -webkit-animation-delay: -726ms;
          animation-delay: -726ms;
}
.swiming-fishes .swim:nth-child(8) .rotate {
  width: 338px;
  -webkit-animation-delay: -8020ms;
          animation-delay: -8020ms;
  -webkit-animation-duration: 9105ms;
          animation-duration: 9105ms;
}
.swiming-fishes .swim:nth-child(8) .depth {
  transform: translateY(-114px);
}
.swiming-fishes .swim:nth-child(8) .shadow {
  transform: translate(-50px, 314px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(8) .fish {
  -webkit-animation-delay: -2047ms;
          animation-delay: -2047ms;
}
.swiming-fishes .swim:nth-child(8) .fish-tail {
  -webkit-animation-delay: -1747ms;
          animation-delay: -1747ms;
}
.swiming-fishes .swim:nth-child(9) .rotate {
  width: 684px;
  -webkit-animation-delay: -9860ms;
          animation-delay: -9860ms;
  -webkit-animation-duration: 9574ms;
          animation-duration: 9574ms;
}
.swiming-fishes .swim:nth-child(9) .depth {
  transform: translateY(-291px);
}
.swiming-fishes .swim:nth-child(9) .shadow {
  transform: translate(-50px, 491px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(9) .fish {
  -webkit-animation-delay: -2010ms;
          animation-delay: -2010ms;
}
.swiming-fishes .swim:nth-child(9) .fish-tail {
  -webkit-animation-delay: -1710ms;
          animation-delay: -1710ms;
}
.swiming-fishes .swim:nth-child(10) .rotate {
  width: 761px;
  -webkit-animation-delay: -7060ms;
          animation-delay: -7060ms;
  -webkit-animation-duration: 12543ms;
          animation-duration: 12543ms;
}
.swiming-fishes .swim:nth-child(10) .depth {
  transform: translateY(-119px);
}
.swiming-fishes .swim:nth-child(10) .shadow {
  transform: translate(-50px, 319px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(10) .fish {
  -webkit-animation-delay: -1110ms;
          animation-delay: -1110ms;
}
.swiming-fishes .swim:nth-child(10) .fish-tail {
  -webkit-animation-delay: -810ms;
          animation-delay: -810ms;
}

.fish-component {
  top: -50px;
  right: 0;
  transform: rotateY(90deg) translateX(-100px);
}
.fish-component .fish {
  transform-origin: 100px 50px;
  -webkit-animation: fishMotion 500ms -200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: fishMotion 500ms -200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.fish-component .shadow {
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(25, 44, 84, 0.2) 10%, rgba(14, 71, 145, 0) 50%);
}

@-webkit-keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;
  }
  100% {
    border-color: transparent transparent #1A5AB6 transparent;
  }
}
@keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;
  }
  100% {
    border-color: transparent transparent #1A5AB6 transparent;
  }
}
@-webkit-keyframes fishMotion {
  0% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(-20deg);
  }
}
@keyframes fishMotion {
  0% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(-20deg);
  }
}