body {
  /* A rich dark blue to deep purple/black horizon gradient */
  background: radial-gradient(circle at center, #1b2735 0%, #090a0f 100%);
  color: #e2e8f0; /* Off-white for high, soft contrast text */
  min-height: 100vh;
  margin: 0;
}
.moon {
  width: 100px;
  height: 100px;
  background-color: #f6f1d5;
  border-radius: 50%; /* Makes it a circle */
  
  /* Creates both an internal shadow for texture and an external soft glow */
  box-shadow: 
    inset -10px 0 15px rgba(0, 0, 0, 0.2), 
    0 0 30px rgba(246, 241, 213, 0.4), 
    0 0 60px rgba(246, 241, 213, 0.2);
}
.night-overlay-image {
  /* Lowers brightness, increases contrast slightly, and injects a cold, dark blue tint */
  filter: brightness(0.4) contrast(1.1) sepia(0.3) hue-rotate(180deg);
}
/* Default Day Mode colors */
:root {
  --bg-color: #ffffff;
  --text-color: #1a202c;
}

/* Automatic Night/Dark Mode swap */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0b0f19;
    --text-color: #f7fafc;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}
.stars {
  width: 2px;
  height: 2px;
  background: transparent;
  /* Multiple box shadows mimic hundreds of random small stars */
  box-shadow: 
    150px 200px #fff, 
    340px 120px #fff, 
    560px 450px #e2e8f0, 
    820px 250px #fff, 
    930px 600px #cbd5e1;
  border-radius: 50%;
  animation: twinkle 3s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}