@font-face {
    font-family: 'Playfair Display';
    src: url('/static/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 1 999;
    font-style: normal;
  }
  
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Playfair Display', serif;
    font-optical-sizing: auto;
    transition: background-color 1.5s ease-in-out, color 1.5s ease-in-out; /* Smooth transition */
}

.day-mode {
    background-color: #ffffff;
    color: #000000;
}

.twilight-mode {
    background-color: #0A2940; /* Dark blue background */
    color: #a3a2a2; /* Light grey text */
}

.night-mode {
    background-color: #000000; /* Black background */
    color: #929292; /* Grey text */
}

#solarInfo {
    font-size: clamp(4em, 13vw, 18em);
    font-weight: 800;
    text-align: center;
    margin: 20px 0;
}

.bottom-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Space between special event and lunar info */
}

#specialEvent {
    font-size: 2em;
    font-style: italic;
    text-align: center;
}

#lunarInfo {
    font-size: 2em;
    text-align: center;
    white-space: nowrap;
}

/* Loading and Error State Styles */
.message-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  text-align: center;
}

.message-state p {
  font-size: 1.5rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* Loading state specific */
#loadingState p {
  color: inherit; /* Use theme color */
}

/* Error state specific */
#errorState {
  background-color: #2a2a2a;
}

#errorState p {
  color: #ff6b6b;
  font-weight: 500;
}

/* Smooth transitions between states */
#loadingState,
#errorState,
#mainContent {
  transition: opacity 0.3s ease-in-out;
}

/* Optional: Add a subtle loading animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

#loadingState p {
  animation: pulse 2s ease-in-out infinite;
}