.bubbles {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -50;
    overflow: hidden;
    top: 0;
    left: 0;
    image-rendering: crisp-edges;
}

.bubble {
  position: absolute;
  bottom: -20px;
  background: rgba(241, 241, 241, 0.3);
  border-radius: 50%;
  opacity: 0.3;
  animation: rise 15s infinite ease-in;
  /* Outline effect */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
 image-rendering: crisp-edges;
}

.bubble:nth-child(1) { width: 25px; height: 25px; left: 3%; animation-duration: 14s; animation-delay: 0s; }
.bubble:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 16s; animation-delay: 2s; }
.bubble:nth-child(3) { width: 15px; height: 15px; left: 18%; animation-duration: 10s; animation-delay: 1s; }
.bubble:nth-child(4) { width: 30px; height: 30px; left: 25%; animation-duration: 12s; animation-delay: 3s; }
.bubble:nth-child(5) { width: 50px; height: 50px; left: 32%; animation-duration: 18s; animation-delay: 0s; }
.bubble:nth-child(6) { width: 20px; height: 20px; left: 40%; animation-duration: 11s; animation-delay: 2s; }
.bubble:nth-child(7) { width: 60px; height: 60px; left: 48%; animation-duration: 20s; animation-delay: 1s; }
.bubble:nth-child(8) { width: 10px; height: 10px; left: 55%; animation-duration: 8s; animation-delay: 4s; }
.bubble:nth-child(9) { width: 35px; height: 35px; left: 62%; animation-duration: 15s; animation-delay: 1s; }
.bubble:nth-child(10) { width: 12px; height: 12px; left: 70%; animation-duration: 9s; animation-delay: -8s; }
.bubble:nth-child(11) { width: 45px; height: 45px; left: 78%; animation-duration: 17s; animation-delay: -10s; }
.bubble:nth-child(12) { width: 28px; height: 28px; left: 15%; animation-duration: 13s; animation-delay: 2s; }
.bubble:nth-child(13) { width: 65px; height: 65px; left: 22%; animation-duration: 19s; animation-delay: 1s; }
.bubble:nth-child(14) { width: 18px; height: 18px; left: 30%; animation-duration: 7s; animation-delay: 5s; }
.bubble:nth-child(15) { width: 38px; height: 38px; left: 37%; animation-duration: 14s; animation-delay: 1s; }
.bubble:nth-child(16) { width: 22px; height: 22px; left: 45%; animation-duration: 10s; animation-delay: 3s; }
.bubble:nth-child(17) { width: 55px; height: 55px; left: 52%; animation-duration: 16s; animation-delay: 0s; }
.bubble:nth-child(18) { width: 32px; height: 32px; left: 60%; animation-duration: 12s; animation-delay: 2s; }
.bubble:nth-child(19) { width: 70px; height: 70px; left: 68%; animation-duration: 21s; animation-delay: -10s; }
.bubble:nth-child(20) { width: 14px; height: 14px; left: 75%; animation-duration: 8s; animation-delay: -4s; }
.bubble:nth-child(21) { width: 42px; height: 42px; left: 83%; animation-duration: 15s; animation-delay: 1s; }
.bubble:nth-child(22) { width: 26px; height: 26px; left: 8%; animation-duration: 11s; animation-delay: 3s; }
.bubble:nth-child(23) { width: 80px; height: 80px; left: 17%; animation-duration: 22s; animation-delay: 0s; }
.bubble:nth-child(24) { width: 16px; height: 16px; left: 25%; animation-duration: 6s; animation-delay: -5s; }
.bubble:nth-child(25) { width: 48px; height: 48px; left: 33%; animation-duration: 14s; animation-delay: 2s; }
.bubble:nth-child(26) { width: 30px; height: 30px; left: 42%; animation-duration: 13s; animation-delay: 3s; }
.bubble:nth-child(27) { width: 75px; height: 75px; left: 50%; animation-duration: 20s; animation-delay: 1s; }
.bubble:nth-child(28) { width: 20px; height: 20px; left: 58%; animation-duration: 9s; animation-delay: 4s; }
.bubble:nth-child(29) { width: 36px; height: 36px; left: 67%; animation-duration: 15s; animation-delay: 2s; }
.bubble:nth-child(30) { width: 52px; height: 52px; left: 75%; animation-duration: 17s; animation-delay: 1s; }
.bubble:nth-child(31) { width: 12px; height: 12px; left: 3%; animation-duration: 14s; animation-delay: 0s; }
.bubble:nth-child(32) { width: 12px; height: 12px; left: 10%; animation-duration: 16s; animation-delay: 2s; }
.bubble:nth-child(33) { width: 12px; height: 12px; left: 18%; animation-duration: 10s; animation-delay: 1s; }
.bubble:nth-child(34) { width: 12px; height: 12px; left: 25%; animation-duration: 12s; animation-delay: 3s; }
.bubble:nth-child(35) { width: 12px; height: 12px; left: 32%; animation-duration: 18s; animation-delay: 0s; }
.bubble:nth-child(36) { width: 20px; height: 20px; left: 40%; animation-duration: 11s; animation-delay: 2s; }
.bubble:nth-child(37) { width: 60px; height: 60px; left: 48%; animation-duration: 20s; animation-delay: 1s; }
.bubble:nth-child(38) { width: 10px; height: 10px; left: 55%; animation-duration: 8s; animation-delay: -4s; }
.bubble:nth-child(39) { width: 35px; height: 35px; left: 62%; animation-duration: 15s; animation-delay: -1s; }
.bubble:nth-child(31) { width: 8px; height: 8px; left: 5%; animation-duration: 9s; animation-delay: -6s; }
.bubble:nth-child(32) { width: 12px; height: 12px; left: 12%; animation-duration: 11s; animation-delay: -5s; }
.bubble:nth-child(33) { width: 5px; height: 5px; left: 19%; animation-duration: 7s; animation-delay: 7s; }
.bubble:nth-child(34) { width: 18px; height: 18px; left: 23%; animation-duration: 10s; animation-delay: 6s; }
.bubble:nth-child(35) { width: 25px; height: 25px; left: 30%; animation-duration: 12s; animation-delay: 5s; }
.bubble:nth-child(36) { width: 10px; height: 10px; left: 37%; animation-duration: 8s; animation-delay: 8s; }
.bubble:nth-child(37) { width: 15px; height: 15px; left: 42%; animation-duration: 9s; animation-delay: 7s; }
.bubble:nth-child(38) { width: 28px; height: 28px; left: 48%; animation-duration: 13s; animation-delay: 6s; }
.bubble:nth-child(39) { width: 7px; height: 7px; left: 55%; animation-duration: 6s; animation-delay: 9s; }
.bubble:nth-child(40) { width: 22px; height: 22px; left: 60%; animation-duration: 11s; animation-delay: 7s; }
.bubble:nth-child(41) { width: 30px; height: 30px; left: 65%; animation-duration: 14s; animation-delay: 6s; }
.bubble:nth-child(42) { width: 9px; height: 9px; left: 72%; animation-duration: 7s; animation-delay: -8s; }
.bubble:nth-child(43) { width: 14px; height: 14px; left: 78%; animation-duration: 10s; animation-delay: -7s; }
.bubble:nth-child(44) { width: 20px; height: 20px; left: 83%; animation-duration: 12s; animation-delay: 6s; }
.bubble:nth-child(45) { width: 6px; height: 6px; left: 88%; animation-duration: 5s; animation-delay: -9s; }
.bubble:nth-child(46) { width: 26px; height: 26px; left: 12%; animation-duration: 13s; animation-delay: -7s; }
.bubble:nth-child(47) { width: 11px; height: 11px; left: 25%; animation-duration: 8s; animation-delay: -8s; }
.bubble:nth-child(48) { width: 17px; height: 17px; left: 38%; animation-duration: 9s; animation-delay: -7s; }
.bubble:nth-child(49) { width: 24px; height: 24px; left: 52%; animation-duration: 12s; animation-delay: 6s; }
.bubble:nth-child(50) { width: 13px; height: 13px; left: 68%; animation-duration: 10s; animation-delay: 8s; }
.bubble:nth-child(51) { width: 5px; height: 5px; left: 7%; animation-duration: 6s; animation-delay: 1s; }
.bubble:nth-child(52) { width: 8px; height: 8px; left: 14%; animation-duration: 8s; animation-delay: 9s; }
.bubble:nth-child(53) { width: 12px; height: 12px; left: 21%; animation-duration: 7s; animation-delay: 1s; }
.bubble:nth-child(54) { width: 6px; height: 6px; left: 28%; animation-duration: 5s; animation-delay: 1s; }
.bubble:nth-child(55) { width: 15px; height: 15px; left: 35%; animation-duration: 9s; animation-delay: 1s; }
.bubble:nth-child(56) { width: 10px; height: 10px; left: 42%; animation-duration: 6s; animation-delay: 1s; }
.bubble:nth-child(57) { width: 18px; height: 18px; left: 49%; animation-duration: 10s; animation-delay: 9s; }
.bubble:nth-child(58) { width: 7px; height: 7px; left: 56%; animation-duration: 7s; animation-delay: 1s; }
.bubble:nth-child(59) { width: 14px; height: 14px; left: 63%; animation-duration: 8s; animation-delay: 1s; }
.bubble:nth-child(60) { width: 9px; height: 9px; left: 70%; animation-duration: 6s; animation-delay: 3s; }
.bubble:nth-child(61) { width: 20px; height: 20px; left: 77%; animation-duration: 11s; animation-delay: 1s; }
.bubble:nth-child(62) { width: 11px; height: 11px; left: 84%; animation-duration: 7s; animation-delay: 2s; }
.bubble:nth-child(63) { width: 16px; height: 16px; left: 9%; animation-duration: 9s; animation-delay: -1s; }
.bubble:nth-child(64) { width: 13px; height: 13px; left: 17%; animation-duration: 8s; animation-delay: -3s; }
.bubble:nth-child(65) { width: 19px; height: 19px; left: 24%; animation-duration: 10s; animation-delay: -2s; }
.bubble:nth-child(66) { width: 5px; height: 5px; left: 31%; animation-duration: 5s; animation-delay: -4s; }
.bubble:nth-child(67) { width: 17px; height: 17px; left: 38%; animation-duration: 9s; animation-delay: 3s; }
.bubble:nth-child(68) { width: 10px; height: 10px; left: 45%; animation-duration: 7s; animation-delay: 5s; }
.bubble:nth-child(69) { width: 14px; height: 14px; left: 52%; animation-duration: 8s; animation-delay: -4s; }
.bubble:nth-child(70) { width: 8px; height: 8px; left: 59%; animation-duration: 6s; animation-delay: -6s; }
.bubble:nth-child(n+51) {
  opacity: 0.4;
}
.bubble:nth-child(-n+30) {
  opacity: 0.2;
}
@keyframes rise {
  0% { bottom: -100px; transform: translateX(0); opacity: 0.2; }
  20% { opacity: 0.5; }
  50% { transform: translateX(80px); opacity: 0.7; }
  80% { opacity: 0.4; }
  100% { bottom: 1080px; transform: translateX(-160px); opacity: 0; }
}
@keyframes rise {
  0% { bottom: -100px; transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { bottom: 1080px; transform: translateX(-200px); }
}