/* --- Change 1: Increased border radius for smoother rounded container --- */
/* --- Change 2: Darkened and strengthened shadow for better depth --- */
/* --- Change 3: Added light background color to differentiate the gallery area --- */
#all {
  border: 1px solid black;
  border-radius: 30px; /* was 25px */
  position: absolute;
  width: 1000px;
  height: 1100px;
  box-shadow: 5px 5px 15px #777; /* darker, stronger shadow */
  background-color: #fafafa;
}

/* --- Change 4: Adjusted headline spacing and alignment for better centering --- */
/* --- Change 5: Changed headline color for improved contrast --- */
#headline {
  font-size: 3em;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-align: center;
  position: absolute;
  top: 20px; /* was 30px */
  left: 0;
  width: 100%;
  text-decoration: underline;
  color: #333; /* changed from default black */
}

/* Thumbnails container */
/* --- Change 6: Moved thumbnails slightly upward for better spacing --- */
/* --- Change 7: Increased opacity of thumbnails for improved visibility --- */
#thumbnails {
  position: absolute;
  top: 170px; /* was 175px */
  left: 30px; /* was 50px */
  width: 160px; /* was 150px */
  height: auto;
  opacity: 0.9; /* was 0.5 */
}

#thumbnails li {
  list-style: none;
}

/* --- Change 8: Ensured thumbnails wrap properly by constraining width --- */
#thumbnails ul {
  padding: 0;
  margin: 0;
  width: 140px;
}

/* --- Change 9: Increased thumbnail width for better visibility --- */
/* --- Change 10: Added rounded corners to thumbnails for cleaner design --- */
.smallimg {
  width: 110px; /* was 100px */
  margin: 8px; /* was 10px */
  float: left;
  border-radius: 6px;
}

#thumbnails:hover {
  cursor: pointer;
  opacity: 1;
}

/* Large image container */
/* --- Change 11: Adjusted large image position for better centering --- */
#largearea {
  position: absolute;
  top: 150px; /* was 138px */
  left: 260px; /* was 300px */
  width: 700px; /* was 650px */
}

/* --- Change 12: Adjusted main image spacing for cleaner layout --- */
/* --- Change 13: Added rounded corners to the main image --- */
/* --- Change 14: Added max-height so the images don't spill over */
#mainphoto {
  width: 700px; /* was 650 */
  max-height: 800px;
  float: left;
  margin: 40px 15px 40px 0px; /* was 50px 15px 50px 0px */
  border-radius: 10px;
}

/* Caption */
/* --- Change 14: Increased caption text size for readability --- */
/* --- Change 15: Adjusted caption position and color for clarity --- */
#caption {
  font-size: 20px; /* was 18px */
  font-family: Verdana, Geneva, sans-serif;
  text-align: center;
  position: absolute;
  top: 120px; /* was 135px */
  left: 260px; /* was 300px */
  width: 700px; /* was 650 */
  color: #444; /* darker than default */
}