/* Reset margins so the background takes up the whole screen */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

/* Fix the slideshow to the background */
.slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  background-color: #000; /* Fallback color */
}

/* Style each slide to cover the screen and start invisible */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out; /* This creates the smooth crossfade */
}

/* The active slide becomes visible */
.slide.active {
  opacity: 1;
}

/* Style your foreground content so it's readable over the images */
.content {
/*   position: relative; */
  position: top;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 0vh;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.8); /* Important for readability */
}

.bottom {
  height: 100%; /* Requires a height to see the vertical alignment */
  border: 0px solid #333; 
  
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Pushes content to the bottom */
  align-items: center;       /* Centers content horizontally */
  
  padding-bottom: 20px;      /* Optional: Keeps text from hugging the very edge */
}