body {
  background-image: url("background.png");
  background-color: white;
  background-size: cover; /* Ensures the image covers the entire screen */
  background-position: center; /* Centers the background image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-attachment: fixed; /* Keeps the background fixed when scrolling */
}

.container {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 50px auto;
}

button {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 2rem;
  background-color: hsl(0, 0%, 75%);
  color: black;
  border: black solid 2px;
  border-radius: 10px;
  cursor: pointer;
}

input {
  padding: 10px;
  font-size: 2rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 10px;
  margin: 10px;
  width: 350px;
}

.sprite {
  min-width: 200px;
  min-height: 200px;
  background-color: white;
  border: black solid 2px;
  border-radius: 200px;
}

p {
  background-color: white;
  border: black solid 2px;
  border-radius: 10px;
  color: black;
  padding: 10px; /* More padding for better spacing */
  display: none;
  max-width: 80%; /* Prevents it from stretching too wide */
  text-align: center; /* Centers text inside the <p> */
  margin: 10px auto; /* Ensures it's centered within its parent */
}

/* Style for the Pokémon type image */
.type-icon {
  width: 24px;
  height: 24px;
}