html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /* Ensure it spans the entire viewport height */
    overflow: hidden; /* Prevent scrolling */
    background-image: url('../img/Curtains2.png'); /* Set the background image */
    background-size: cover; /* Make the image cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

@font-face {
    font-family: 'Young 20'; /* Name of the font */
    src: url('../crescendo-font/Crescendo-514Pa.ttf') format('truetype'); /* Path to the .ttf file */
}

.citations {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 4;
}

.menu {
    position: absolute;
    left: 30px;
    top: 20px;
    width: fit-content; /* Adjust to fit the image */
    margin: auto; /* Center the menu on the page if desired */
    z-index: 4;
}

.menu-image {
    display: block; /* Ensures the image is displayed as a block */
    width: 100%; /* Image fills the container */
}

.menu-link {
    position: absolute; /* Position links on top of the image */
    top: 0; /* Align the links with the top of the container */
    height: 100%; /* Full height of the image */
    text-decoration: none; /* Remove underline from links */
    color: transparent; /* Hide link text */
    background-color: rgba(255, 255, 255, 0); /* Transparent background */
}

.slider-wrapper {
    display: flex; /* Align items horizontally */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center the entire slider */
    width: 80%; /* Adjust as needed */
    max-width: 1000px;
    margin: 20px auto;
    position: relative; /* Needed for button positioning */
    top: 13%;
}

.slider-container {
    position: relative;
    flex: 1; /* Expand to take up available space */
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 24px;
    height: 500px; /* Increase height for larger slides */
    width: 700px;
    background-color: #fff;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 100%; /* Start off-screen */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    transition: left 0.5s ease; /* Smooth slide effect */
}

.slide h1{
    position: absolute;
    top: 30px;
    left: 60px;
    margin: 0;
    font-size: 40px;
    font-family: 'Young 20'
}

.slide.active {
    left: 0; /* Active slide in view */
}

.slide.previous {
    left: -100%; /* Slide to the left */
}

.slide.next {
    left: 100%; /* Slide to the right */
}

.slider-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 50px; /* Adjust for button size */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-button img {
    width: 100%; /* Make the image responsive */
    height: auto;
}

#backBtn {
    margin-right: 20px; /* Add spacing between button and slider */
}

#nextBtn {
    margin-left: 20px; /* Add spacing between button and slider */
}