/*
  The floating bubbles drifting up the background, and their animation.
  Purely decorative; the markup marks the container aria-hidden.
*/

.bubbles {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.bubbles i {
  animation: rise linear infinite;
  background: radial-gradient(
    circle at 30% 28%,
    rgba(255, 255, 255, 0.95) 0 8%,
    rgba(255, 255, 255, 0.25) 22%,
    rgba(255, 255, 255, 0.06) 55%,
    rgba(255, 255, 255, 0.35) 72%,
    rgba(255, 255, 255, 0) 74%
  );
  border-radius: 50%;
  bottom: -80px;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5);
  position: absolute;
}

@keyframes rise {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-120vh);
  }
}

/*
  Position, size and timing for each bubble. These differ per bubble, so
  they used to sit in a style attribute on every <i> in the markup - 127
  lines of it. Keeping them here leaves the markup as 14 bare tags.

  The negative delays start each bubble partway through its rise, so they
  are already spread across the screen on the first frame instead of all
  launching from the bottom together.
*/

.bubbles i:nth-child(1) {
  animation-delay: -13s;
  animation-duration: 27s;
  height: 34px;
  left: 13%;
  width: 34px;
}

.bubbles i:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 21s;
  height: 26px;
  left: 10%;
  width: 26px;
}

.bubbles i:nth-child(3) {
  animation-delay: -1s;
  animation-duration: 27s;
  height: 48px;
  left: 72%;
  width: 48px;
}

.bubbles i:nth-child(4) {
  animation-delay: -30s;
  animation-duration: 17s;
  height: 90px;
  left: 74%;
  width: 90px;
}

.bubbles i:nth-child(5) {
  animation-delay: -18s;
  animation-duration: 15s;
  height: 18px;
  left: 30%;
  width: 18px;
}

.bubbles i:nth-child(6) {
  animation-delay: -1s;
  animation-duration: 26s;
  height: 18px;
  left: 76%;
  width: 18px;
}

.bubbles i:nth-child(7) {
  animation-delay: -17s;
  animation-duration: 15s;
  height: 64px;
  left: 30%;
  width: 64px;
}

.bubbles i:nth-child(8) {
  animation-delay: -13s;
  animation-duration: 23s;
  height: 18px;
  left: 19%;
  width: 18px;
}

.bubbles i:nth-child(9) {
  animation-delay: -18s;
  animation-duration: 17s;
  height: 34px;
  left: 20%;
  width: 34px;
}

.bubbles i:nth-child(10) {
  animation-delay: -3s;
  animation-duration: 19s;
  height: 64px;
  left: 41%;
  width: 64px;
}

.bubbles i:nth-child(11) {
  animation-delay: -11s;
  animation-duration: 20s;
  height: 18px;
  left: 76%;
  width: 18px;
}

.bubbles i:nth-child(12) {
  animation-delay: -18s;
  animation-duration: 16s;
  height: 64px;
  left: 14%;
  width: 64px;
}

.bubbles i:nth-child(13) {
  animation-delay: -15s;
  animation-duration: 20s;
  height: 26px;
  left: 9%;
  width: 26px;
}

.bubbles i:nth-child(14) {
  animation-delay: -24s;
  animation-duration: 27s;
  height: 18px;
  left: 89%;
  width: 18px;
}