body {
  /* background: #00b4ff; */
  color: #333;
  /* font: 100% Lato, Arial, Sans Serif; */
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#background-wrap {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
  0% {
    margin-top: 500px;
  }
  100% {
    margin-top: -100%;
  }
}

@-moz-keyframes animateBubble {
  0% {
    margin-top: 500px;
  }
  100% {
    margin-top: -100%;
  }
}

@keyframes animateBubble {
  0% {
    margin-top: 500px;
  }
  100% {
    margin-top: -100%;
  }
}

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

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

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

/* ANIMATIONS */

.x1 {
  -webkit-animation: animateBubble 9s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 9s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 9s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 50%;
  top: 5%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x2 {
  -webkit-animation: animateBubble 8s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 8s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 8s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 100%;
  top: 80%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x3 {
  -webkit-animation: animateBubble 10s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 10s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 10s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 10%;
  top: 40%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x4 {
  -webkit-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;

  left: 20%;
  top: 0;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x5 {
  -webkit-animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 30%;
  top: 50%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x6 {
  -webkit-animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 50%;
  top: 0;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x7 {
  -webkit-animation: animateBubble 8s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 8s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 8s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 65%;
  top: 70%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x8 {
  -webkit-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  -moz-animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;

  left: 80%;
  top: 10%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x9 {
  -webkit-animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  -moz-animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;
  animation: animateBubble 18s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 90%;
  top: 50%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.x10 {
  -webkit-animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  -moz-animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;
  animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 80%;
  top: 80%;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.animation-wait-1 {
  --animate-duration: 1500ms;
}

.animation-wait-2 {
  --animate-duration: 3000ms;
}

.animation-wait-3 {
  --animate-duration: 4500ms;
}

.animate-delay-50ms {
  animation-delay: 50ms !important;
}
.animate-delay-250ms {
  animation-delay: 250ms !important;
}
.animate-delay-150ms {
  animation-delay: 150ms !important;
}
.animate-delay-350ms {
  animation-delay: 350ms !important;
}
.animate-delay-450ms {
  animation-delay: 450ms !important;
}
.animate-delay-550ms {
  animation-delay: 550ms !important;
}
.animate-delay-650ms {
  animation-delay: 650ms !important;
}
.animate-delay-750ms {
  animation-delay: 750ms !important;
}
.animate-delay-850ms {
  animation-delay: 850ms !important;
}
.animate-delay-950ms {
  animation-delay: 950ms !important;
}

.animate-delay-100ms {
  animation-delay: 100ms !important;
}
.animate-delay-200ms {
  animation-delay: 200ms !important;
}
.animate-delay-300ms {
  animation-delay: 300ms !important;
}
.animate-delay-400ms {
  animation-delay: 400ms !important;
}
.animate-delay-500ms {
  animation-delay: 500ms !important;
}
.animate-delay-600ms {
  animation-delay: 600ms !important;
}
.animate-delay-700ms {
  animation-delay: 700ms !important;
}
.animate-delay-800ms {
  animation-delay: 800ms !important;
}
.animate-delay-900ms {
  animation-delay: 900ms !important;
}