/* Reset and Base Styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh; /* Ensures the body takes at least the full viewport height */
  background: linear-gradient(135deg, #f06, #ffba00);
  font-family: system-ui, sans-serif;
  padding: 2rem 2%; /* Adjusted padding for better spacing */
}

header {
  width: 100%;
  text-align: center;
  margin-bottom: 2rem; /* Adjust spacing below the header */
}

/* Title Styles */
#gallery-title {
  font-family: 'Roboto Slab', serif;
  font-size: 2rem; /* Adjusted font size for balance */
  color: white; /* White text color */
  text-transform: capitalize;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  border-radius: 0.75rem;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  text-align: center;
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* Creates black border */
}

.gallery {
  --_size: 19%;
  --_gap: 1rem;
  width: 100%;
  max-width: 90%;
  margin: 0 auto; /* Centers the gallery container horizontally */
  display: grid;
  gap: var(--_gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--_size), 1fr));
  justify-content: center; /* Centers the grid items within the gallery */
}

.gallery article {
  position: relative;
  overflow: hidden;
  border-radius: 2%;
  border: 1px solid white;
}

.gallery img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: sepia(25%);
  transition: filter 500ms, transform 500ms, border-radius 500ms, border 500ms;
  border: 1px solid white;
  cursor: pointer;
  border-radius: 2%;
}

.gallery img:hover {
  filter: sepia(0);
  transform: scale(1.05);
}

/* Author Information Styles */
.gallery > article > div {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #00000070;
  font-size: 0.65rem;
  color: white;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem 0.5rem;
  transform: translateY(20px);
  transition: transform 500ms ease-in-out 300ms;
}

.gallery > article:hover > div {
  transform: translateY(0);
}

.gallery > article > div > span {
  font-size: 0.7rem;
  color: red;
}

/* Overlay styles */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Dim the background */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 500ms, backdrop-filter 500ms; /* Smooth transition */
  backdrop-filter: blur(30px); /* Apply 30px blur to the background */
}

/* Show overlay */
.overlay.show {
  display: flex;
  opacity: 1;
}

/* Updated Overlay Image Styles for Smooth Transition */
.overlay-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  border: 1px solid white;
  transform: scale(0); /* Initial scale */
  transition: transform 0.8s ease, opacity 0.8s ease; /* Smooth transition */
  opacity: 0; /* Initial opacity */
}

.overlay.show .overlay-img {
  transform: scale(1); /* Full scale */
  opacity: 1; /* Full opacity */
}

/* Hide home button when overlay is active */
.overlay.show ~ .home-button {
  opacity: 0; /* Hide the home button */
  pointer-events: none; /* Disable clickability */
}

.overlay.show ~ #floating-play-btn {
  display: none; /* Hide the play button */
}

/* Scroll down text styles */
.scroll-down {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  animation: fadeInOut 2s infinite;
  font-family: 'Arial', sans-serif;
}

.scroll-down p {
  font-size: 1rem;
  animation: bounce 2s infinite;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 12px;
  display: inline-block;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.hidden {
  display: none;
}

/* hearts */
.material-fill-1 {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

/* Media Queries for Responsive Design */
@media (max-width: 1200px) {
  body {
    padding: 4rem 5%;
  }

  .gallery {
    --_size: 45%;
  }
}

@media (max-width: 768px) {
  body {
    padding: 3rem 5%;
  }

  .gallery {
    --_size: 70%;
  }

  #gallery-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  body {
    padding: 2rem 5%;
  }

  .gallery {
    --_size: 90%;
  }

  #gallery-title {
    font-size: 1.2rem;
  }
}

/* Home Button Styles */
.home-button {
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: linear-gradient(135deg, #f06, #ffba00);
  color: white;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  z-index: 1001;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  opacity: 1; /* Ensure the button is visible by default */
}

.home-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 60%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
  border-radius: 50%;
}

.home-button:hover {
  background: linear-gradient(135deg, #ffba00, #f06);
  transform: scale(1.1);
}

.home-button:active::before {
  transform: translate(-50%, -50%) scale(1);
}

.home-button .material-symbols-outlined {
  font-size: 1.5rem;
}

/* Flash effect on click */
@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.home-button:active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  animation: flash 0.2s ease-out;
  border-radius: 50%;
}

/* Navigation Arrow Styles */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.nav-arrow svg {
  fill: white;
  width: 24px;
  height: 24px;
}

.nav-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(0, 0, 0, 0.7);
}

.nav-arrow.left {
  left: 10px;
}

.nav-arrow.right {
  right: 10px;
}

/* Floating Play Button Styles */
.floating-play-btn {
  position: fixed;
  top: 5rem; /* Position it right under the home button */
  left: 1rem; /* Align with the home button */
  background: linear-gradient(135deg, #f06, #ffba00);
  color: white;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2000; /* Ensure it's above other elements */
}

.floating-play-btn:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.floating-play-btn svg {
  width: 1.5rem; /* Adjust the icon size */
  height: 1.5rem;
}

/* Show Pause Icon */
.floating-play-btn.pause #play-icon {
  display: none;
}

.floating-play-btn.pause #pause-icon {
  display: block;
}

/* Fullscreen slideshow modal */
.slideshow-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* Completely dark background */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.slideshow-modal.show {
  display: flex;
}

/* Slideshow image styles */
.slideshow-image {
  max-width: 90%; /* Keep some margin */
  max-height: 90%; /* Keep some margin */
  object-fit: contain; /* Ensure the image retains its aspect ratio */
  border: 1px solid white; /* Thin white border */
  border-radius: 0px; /* No rounding for better aesthetics */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Subtle glow effect */
  opacity: 0;
  transform: scale(0.95); /* Slight zoom-out before transition */
  transition: opacity 1s ease, transform 1s ease;
}

.slideshow-image.show {
  opacity: 1;
  transform: scale(1); /* Zoom in smoothly */
}

/* Close button for slideshow */
.slideshow-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.slideshow-close:hover {
  color: #f06;
}