.html {
    background-color: black;
}
body{
    background-color: black;
}

h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

/* Center the .carousel.slide in the middle of the browser page */
.carousel.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; /* Adjust the maximum width as needed */
    max-height: 80vh; /* Adjust the maximum height as needed */
    padding: 20px; /* Adjust the padding as needed */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Optional: Add a box shadow */
}

/* Ensure the carousel container resizes properly */
.carousel-inner {
    max-width: 100%;
    height: auto;
}

/* Optional: Center carousel controls horizontally */
.carousel-control-prev {
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
}