* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  font-family: 'Rajdhani', 'Arial', sans-serif;
  background: linear-gradient(135deg, #0a1929 0%, #0d2136 25%, #061220 50%, #0a2540 75%, #051424 100%);
  position: relative;
}

/* Animated water effect background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(14, 165, 233, 0.04) 0%, transparent 50%);
  animation: waterFlow 20s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes waterFlow {
  0%, 100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-10px) scale(1.05);
  }
}

/* Floating particles effect */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 33% 90%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.08), transparent);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: floatParticles 60s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes floatParticles {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}