.main {
  position: absolute;
  
  z-index: -1;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: white;
  background: linear-gradient(14deg, #00327b 0%, rgb(5 14 47) 20%, #00255c 43%, rgb(2 88 165) 66%, rgb(0 41 98) 70%, rgb(3 58 118) 90%, #050e2f 99%);
}

.main {
  overflow: hidden;
}

.bubble {
  background-color: rgba(255, 255, 255, 0.4);
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
}
.bubble-1 {
  opacity: 0.75;
  left: 99vw;
  top: 14vh;
  animation: move-1 30.02s infinite;
  -moz-transform: translate(0, 0) scale(1.49);
  -ms-transform: translate(0, 0) scale(1.49);
  -webkit-transform: translate(0, 0) scale(1.49);
  transform: translate(0, 0) scale(1.49);
}
.bubble-2 {
  opacity: 0.35;
  left: 59vw;
  top: 11vh;
  animation: move-2 30.04s infinite;
  -moz-transform: translate(0, 0) scale(1.92);
  -ms-transform: translate(0, 0) scale(1.92);
  -webkit-transform: translate(0, 0) scale(1.92);
  transform: translate(0, 0) scale(1.92);
}
.bubble-3 {
  opacity: 1;
  left: 29vw;
  top: 84vh;
  animation: move-3 30.06s infinite;
  -moz-transform: translate(0, 0) scale(1.59);
  -ms-transform: translate(0, 0) scale(1.59);
  -webkit-transform: translate(0, 0) scale(1.59);
  transform: translate(0, 0) scale(1.59);
}
.bubble-4 {
  opacity: 0.25;
  left: 43vw;
  top: 23vh;
  animation: move-4 30.08s infinite;
  -moz-transform: translate(0, 0) scale(0.58);
  -ms-transform: translate(0, 0) scale(0.58);
  -webkit-transform: translate(0, 0) scale(0.58);
  transform: translate(0, 0) scale(0.58);
}
.bubble-5 {
  opacity: 0.01;
  left: 77vw;
  top: 3vh;
  animation: move-5 30.1s infinite;
  -moz-transform: translate(0, 0) scale(0.69);
  -ms-transform: translate(0, 0) scale(0.69);
  -webkit-transform: translate(0, 0) scale(0.69);
  transform: translate(0, 0) scale(0.69);
}
.bubble-6 {
  opacity: 0.87;
  left: 36vw;
  top: 79vh;
  animation: move-6 30.12s infinite;
  -moz-transform: translate(0, 0) scale(0.99);
  -ms-transform: translate(0, 0) scale(0.99);
  -webkit-transform: translate(0, 0) scale(0.99);
  transform: translate(0, 0) scale(0.99);
}
.bubble-7 {
  opacity: 0.9;
  left: 4vw;
  top: 83vh;
  animation: move-7 30.14s infinite;
  -moz-transform: translate(0, 0) scale(0.76);
  -ms-transform: translate(0, 0) scale(0.76);
  -webkit-transform: translate(0, 0) scale(0.76);
  transform: translate(0, 0) scale(0.76);
}
.bubble-8 {
  opacity: 0.11;
  left: 71vw;
  top: 85vh;
  animation: move-8 30.16s infinite;
  -moz-transform: translate(0, 0) scale(0.46);
  -ms-transform: translate(0, 0) scale(0.46);
  -webkit-transform: translate(0, 0) scale(0.46);
  transform: translate(0, 0) scale(0.46);
}
.bubble-9 {
  opacity: 0.41;
  left: 8vw;
  top: 97vh;
  animation: move-9 30.18s infinite;
  -moz-transform: translate(0, 0) scale(0.12);
  -ms-transform: translate(0, 0) scale(0.12);
  -webkit-transform: translate(0, 0) scale(0.12);
  transform: translate(0, 0) scale(0.12);
}
.bubble-10 {
  opacity: 0.31;
  left: 30vw;
  top: 98vh;
  animation: move-10 30.2s infinite;
  -moz-transform: translate(0, 0) scale(1.98);
  -ms-transform: translate(0, 0) scale(1.98);
  -webkit-transform: translate(0, 0) scale(1.98);
  transform: translate(0, 0) scale(1.98);
}
.bubble-11 {
  opacity: 0.03;
  left: 90vw;
  top: 89vh;
  animation: move-11 30.22s infinite;
  -moz-transform: translate(0, 0) scale(1.35);
  -ms-transform: translate(0, 0) scale(1.35);
  -webkit-transform: translate(0, 0) scale(1.35);
  transform: translate(0, 0) scale(1.35);
}
.bubble-12 {
  opacity: 0.06;
  left: 77vw;
  top: 35vh;
  animation: move-12 30.24s infinite;
  -moz-transform: translate(0, 0) scale(0.74);
  -ms-transform: translate(0, 0) scale(0.74);
  -webkit-transform: translate(0, 0) scale(0.74);
  transform: translate(0, 0) scale(0.74);
}
.bubble-13 {
  opacity: 0.38;
  left: 79vw;
  top: 98vh;
  animation: move-13 30.26s infinite;
  -moz-transform: translate(0, 0) scale(0.98);
  -ms-transform: translate(0, 0) scale(0.98);
  -webkit-transform: translate(0, 0) scale(0.98);
  transform: translate(0, 0) scale(0.98);
}
.bubble-14 {
  opacity: 0.1;
  left: 23vw;
  top: 32vh;
  animation: move-14 30.28s infinite;
  -moz-transform: translate(0, 0) scale(0.18);
  -ms-transform: translate(0, 0) scale(0.18);
  -webkit-transform: translate(0, 0) scale(0.18);
  transform: translate(0, 0) scale(0.18);
}
.bubble-15 {
  opacity: 0.66;
  left: 47vw;
  top: 45vh;
  animation: move-15 30.3s infinite;
  -moz-transform: translate(0, 0) scale(1.34);
  -ms-transform: translate(0, 0) scale(1.34);
  -webkit-transform: translate(0, 0) scale(1.34);
  transform: translate(0, 0) scale(1.34);
}
.bubble-16 {
  opacity: 0.73;
  left: 34vw;
  top: 57vh;
  animation: move-16 30.32s infinite;
  -moz-transform: translate(0, 0) scale(1.55);
  -ms-transform: translate(0, 0) scale(1.55);
  -webkit-transform: translate(0, 0) scale(1.55);
  transform: translate(0, 0) scale(1.55);
}
.bubble-17 {
  opacity: 0.62;
  left: 32vw;
  top: 45vh;
  animation: move-17 30.34s infinite;
  -moz-transform: translate(0, 0) scale(1.46);
  -ms-transform: translate(0, 0) scale(1.46);
  -webkit-transform: translate(0, 0) scale(1.46);
  transform: translate(0, 0) scale(1.46);
}
.bubble-18 {
  opacity: 0.74;
  left: 53vw;
  top: 64vh;
  animation: move-18 30.36s infinite;
  -moz-transform: translate(0, 0) scale(1.69);
  -ms-transform: translate(0, 0) scale(1.69);
  -webkit-transform: translate(0, 0) scale(1.69);
  transform: translate(0, 0) scale(1.69);
}
.bubble-19 {
  opacity: 0.93;
  left: 1vw;
  top: 50vh;
  animation: move-19 30.38s infinite;
  -moz-transform: translate(0, 0) scale(0.86);
  -ms-transform: translate(0, 0) scale(0.86);
  -webkit-transform: translate(0, 0) scale(0.86);
  transform: translate(0, 0) scale(0.86);
}
.bubble-20 {
  opacity: 0.2;
  left: 98vw;
  top: 63vh;
  animation: move-20 30.4s infinite;
  -moz-transform: translate(0, 0) scale(0.59);
  -ms-transform: translate(0, 0) scale(0.59);
  -webkit-transform: translate(0, 0) scale(0.59);
  transform: translate(0, 0) scale(0.59);
}
.bubble-21 {
  opacity: 0.4;
  left: 23vw;
  top: 94vh;
  animation: move-21 30.42s infinite;
  -moz-transform: translate(0, 0) scale(1.25);
  -ms-transform: translate(0, 0) scale(1.25);
  -webkit-transform: translate(0, 0) scale(1.25);
  transform: translate(0, 0) scale(1.25);
}
.bubble-22 {
  opacity: 0.59;
  left: 92vw;
  top: 43vh;
  animation: move-22 30.44s infinite;
  -moz-transform: translate(0, 0) scale(0.54);
  -ms-transform: translate(0, 0) scale(0.54);
  -webkit-transform: translate(0, 0) scale(0.54);
  transform: translate(0, 0) scale(0.54);
}
.bubble-23 {
  opacity: 0.71;
  left: 53vw;
  top: 97vh;
  animation: move-23 30.46s infinite;
  -moz-transform: translate(0, 0) scale(1.8);
  -ms-transform: translate(0, 0) scale(1.8);
  -webkit-transform: translate(0, 0) scale(1.8);
  transform: translate(0, 0) scale(1.8);
}
.bubble-24 {
  opacity: 0.82;
  left: 97vw;
  top: 55vh;
  animation: move-24 30.48s infinite;
  -moz-transform: translate(0, 0) scale(0.6);
  -ms-transform: translate(0, 0) scale(0.6);
  -webkit-transform: translate(0, 0) scale(0.6);
  transform: translate(0, 0) scale(0.6);
}
.bubble-25 {
  opacity: 0.88;
  left: 28vw;
  top: 25vh;
  animation: move-25 30.5s infinite;
  -moz-transform: translate(0, 0) scale(1.64);
  -ms-transform: translate(0, 0) scale(1.64);
  -webkit-transform: translate(0, 0) scale(1.64);
  transform: translate(0, 0) scale(1.64);
}
.bubble-26 {
  opacity: 0.27;
  left: 93vw;
  top: 53vh;
  animation: move-26 30.52s infinite;
  -moz-transform: translate(0, 0) scale(1.48);
  -ms-transform: translate(0, 0) scale(1.48);
  -webkit-transform: translate(0, 0) scale(1.48);
  transform: translate(0, 0) scale(1.48);
}
.bubble-27 {
  opacity: 0.04;
  left: 12vw;
  top: 29vh;
  animation: move-27 30.54s infinite;
  -moz-transform: translate(0, 0) scale(1.63);
  -ms-transform: translate(0, 0) scale(1.63);
  -webkit-transform: translate(0, 0) scale(1.63);
  transform: translate(0, 0) scale(1.63);
}
.bubble-28 {
  opacity: 0.61;
  left: 57vw;
  top: 39vh;
  animation: move-28 30.56s infinite;
  -moz-transform: translate(0, 0) scale(1.53);
  -ms-transform: translate(0, 0) scale(1.53);
  -webkit-transform: translate(0, 0) scale(1.53);
  transform: translate(0, 0) scale(1.53);
}
.bubble-29 {
  opacity: 0.97;
  left: 49vw;
  top: 24vh;
  animation: move-29 30.58s infinite;
  -moz-transform: translate(0, 0) scale(1.66);
  -ms-transform: translate(0, 0) scale(1.66);
  -webkit-transform: translate(0, 0) scale(1.66);
  transform: translate(0, 0) scale(1.66);
}
.bubble-30 {
  opacity: 0.84;
  left: 68vw;
  top: 84vh;
  animation: move-30 30.6s infinite;
  -moz-transform: translate(0, 0) scale(1.15);
  -ms-transform: translate(0, 0) scale(1.15);
  -webkit-transform: translate(0, 0) scale(1.15);
  transform: translate(0, 0) scale(1.15);
}

.credits {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 2px 15px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  z-index: 111;
}
.credits a {
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.05em;
}

@keyframes move-1 {
  41% {
    -moz-transform: translate(-87vw, -37vh);
    -webkit-transform: translate(-87vw, -37vh);
    transform: translate(-87vw, -37vh);
  }
}
@keyframes move-2 {
  51% {
    -moz-transform: translate(-80vw, -60vh);
    -webkit-transform: translate(-80vw, -60vh);
    transform: translate(-80vw, -60vh);
  }
}
@keyframes move-3 {
  37% {
    -moz-transform: translate(-11vw, -46vh);
    -webkit-transform: translate(-11vw, -46vh);
    transform: translate(-11vw, -46vh);
  }
}
@keyframes move-4 {
  60% {
    -moz-transform: translate(-38vw, -15vh);
    -webkit-transform: translate(-38vw, -15vh);
    transform: translate(-38vw, -15vh);
  }
}
@keyframes move-5 {
  45% {
    -moz-transform: translate(-14vw, -92vh);
    -webkit-transform: translate(-14vw, -92vh);
    transform: translate(-14vw, -92vh);
  }
}
@keyframes move-6 {
  55% {
    -moz-transform: translate(-90vw, -17vh);
    -webkit-transform: translate(-90vw, -17vh);
    transform: translate(-90vw, -17vh);
  }
}
@keyframes move-7 {
  50% {
    -moz-transform: translate(-18vw, -45vh);
    -webkit-transform: translate(-18vw, -45vh);
    transform: translate(-18vw, -45vh);
  }
}
@keyframes move-8 {
  50% {
    -moz-transform: translate(-62vw, -10vh);
    -webkit-transform: translate(-62vw, -10vh);
    transform: translate(-62vw, -10vh);
  }
}
@keyframes move-9 {
  45% {
    -moz-transform: translate(-53vw, -5vh);
    -webkit-transform: translate(-53vw, -5vh);
    transform: translate(-53vw, -5vh);
  }
}
@keyframes move-10 {
  42% {
    -moz-transform: translate(-10vw, -3vh);
    -webkit-transform: translate(-10vw, -3vh);
    transform: translate(-10vw, -3vh);
  }
}
@keyframes move-11 {
  39% {
    -moz-transform: translate(-79vw, -24vh);
    -webkit-transform: translate(-79vw, -24vh);
    transform: translate(-79vw, -24vh);
  }
}
@keyframes move-12 {
  35% {
    -moz-transform: translate(-51vw, -10vh);
    -webkit-transform: translate(-51vw, -10vh);
    transform: translate(-51vw, -10vh);
  }
}
@keyframes move-13 {
  43% {
    -moz-transform: translate(-3vw, -35vh);
    -webkit-transform: translate(-3vw, -35vh);
    transform: translate(-3vw, -35vh);
  }
}
@keyframes move-14 {
  55% {
    -moz-transform: translate(-62vw, -25vh);
    -webkit-transform: translate(-62vw, -25vh);
    transform: translate(-62vw, -25vh);
  }
}
@keyframes move-15 {
  34% {
    -moz-transform: translate(-30vw, -80vh);
    -webkit-transform: translate(-30vw, -80vh);
    transform: translate(-30vw, -80vh);
  }
}
@keyframes move-16 {
  34% {
    -moz-transform: translate(-21vw, -76vh);
    -webkit-transform: translate(-21vw, -76vh);
    transform: translate(-21vw, -76vh);
  }
}
@keyframes move-17 {
  42% {
    -moz-transform: translate(-39vw, -14vh);
    -webkit-transform: translate(-39vw, -14vh);
    transform: translate(-39vw, -14vh);
  }
}
@keyframes move-18 {
  45% {
    -moz-transform: translate(-2vw, -7vh);
    -webkit-transform: translate(-2vw, -7vh);
    transform: translate(-2vw, -7vh);
  }
}
@keyframes move-19 {
  54% {
    -moz-transform: translate(-31vw, -11vh);
    -webkit-transform: translate(-31vw, -11vh);
    transform: translate(-31vw, -11vh);
  }
}
@keyframes move-20 {
  53% {
    -moz-transform: translate(-63vw, -2vh);
    -webkit-transform: translate(-63vw, -2vh);
    transform: translate(-63vw, -2vh);
  }
}
@keyframes move-21 {
  57% {
    -moz-transform: translate(-21vw, -31vh);
    -webkit-transform: translate(-21vw, -31vh);
    transform: translate(-21vw, -31vh);
  }
}
@keyframes move-22 {
  32% {
    -moz-transform: translate(-76vw, -84vh);
    -webkit-transform: translate(-76vw, -84vh);
    transform: translate(-76vw, -84vh);
  }
}
@keyframes move-23 {
  31% {
    -moz-transform: translate(-91vw, -61vh);
    -webkit-transform: translate(-91vw, -61vh);
    transform: translate(-91vw, -61vh);
  }
}
@keyframes move-24 {
  49% {
    -moz-transform: translate(-88vw, -60vh);
    -webkit-transform: translate(-88vw, -60vh);
    transform: translate(-88vw, -60vh);
  }
}
@keyframes move-25 {
  37% {
    -moz-transform: translate(-62vw, -5vh);
    -webkit-transform: translate(-62vw, -5vh);
    transform: translate(-62vw, -5vh);
  }
}
@keyframes move-26 {
  31% {
    -moz-transform: translate(-47vw, -48vh);
    -webkit-transform: translate(-47vw, -48vh);
    transform: translate(-47vw, -48vh);
  }
}
@keyframes move-27 {
  53% {
    -moz-transform: translate(-19vw, -45vh);
    -webkit-transform: translate(-19vw, -45vh);
    transform: translate(-19vw, -45vh);
  }
}
@keyframes move-28 {
  40% {
    -moz-transform: translate(-7vw, -47vh);
    -webkit-transform: translate(-7vw, -47vh);
    transform: translate(-7vw, -47vh);
  }
}
@keyframes move-29 {
  40% {
    -moz-transform: translate(-61vw, -69vh);
    -webkit-transform: translate(-61vw, -69vh);
    transform: translate(-61vw, -69vh);
  }
}
@keyframes move-30 {
  59% {
    -moz-transform: translate(-77vw, -98vh);
    -webkit-transform: translate(-77vw, -98vh);
    transform: translate(-77vw, -98vh);
  }
}