/* Basic styling for the page */
body {
  background-color: #2d2236;
  color: #cfc2ba;
  font-family: Courier;
}

.header {
  text-align: center;
}

/* Styling for links */
a {
  color: #c78c65;
}

/* Styling for the description below each gallery item */
.desc {
  padding: calc(.85vw + .85vh + .2rem);
  text-align: center;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 1;
  margin-top: calc(.85vw + .85vh + .2rem);;
}

/* Flexbox container for the gallery */
.gallery-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next row */
  justify-content: space-around; /* Space out items evenly */
  gap: 2%; /* Adds space between items */
  max-width: 100%;
  margin: 0 auto;
  padding:2%;
  
}

/* Styling for individual gallery items */
div.gallery {
  flex: 0 1 18%; /* Adjust this as needed */
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* Row styling for horizontal scrolling */
.row {
  display: flex;
  flex-wrap: nowrap; /* Prevents items from wrapping to the next line */
  overflow-x: auto; /* Enables horizontal scrolling */
  gap: 2%; /* Optional: Adds space between items */
  padding: 1% 1%; /* Optional: Adds padding around the row */
}

/* Hover effect for gallery items */
div.gallery:hover {
  color: #75688c;
}

/* Styling for images and videos in the gallery */
div.gallery img, div.gallery video {
  width: 100%;
  height: auto;
}

/* Spoiler styling */
.spoiler img {
  filter: blur(40px);
  transition: filter 0.3s;
  z-index:2;
  display: block
}

/* Spoiler overlay text */
.spoiler-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
  z-index:1
}

.img-container {
  display: flex; /* Enable Flexbox */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally (optional) */
}

.spoiler-nest {
  overflow: hidden;
}

/* When the spoiler is revealed */
.spoiler.revealed img {
  filter: none;
  z-index:2
}

.spoiler.revealed .spoiler-overlay {
  display: none;
}