body {
  margin: 0;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to top to allow scrolling */
  padding: 3rem 1rem; /* Add padding for better spacing */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Main theme background for the whole page */
  box-sizing: border-box; /* Include padding in element's total width and height */
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem; /* mb-8 */
}

.header-section h1 {
  font-size: 2.5rem; /* Updated font size */
  font-weight: 700; /* font-bold */
  color: #374151; /* text-gray-800 */
  margin: 0;
}

.main-content {
  max-width: 72rem; /* Equivalent to max-w-6xl */
  width: 100%;
  background-color: white;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
  padding: 2rem; /* p-8 */
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* space-y-10 */
  box-sizing: border-box;
  margin-top: 2rem; /* Push down below sticky header */
  margin-bottom: 3rem; /* Add some space at the bottom */
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  height: 2.5rem; /* h-10 */
  padding: 0 1rem; /* px-4 */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  text-decoration: none; /* For anchor tags */
}

.button-primary {
  background-color: #8b5cf6; /* bg-purple-600 */
  color: white; /* text-white */
  border: none;
}

.button-primary:hover {
  background-color: #7c3aed; /* hover:bg-purple-700 */
}

.category-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: 1rem; /* gap-4 */
  margin-bottom: 2rem;
  justify-content: center; /* Center buttons */
}

.category-button {
  background-color: #e5e7eb; /* bg-gray-200 */
  color: #4b5563; /* text-gray-700 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  display: inline-flex; /* Align icon and text */
  align-items: center;
  gap: 0.5rem; /* Space between icon and text */
}

.category-button:hover {
  background-color: #d1d5db; /* hover:bg-gray-300 */
}

.category-button.active {
  background-color: #8b5cf6; /* Active state color */
  color: white;
  border-color: #8b5cf6;
}

.art-category-section {
  margin-top: 1.5rem; /* space-y-6 */
  display: none; /* Hidden by default, controlled by JS */
}

.art-category-section.active {
  display: block; /* Show when active */
}

.art-category-section h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600; /* font-semibold */
  color: #4b5563; /* text-gray-700 */
  border-bottom: 1px solid #e5e7eb; /* border-b */
  padding-bottom: 0.5rem; /* pb-2 */
  margin-bottom: 1.5rem; /* space-y-6 */
}

.art-category-section p {
  color: #4b5563; /* text-gray-600 */
  margin-bottom: 1.5rem; /* space-y-6 */
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
  gap: 1.5rem; /* gap-6 */
}

.art-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  aspect-ratio: 4 / 3; /* Maintain aspect ratio for images */
  cursor: pointer; /* Indicate clickability */
}

.art-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out; /* transition-transform duration-300 */
}

.art-item:hover img {
  transform: scale(1.05); /* group-hover:scale-105 */
}

.art-item-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* bg-black bg-opacity-40 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* opacity-0 */
  transition: opacity 0.3s ease-in-out; /* transition-opacity duration-300 */
}

.art-item:hover .art-item-overlay {
  opacity: 1; /* group-hover:opacity-100 */
}

.art-item-overlay span {
  color: white; /* text-white */
  font-size: 1.125rem; /* text-lg */
  font-weight: 500; /* font-medium */
}

/* Lightbox Styles */
.lightbox {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2000; /* Sit on top of everything */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Prevent scrollbars on lightbox */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* Ensure the whole image is visible without cropping */
}

.lightbox-close {
  position: absolute;
  top: 1.5rem; /* 24px */
  right: 2rem; /* 32px */
  color: #f1f1f1;
  font-size: 2.5rem; /* 40px */
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 2001; /* Ensure close button is clickable */
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem; /* Larger arrows */
  color: #f1f1f1;
  cursor: pointer;
  padding: 0.5rem 1rem;
  user-select: none; /* Prevent text selection */
  transition: 0.3s;
  z-index: 2001;
}

.lightbox-nav.prev {
  left: 1.5rem;
}

.lightbox-nav.next {
  right: 1.5rem;
}

.lightbox-nav:hover {
  color: #bbb;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .header-section h1 {
    font-size: 1.75rem; /* text-3xl on small screens */
  }
  .main-content {
    padding: 1.5rem;
    margin-top: 1rem; /* Adjust margin for smaller header */
  }
  .category-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .category-button {
    width: 100%;
  }
  .lightbox-close {
    font-size: 2rem;
    top: 1rem;
    right: 1rem;
  }
  .lightbox-nav {
    font-size: 2rem;
    padding: 0.25rem 0.5rem;
  }
  .lightbox-nav.prev {
    left: 0.5rem;
  }
  .lightbox-nav.next {
    right: 0.5rem;
  }
}