body {
  background-image: url('../Images/search_BG.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

#wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

input {
  font-size: 1rem;
}
#Indexes {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  margin-bottom: 20px;
}
#Indexes ul {
  display: flex;
}
#Indexes strong,
b,
a,
u {
  padding-right: 20px;
}

.hide {
  display: none;
}

/* Media Query for Phones (screen width up to 600px) */
@media only screen and (max-width: 600px) {
  body {
    background-size: cover; /* Ensure background covers the screen */
    background-position: center; /* Center the background image */
    background-repeat: repeat;
  }

  #wrapper {
    gap: 1rem; /* Increase gap for spacing on smaller screens */
    padding: 0 1rem; /* Add horizontal padding to ensure content isn't too close to screen edges */
  }

  input {
    font-size: 1.2rem; /* Increase input font size for readability */
    width: 100%; /* Make input take full width on mobile */
  }

  #Indexes {
    margin: 10px 0; /* Adjust vertical margins */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center the content */
    align-items: center; /* Center align the flex items */
  }

  #Indexes ul {
    flex-direction: column; /* Stack list items vertically */
    width: 100%; /* Make the list take full width */
    padding: 0; /* Remove extra padding */
  }

  #Indexes strong,
  b,
  a,
  u {
    padding-right: 10px; /* Reduce padding */
    display: block; /* Ensure each item takes a new line */
    text-align: center; /* Center-align text for better mobile layout */
  }

  .hide {
    display: none; /* Keep hidden elements hidden */
  }
}