html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-size: clamp(16px, 5vw, 24px);
    background-color: #111;
}

/* Style the header and navigation menu */
header {
    flex: 0 0 4rem;
    background-color: #222; /* Background color for the header */
    color: #fff; /* Text color */
    font-family: 'Roboto', sans-serif; /* Apply Roboto font */
    text-align: center; /* Center-align header contents */
}

header > h1 {
    font-size: 2rem;
}

nav ul {
    list-style: none; /* Remove list bullets */
    padding: 0; /* Remove default list padding */
    display: flex; /* Use flexbox to create a horizontal layout */
    justify-content: center; /* Center-align the menu horizontally */
}

nav li {
    margin-right: 1rem; /* Add spacing between menu items */
}

nav a {
    text-decoration: none; /* Remove underlines from links */
    color: #fff; /* Text color for links */
    font-weight: bold; /* Make links bold */
    font-size: 1.5rem; /* Adjust this value as needed (e.g., 0.9rem is 90% of the base font size) */
}

/* Style links on hover */
nav a:hover {
    text-decoration: underline; /* Underline links on hover */
}

/* Add CSS styles for the carousel container, images, and navigation buttons */
main {
    height: 100%;
    max-height: calc(100vh - 7rem);
    /* Subtract header and footer heights from the viewport height */
    overflow: hidden;
    display: flex;
    justify-items: center;
    justify-content: center;
}

/* Style the carousel container and center the images */
.carousel-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow-x: hidden; /* Hide horizontal overflow */
}

.carousel {
    position: relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    max-height: 100%; /* Ensure images don't exceed the container's height */
    overflow: hidden; /* Hide any overflow */
    width: 100%;
    text-align: center; /* Center text overlay horizontally */
}

.carousel-slide {
    max-width: 100%; /* Images won't exceed their container's width */
    max-height: calc(100vh - 7rem);
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure images fit while preserving aspect ratio */
}

.carousel-images {
    display: flex;
    justify-content: center; /* Center horizontally within the .carousel container */
    align-items: center; /* Center vertically within the .carousel container */
    max-width: 100%; /* Images won't exceed their container's width */
    width: 100%; /* Expand to the full available width */
}

.carousel-button {
    position: absolute; /* Position the arrows relative to the carousel-images */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 50;
}

.image-container {
    position: relative;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: #fff; /* Text color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Initially hide the overlay */
    transition: opacity 0.3s ease-in-out; /* Add a smooth transition */
    font-family: 'Raleway', sans-serif;
}

.image-container:hover .text-overlay {
    opacity: 1; /* Show the overlay on hover */
}

.text-overlay h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.text-overlay p {
    font-size: 1rem;
    margin: 0;
}

#prevBtn {
    left: 0;
}

#nextBtn {
    right: 0;
}

footer {
    flex: 0 0 3rem;
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 0.25rem 0.5rem 0.1rem; /* Top 0.5rem, Right 0.5rem, Bottom 0.25rem, Left 0.5rem */
    font-family: 'Roboto', sans-serif; /* Apply Roboto font */
    font-size: 0.6em;
}

@media (max-width: 768px) and (orientation: landscape) {
    /* Styles for screens up to 768px wide in landscape orientation */
    .carousel-slide {
        max-height: 100vh; /* Limit image height to viewport height */
        max-width: none; /* Allow images to expand to full width */
    }
}