body {
  font-family: Arial, sans-serif;
  background-color: rgb(34, 109, 170);
  color: white;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.search-container {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  background-image: url('/img/banner.png');
  /* Add this */
  background-size: contain;
  /* Ensures the image covers the entire container */
  background-repeat: no-repeat;
  background-position: center;
  /* Centers the image */
  padding: 40px 0;
  /* Adds some padding to ensure content isn't too close to edges */
}

#searchBox {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid rgb(25, 90, 145);
  border-radius: 4px 4px 0 0;
  /* Rounded corners only on top for a seamless transition to suggestions */
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  z-index: 2;
}

#searchBox:focus {
  border-color: rgb(54, 129, 200);
  outline: none;
}

.suggestions {
  display: none;
  position: absolute;
  top: 100%;
  /* Position below the search box */
  left: 50%;
  /* Center the suggestions box */
  transform: translateX(-50%);
  /* Adjust for exact centering */
  width: calc(50% + 4px);
  /* Match width of searchBox plus border */
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid rgb(25, 90, 145);
  border-top: 0;
  /* No border on top since it connects with searchBox */
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  z-index: 1;
  /* Ensure it's above other elements */
  border-radius: 0 0 4px 4px;
  /* Rounded corners on bottom */
}

.suggestions ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.suggestions li {
  padding: 10px;
  cursor: pointer;
}

.suggestions li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* ... rest of your CSS ... */
nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

.results-container {
  display: flex;
}

.result-list {
  flex: 1;
  margin-right: 20px;
}

.detail-view {
  flex: 2;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 5px;
  display: none;
}

.result-item {
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.result-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.footer {
  background-color: rgba(25, 90, 145, 0.7);
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer p {
  margin: 0;
  font-size: 0.9em;
}