/* General resets and body styling */
html,
body {
  margin: 0;
  height: 100%;

  color: white;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
body a{
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

body {
  background: radial-gradient(circle at center, #1e0033, #000);
  animation: skyShift 60s ease-in-out infinite;
}

/* background breathing animation */
@keyframes skyShift {
  0% {
    background: radial-gradient(circle at center, #1e0033, #000010);
  }

  50% {
    background: radial-gradient(circle at center, #33004d, #000022);
  }

  100% {
    background: radial-gradient(circle at center, #1e0033, #000010);
  }
}

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sun,
.moon {
  position: absolute;
  /* top: 55%; */
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: opacity 1s ease;
}

.sun {
  width: 20vmin;
  height: 20vmin;
  background: radial-gradient(circle, #ffd15c, #ff9900 70%);
  box-shadow: 0 0 60px #ffcc66;
  opacity: 1;
}

.moon {
  width: 18vmin;
  height: 18vmin;
  background: radial-gradient(circle, #dfe9ff, #7b8cff 80%);
  box-shadow: 0 0 40px #99aaff;
  opacity: 0;
}

h1 {
  margin-top: 25vh;
  font-size: clamp(1.5rem, 5vw, 3rem);
  letter-spacing: 0.05em;
}

#countdown {
  font-size: clamp(1rem, 4vw, 2rem);
  margin-top: 10rem;
  font-weight: 300;
}

#astro-info {
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

#about {
  color: rgba(255, 255, 255, 0.4);
  
  font-size: 0.9rem;
  margin-top: 2rem;
  display: inline-block;
  transition: color 0.3s ease;
}

footer{ 
  text-decoration: none;
  padding: 1rem;
  width: 100%;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

footer a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.3s ease;
} 

main#privacy{
  text-align: left;
  padding: 1.5rem;
  margin-bottom: 2rem;
  max-width: 640px;
}

.celestial-line {
  width: 40%;
  margin: 3rem auto 1rem;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.03);
}

.sun-label,
.moon-label {
  opacity: 0.85;
  font-weight: 300;
}

.sun-sign {
  color: #ffd56b;
  /* warm gold */
  text-shadow: 0 0 10px rgba(255, 200, 90, 0.5);
  font-weight: 500;
}

.sun-sign,
.moon-sign {
  animation: subtlePulse 6s ease-in-out infinite;
}

.moon-sign {
  color: #a7baff;
  /* soft moonlight blue */
  text-shadow: 0 0 10px rgba(160, 180, 255, 0.5);
  font-weight: 500;
}

@keyframes subtlePulse {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }

  50% {
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
  }
}

/* --- Subtle themed AdSense styling --- */
.ad-sky {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4) inset;
}

.ad-frame {
  max-width: 420px;
  width: 320px;
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(200, 200, 255, 0.05);
  transition: box-shadow 0.6s ease-in-out;
}

.ad-frame:hover {
  box-shadow: 0 0 20px rgba(255, 240, 180, 0.1);
}