body {
  background: linear-gradient(-45deg, #00c6ff, #0072ff, #00c6ff, #0072ff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
  pointer-events: none;
}
.bubble-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.bubble {
  position: absolute;
  bottom: -100px;
  background: rgba(0, 153, 255, 0.15);
  border-radius: 50%;
  animation: rise 15s infinite ease-in;
}
.bubble:nth-child(1) { width: 40px; height: 40px; left: 20%; animation-delay: 0s; }
.bubble:nth-child(2) { width: 60px; height: 60px; left: 40%; animation-delay: 2s; }
.bubble:nth-child(3) { width: 30px; height: 30px; left: 60%; animation-delay: 4s; }
.bubble:nth-child(4) { width: 50px; height: 50px; left: 80%; animation-delay: 1s; }
.bubble:nth-child(5) { width: 70px; height: 70px; left: 10%; animation-delay: 3s; }
@keyframes rise {
  0% { bottom: -100px; transform: translateX(0); opacity: 0; }
  50% { opacity: 1; }
  100% { bottom: 100%; transform: translateX(50px); opacity: 0; }
}