styles.css

body {
  background-image: url(https://assets.codepen.io/12465361/DeathStar.png?format=auto);
  background-size: cover; /* Ensure the background image covers the entire screen */
  color: blue;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1 {
  font-family: cursive;
  font-size: 2.5rem; /* Reduced font size for better readability on smaller screens */
  font-weight: 900;
  text-shadow:
  1px 1px 0 red,
  -1px 1px 0 red,
  1px -1px 0 red,
  -1px -1px 0 red;
  text-align: center;
  margin: 10px;
}

button {
  background-color: red;
  color: blue;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem; /* Slightly smaller font size for better fit */
  font-family: cursive;
  text-shadow:
  1px 1px 0 white,
  -1px 1px 0 white,
  1px -1px 0 white,
  -1px -1px 0 white;
  margin: 10px 0;
}

button:hover {
  background-color: blue;
  transition: background-color 1s;
}

#planets, #planetClimateList {
  font-size: 1.5rem; /* Reduced font size for better readability */
  color: blue;
  font-family: cursive;
  text-shadow:
  1px 1px 0 red,
  -1px 1px 0 red,
  1px -1px 0 red,
  -1px -1px 0 red;
  text-align: center;
  margin: 10px;
}

#starWarsContainer, #starWarsDataContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}

h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 2rem; /* Adjusted for better readability */
  text-align: center;
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
  h1 {
      font-size: 2rem;
  }

  button {
      font-size: 1rem;
      padding: 8px 12px;
  }

  #planets, #planetClimateList {
      font-size: 1.2rem;
  }

  h2 {
      font-size: 1.5rem;
  }
}