body, html, a {
  height: 100%;
  margin: 0;
  color: white;
  /* text-decoration: none; */
  /* font-family: Times, serif; */
  background-color: black;
}

a:hover {
  text-decoration: none;
}

.top-left {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 20px;
  z-index: 1; /* Ensure it's on top of other elements */
  mix-blend-mode: difference;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Set height to viewport height */
  overflow: hidden;
  display: flex;
  justify-content: flex-end; /* Align items to the bottom */
  flex-direction: column;
}

.mySlides {
  display: none;
  width: auto; /* Auto width to maintain aspect ratio */
  height: 100vh; /* Set height to viewport height */
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill the container while maintaining aspect ratio */
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  mix-blend-mode: difference;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.caption-text {
  margin: 0; /* Reset margin for the text inside caption */
}



@media only screen and (max-width: 767px) {
  .centered-div {
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
  }

  .centered-div img {
    width: 100vw;
    height: auto;
  }
}