body {
  background-color: #3D0E91; /* deep purple */
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #3D0E91; /* deep purple */
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #3D0E91; /* deep purple */
}

/* Container for the bokeh effect */
.bokeh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Individual circles */
.bokeh span {
  position: absolute;
  display: block;
  width: 80px;
  height: 80px;
  background: rgba(0, 153, 255, 0.3); /* bluish glow */
  border-radius: 50%;
  filter: blur(12px);
  animation: float 20s linear infinite;
}

/* Randomize sizes */
.bokeh span:nth-child(2) { width: 100px; height: 100px; animation-duration: 25s; left: 20%; }
.bokeh span:nth-child(3) { width: 60px; height: 60px; animation-duration: 18s; left: 50%; }
.bokeh span:nth-child(4) { width: 120px; height: 120px; animation-duration: 30s; left: 70%; }
.bokeh span:nth-child(5) { width: 90px; height: 90px; animation-duration: 22s; left: 85%; }

/* Floating animation */
@keyframes float {
  0%   { transform: translateY(100vh) scale(1); opacity: 0; }
  30%  { opacity: 0.6; }
  100% { transform: translateY(-20vh) scale(1.2); opacity: 0; }
}