* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
      /* ALL CODING ON THIS PAGE RELATES TO THE THUMBNAIL PAGES AND LARGER LIGHTBOX IMAGES*/

/*START Thumbnail Page Styling*/
.thumbnail-page {
  background-image: url("../images/WoodyLightRender.jpg");
  background-size: cover;         /* or use "contain" or "auto" */
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;              /* ensures full vertical coverage */
  padding: 40px 0;                /* space around the gallery */
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 40px;
  justify-content: center;
  margin-top: 25px;
  
}

.gallery img {
  width: 150px;                /* fixed width */
  height: 112px;
  object-fit: cover;               /* fills the 150x100 box by cropping */
  border-radius: 8px;              /* soften corners */
  flex-shrink: 0; /* 🔑 Prevents flex from squishing them while loading */
  background-color: #FFFFFF;       /* match body background */
 /* position: relative; */
  z-index: 1;
  cursor: pointer;
                                                /* 6px 0 → casts a horizontal shadow to the right */
  box-shadow:                                   /* then 0 6px → casts a vertical shadow to the bottom*/
    6px 0 10px -2px #060100,   /* right */    /* 10px → softens the shadow*/
  0 6px 10px -1px #060100;   /* bottom */     /* -2px → pulls it in slightly, so it doesn’t feel too wide*/
                                                /* rgba(0, 0, 0, 0.4) → semi-transparent black*/

}
/*END Thumbnail Page Styling*/

/*START Flipbook (Turn Page) Styling*/

/* Overlay setup */
#flipbook-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000; /* Changed to black for better contrast */
                            /* background: rgba(0,0,0,0.85); Would be slightly transparent */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

/* Flipbook wrapper */
#flipbook-wrapper {
  position: relative;
}

/* Flipbook container */
#flipbook {
  width: 800px;
  height: 600px;
  background: #000;
}

/* Page styling - this refers to the flip book page - the container*/
.page {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page img {
  max-width: 100%;
  max-height: 80%;
  border: 4px solid white;
}

.caption {
  padding: 10px;
  font-size: 1.1em;
  color: white;
  background: rgba(0,0,0,0.5);
  margin-top: 10px;
  text-align: center;
  width: 90%;
}

/* Album Navigation Button Styling */
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid #FF9933;
  font-size: 18px;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1001;
}

/* Styling on screen Navigation Buttons */
#close-flipbook {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  background: red;
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
}

#prev-page {
  left: 20px;
}

#next-page {
  right: 20px;
}

.nav-button:hover {
  background: rgba(255,255,255,0.3);
}

/*END Flipbook (Turn Page) Styling*/

/*START Lightbox (Large Image) Styling*/

#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;

}

#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid white;
  border-radius: 8px;
  box-shadow: 0 0 25px black;
}

.enlarge-note {
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6); 
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: 5px;

}

/* For fading out the enlarge note duplicated
.enlarge-note {
  opacity: 1;
  transition: opacity 0.5s ease;
}    */

.enlarge-note.fade-out {      /* Not in use yet - Class to apply fade-out effect */
  opacity: 0;
}

.fade-out {                    /* Not in use yet - Class to apply fade-out effect */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Close button for lightbox */
#lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 36px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}