/* General Styles */
body, html {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #7f7f7f;
  min-width: 960px;
  /* overflow: hidden; */
  height: 100%;
}
/* Header */
header {
  text-align: center;
  padding: 20px;
  background-color: #7f7f7f;
}

#artist-name {
  font-size: 24px;
  color: #b22525;
  margin: 0;
}

#artist-description {
  font-size: 12px;
  color: #FFFFFF;
  margin: 0;
}
/* Navigation Menu */
#main-menu {
  background: #ccc;
  padding: 10px;
  text-align: center;
}

#main-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#main-menu .menu-item {
  display: inline-block;
  position: relative;
  margin: 0 10px;
}

#main-menu .menu-item a {
  text-decoration: none;
  color: #b22525;
  font-size: 16px;
  padding: 10px;
  display: block;
}
#main-menu .submenu {
  display: none;
  position: absolute;
  background: #ccc;
  padding: 10px;
  top: 100%;
  left: 0;
  z-index: 1000;
  border: 1px solid #999; /* Add a subtle border */
}
#main-menu .menu-item:hover .submenu {
  display: block; /* Show submenu on hover */
}
/* #main-menu .submenu.active {
  display: block;
} */

#main-menu .submenu li {
  margin: 5px 0;
}

#main-menu .submenu a {
  font-size: 14px;
  color: #000;
}

/* Page Title */
.page-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 1.25em; /* 20px equivalent */
  background: #7f7f7f;
  border-bottom: 1px solid #ccc;
}

.page-title p {
  margin: 0;
}

#u1849-2 {
  font-size: 2rem; /* 1rem = 16px by default */
  color: #b22525;
  /* text-shadow: 
    -1px -1px 0 white,  
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white; Outline effect */
}

#u1849-4 {
  font-size: 0.875rem; /* 14px equivalent */
  color: #FFFFFF;
}

/* Home Icon Styles */
.home-icon {
  position: absolute; /* Position the icon absolutely */
  top: 20px; /* Adjust the distance from the top */
  left: 20px; /* Adjust the distance from the left */
  z-index: 1000; /* Ensure it appears above other elements */
}

.home-icon a {
  text-decoration: none; /* Remove underline from the link */
  color: #000; /* Set the color of the icon */
  font-size: 24px; /* Adjust the size of the icon */
}

.home-icon img {
  width: 3em; /* 48px equivalent (1em = 16px) */
  height: 3em; /* 48px equivalent */
}


/* Main Content Container */
/* .main-content {
  text-align: center;
  padding: 20px;
  /* display: flex;
  flex: 1; */
  .main-content {
    display: flex; /* Ensure the container uses flexbox */
    flex-direction: row; /* Align children horizontally */
    justify-content: space-between; /* Space out the children */
    align-items: flex-start; /* Align items at the top */
    padding: 20px;
    height: calc(100vh - 150px); /* Adjust height to fit within the viewport */
    overflow: hidden; /* Prevent scrolling of the main container */
    /* flex: 1; /* Allow the container to grow and shrink */
    /* min-height: 0; Prevent overflow */
  }

#artist-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 80px 80px;
}

#artist-image img {
  width: 383px; /* 15% larger than original 333px */
  height: 510px; /* 15% larger than original 443px */
  /* border: 2px solid white; Fine white outline */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
}
#fullSizeImage {
  max-width: 100%;
  max-height: 75vh;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  object-fit: contain; /* Ensure the image maintains its aspect ratio */
}
/* #artist-image img {
  max-width: 100%;
  height: auto;
} */
/* Left Side: Thumbnail Grid */
.thumbnail-grid {
  /* min-width: 200px; Flexible width for the container */
  width: 30%;
  padding: 0.5em 1em 0.5em 0.5em; /* Relative to font size */
  background: #7f7f7f;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(5em, 1fr)); /* Flexible columns (5em = ~80px at 16px base) */
  grid-auto-rows: minmax(6.25em, auto); /* Flexible rows (6.25em = ~100px at 16px base) */
  gap: 0.5em; /* Use relative units for spacing */
  /* height: 100%; */
  align-items: start; /* Align items to the top */
  max-height: 80vh; /* Increased from 70vh to 80vh */
  border: 2px;
}

.thumbnail-grid img {
  width: 100%; /* Make thumbnails fill the grid cell */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure thumbnails don’t exceed cell width */
  object-fit: contain; /* Maintain aspect ratio without distortion */
  cursor: pointer;
  border: 0.125em solid transparent; /* Relative border size (0.125em = ~2px at 16px base) */
  transition: border-color 0.3s ease;
  padding: 0.25em;
}

.thumbnail-grid img:hover {
  border-color: #333;
}

/* Right Side: Full-Size Image Display */
.image-display {
  width: 70%;
  padding: 10px;
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  justify-content: flex-start; /* Align content to the top */
  align-items: center;
  background: #7f7f7f;
  overflow: hidden; /* Add scroll if content overflows */
  height: auto;
}

.image-display img {
  max-width: 100%;
  max-height: 75vh; /* Use viewport height for scaling */
  object-fit: contain; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Caption Styling */
.image-caption {
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
#about {
  text-align: left;
  padding: 5em 6.25em; /* 80px 100px equivalent */
  background: #7f7f7f;
  border-top: 1px solid #ccc;
  font-size: 18px;
  color: #ccc;
}
/* Footer */
#footer {
  text-align: center;
  padding: 0.625em 1.25em; /* 10px 20px equivalent */
  background: #ccc;
  border-top: 1px solid #ccc;
  font-size: 0.75rem; /* 12px equivalent */
  color: #333;
  flex-shrink: 0; /* Prevent footer from shrinking */
}
/* General Responsive Adjustments */
@media (max-width: 1024px) {
  /* Adjust layout for tablets and smaller screens */
  .main-content {
    flex-direction: row; /* Stack thumbnail grid and image display vertically */
  }

  .thumbnail-grid {
    width: 30%; /* Full width for smaller screens */
    grid-template-columns: repeat(2, 1fr); /* Maintain 3 columns */
    gap: 2px;
  }

  .image-display {
    width: 70%; /* Full width for smaller screens */
    padding: 10px; /* Reduce padding */
    max-height: 80vh; /* Adjust max height */
  }
  .image-display img {
    max-height: 80vh; /* Further reduce image height */
  }
}
@media (max-width: 768px) {
  .thumbnail-grid {
    width: 40%; /* Increase width for smaller screens */
    grid-template-columns: repeat(2, minmax(4em, 1fr)); /* 2 columns with flexible sizing (4em = ~64px at 16px base) */
    grid-auto-rows: minmax(5em, auto); /* Smaller rows (5em = ~80px at 16px base) */
    gap: 1em; /* Add spacing between thumbnails */
    max-height: 70vh; /* Increased from 60vh to 70vh */
  }
  .image-display {
    width: 60%; /* Further adjust width for smaller screens */
    max-height: 70vh; /* Allow more height for larger images */
  }
  .thumbnail-grid img {
    width: 100%; /* Make thumbnails fill the grid cell */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure thumbnails don’t exceed cell width */
    padding: 0.5em; /* Increase padding inside thumbnails */
  }
  .page-title {
    font-size: 20px; /* Reduce title size */
  }
  .image-display img {
    max-height: 70vh; /* Further reduce image height */
  }

@media (max-width: 480px) {
  /* Adjust layout for mobile phones */
  .thumbnail-grid {
    width: 40%; /* Full width for mobile screens */
    grid-template-columns: repeat(1, minmax(4em, 1fr)); /* 1 column with flexible sizing (4em = ~64px at 16px base) */
    gap: 1em; /* Reduce gap between thumbnails */
    max-height: 60vh; /* Increased from 50vh to 60vh */
  }
  .thumbnail-grid img {
    max-width: 100%; /* Ensure thumbnails don’t exceed cell width */
    padding: 0.5em; /* Increase padding inside thumbnails */
  }
  .page-title {
    font-size: 18px; /* Further reduce title size */
  } 
  .image-display {
    width: 60%; /* Full width for mobile screens */
    padding: 10px; /* Reduce padding for smaller screens */
    max-height: 60vh; /* Further reduce max height to prevent overflow */
  }
  .image-display img {
    max-height: 60vh; /* Further reduce image height for mobile screens */
  }
  .image-caption {
    font-size: 14px; /* Reduce caption font size for mobile screens */
  }
  /* Ensure the footer is always visible */
  #footer {
    padding: 10px; /* Reduce footer padding for smaller screens */
    font-size: 12px; /* Reduce footer font size for smaller screens */
  }
}