.carousel-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Use the full height of the viewport */
    width: 100%; /* Use the full width of the viewport, can adjust if needed */
  }
  
  .carousel {
    /* Your existing .carousel styles, plus any additional styling needed for centering */
    margin: auto; /* This helps in centering the carousel if its width is defined */
  }

  .carousel img {
    z-index: 1;
    display: block; /* Changes images from inline to block elements */
    margin: auto; /* Automatically centers the block element horizontally */
    max-width: 90%; /* Ensures image does not exceed its container's width */
    max-height: 90vh;
    height: auto; /* Keeps the image's aspect ratio */
    animation: fadeIn 2s;
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

/* Buttons and filename text styling */
.prev, .next {
  z-index: 99;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px 20px;
}

.prev { left: 0; }
.next { right: 0; }

#filename {
  margin: auto;
  text-align: center;
  padding: 10px 0;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}

.prev, .next, .centered-button {
    font-family: Arial, Helvetica, sans-serif;
}
.centered-button {
    display: inline-block; /* Allows the use of padding and margin */
    position: fixed; /* Fixed position */
    top: 10px; /* Distance from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Offset by half of its width to truly center it */
    background-color: gray; /* Button color */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline from link */
    padding: 10px 20px; /* Padding inside the button */
    /*border-radius: 5px; /* Rounded corners */
    /*font-size: 16px; /* Text size */
  }
  
  .prev:hover, .next:hover, .centered-button:hover {
    background-color: green; /* Slightly darker shade on hover */
  }

 /* Hide scrollbar for Chrome, Safari and Opera */
 .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }