/* Container Styles */
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* Previous Gallery Image Styles */
#previous-gallery {
  display: none;
  width: 100%;
  position: relative;
  top: 75px;
  text-align: center;
  margin-bottom: 0px;
}

#previous-gallery img {
  width: 100px;
  height: auto;
}

/* New Carousel Styles */
#carousel {
  width: 100%;
  height: 600px;
  perspective: 650px;
  margin-top: 100px; 
}

.carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: transparent; /* Make the background transparent */
}

.carousel-item img {
  width: 32px;
  height: 32px;
  transition: transform .001s ease;  /* Add this line for smooth scaling */
  padding: 1px;  /* Add padding around the image */
  background-color: #b3ffff;  /* Set the background color */
  border-radius: 1px
  /*box-sizing: border-box;  *//* Include padding in width and height */
}

/* Label under the carousel image */
.carousel-item .image-label {
  position: absolute;
  bottom: -30px;  /* Adjust this to move the label down */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background-color: transparent;  /* Make the label background transparent */
  padding: 2px;
  border-radius: 10px;
  white-space: nowrap;  /* Prevent text from wrapping onto multiple lines */
}

/* Subfolder Representation Styles */
#subfolders {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 5%;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#subfolders img {
  width: 100px;
  height: auto;
}

.subfolder, .subfolder a {
  margin: 0 10px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

/* Background color for the body */
body {
  background-color: #0a0208;
}