/* Animation  */
  
  .bubbles {
    position: absolute;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    z-index: 0;
  }
  
  .bubble {
    position: absolute;
    left: var(--bubble-left-offset);
    bottom: -75%;
    display: block;
    width: var(--bubble-radius);
    height: var(--bubble-radius);
    border-radius: 50%;
    animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
  }
  .bubble::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
  }
  .bubble:nth-child(0) {
    background: rgba(122, 87, 209, 0.3);
    --bubble-left-offset: 28vw;
    --bubble-radius: 2vw;
    --bubble-float-duration: 7s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 1s;
    --bubble-sway-delay: 3s;
    --bubble-sway-type: sway-left-to-right;
  }
  .bubble:nth-child(1) {
    background: rgba(91, 231, 196, 0.3);
    --bubble-left-offset: 87vw;
    --bubble-radius: 2vw;
    --bubble-float-duration: 16s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 1s;
    --bubble-sway-delay: 0s;
    --bubble-sway-type: sway-right-to-left;
  }
  .bubble:nth-child(2) {
    background: rgba(80, 193, 233, 0.3);
    --bubble-left-offset: 49vw;
    --bubble-radius: 2vw;
    --bubble-float-duration: 20s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 0s;
    --bubble-sway-type: sway-left-to-right;
  }
  .bubble:nth-child(3) {
    background: rgba(122, 87, 209, 0.6);
    --bubble-left-offset: 31vw;
    --bubble-radius: 1vw;
    --bubble-float-duration: 22s;
    --bubble-sway-duration: 5s;
    --bubble-float-delay: 2s;
    --bubble-sway-delay: 3s;
    --bubble-sway-type: sway-left-to-right;
  }
  .bubble:nth-child(4) {
    background: rgba(91, 231, 196, 0.6);
    --bubble-left-offset: 52vw;
    --bubble-radius: 2vw;
    --bubble-float-duration: 16s;
    --bubble-sway-duration: 6s;
    --bubble-float-delay: 3s;
    --bubble-sway-delay: 2s;
    --bubble-sway-type: sway-right-to-left;
  }
  .bubble:nth-child(5) {
    background: rgba(80, 193, 233, 0.6);
    --bubble-left-offset: 18vw;
    --bubble-radius: 3vw;
    --bubble-float-duration: 22s;
    --bubble-sway-duration: 4s;
    --bubble-float-delay: 4s;
    --bubble-sway-delay: 4s;
    --bubble-sway-type: sway-left-to-right;
  }
  
  @keyframes float-up {
    to {
      transform: translateY(-175vh);
    }
  }
  @keyframes sway-left-to-right {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  @keyframes sway-right-to-left {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }