/******************************************************
 * Container for each slideshow (prefix: slideshow-)
 ******************************************************/
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 600px;  
  height: 400px; /* adjust as needed */
  margin: 50px auto; 
  overflow: hidden; 
  background-color: #f0f0f0; /* optional, to visualize the container */
  border-radius: 15px;
}

/******************************************************
 * The single <img> in each slideshow
 * We use max-width & max-height so images aren’t cropped.
 ******************************************************/
.slideshow-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  border-radius: 15px;
}

/******************************************************
 * Animations (prefix them if desired, but not required)
 ******************************************************/
/* Fade In */
.fade {
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide In from the Right */
.slide-left {
  animation: slideLeft 1s ease forwards;
}
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translate(100%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Slide In from the Left */
.slide-right {
  animation: slideRight 1s ease forwards;
}
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translate(-200%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Zoom In */
.zoom-in {
  animation: zoomIn 1s ease forwards;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/******************************************************
 *  * THEME-BASED OVERRIDES
 *   ******************************************************/

/* If body has 'light-mode' class */
.light-mode .slideshow-container {
	  background-color: #f8f8f8; /* or any other light-friendly color */
  }

  /* If body has 'dark-mode' class */
  .dark-mode .slideshow-container {
	    background-color: #333333; /* or any other dark-friendly color */
    }

    /* If body has 'light-mode' class */
    .light-mode a {
	      color: #007bff; /* any visible color for light background */
	        text-decoration: underline; /* or none, your preference */
	}

	/* If body has 'dark-mode' class */
	.dark-mode a {
		  color: #70bfff; /* brighter color for better contrast on dark background */
		    text-decoration: underline; /* or none, your preference */
	    }