body { 
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
        background-color: #1f1f1f;
        color: #dddddd;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .centered-container-header { 
        display: flex; 
        justify-content: center; 
        margin-top: 0px; /* Adjust the margin as needed */ 
    }
    
    .centered-container { 
        display: flex; 
        justify-content: center; 
        margin-top: 5px; /* Adjust the margin as needed */ 
    }

    .button-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        gap: 6px; /* Space between buttons */
        margin-top: 10px;
        padding: 10px;
        width: 100%; /* Make the menu bar take up the full width */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .button {
        flex: 1 1 auto; /* Allow buttons to grow and shrink */
        max-width: 150px; /* Set a maximum width for buttons */
        min-width: 80px; /* Set a minimum width for buttons */
        padding: 10px 15px; /* Adjust padding for better responsiveness */
        text-align: center;
        font-size: 1rem; /* Use relative font size for scaling */
        background-color: #4f4f4f;
        color: #dddddd;
        text-decoration: none;
        border-radius: 0px;
        transition: background-color 0.3s;
    }

    .button:hover {
        background-color: #6f6f6f;
    }
    
    @media (max-width: 768px) {
        .button {
            font-size: 0.9rem; /* Reduce font size on smaller screens */
            padding: 8px 12px; /* Adjust padding for smaller screens */
        }
    }
    
    @media (max-width: 480px) {
        .button {
            font-size: 0.8rem; /* Further reduce font size for very small screens */
            padding: 6px 10px;
        }
    }
    .seperators {
        color: #D0BA91;
    }
    .CenterDiv{
        display: flex; 
        justify-content: center; 
    }
    .CenterDivText{
        margin:auto;
        width: 100%;
    }
    .slideshow-container {
        text-align: center;
        margin-top: 20px;
    }
    .slideshow-container img {
        max-width: 100%;
        height: auto;
        margin-bottom: 100px; /* Add 100 pixels of blank space under the image */
    }
    .slideshow-header {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 0px;
    }
    .slideshow-header h1 {
        color:rgb(160, 186, 211);
        font-size: 24px;
        margin: 0;
    }
    .slideshow-header p {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 20px; /* Add margin-bottom to control space */
    }
    .caption {
        margin-top: 0px; /* Control space above the caption */
        margin-bottom: 15px; /* Control space below the caption */
        font-size: 14px;
        font-style: italic;
        color: #e0e0e0;
    }

    .nav-link {
        color: #e6bf77;
        text-decoration: none;
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 10px;
    }
    .nav-link:hover {
        color: #ffe2ad;
    }
    .image-text-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 15px; /* Space between image and text */
        margin-top: 10px;
    }
    .image-text-container img {
        max-width: 100%;
        height: auto;
    }
    .image-text-container .text {
        max-width: 300px; /* Adjust as needed */
    }
    .image-text-container .text a {
        color: #e6bf77; /* Default link color */
        text-decoration: none; /* Remove underline */
    }
    .image-text-container .text a:hover {
        color: #ffe2ad; /* Hover link color */
        text-decoration: none; /* Add underline on hover */
    }
    /* Add styles for general links */
a {
    color: #e6bf77; /* Default link color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    color: #ffe2ad; /* Hover link color */
    text-decoration: underline; /* Add underline on hover */
}