/* Custom styles to improve text visibility while preserving design */

/* Adjust planet description positioning */
body .solar_systm .planet_description {
  position: relative;
  top: -30px; /* Reduced from -60px to move descriptions further down */
  max-width: 580px; /* Ensure text fits within container */
  margin: 0 auto;
}

/* Make text slightly more compact */
body .solar_systm .planet_description p {
  line-height: 22px; /* Reduce line height slightly */
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 9.8px; /* Slightly larger than before */
}

/* Adjust heading spacing */
body .solar_systm .planet_description h1 {
  margin-bottom: 5px;
}

body .solar_systm .planet_description h2 {
  margin-top: 60px; /* Increased from 50px to move content further down */
}

/* Improve "Enter" button positioning */
body .solar_systm .planet_description a {
  margin-top: 5px;
  display: inline-block;
}

/* Adjust planet vertical position */
body .solar_systm .planet {
  bottom: -920px; /* Adjusted from -900px to move planets further down */
}

/* Ensure overlay follows planet position */
body .overlay {
  top: -240px; /* Adjusted from -220px to match planet position */
}

/* Add styles for the "building" message */
.building-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px 40px;
  border-radius: 5px;
  font-size: 18px;
  z-index: 1000;
  animation: fadeIn 0.5s;
}

.building-message.fade-out {
  animation: fadeOut 1s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}