@media (max-width: 1000px) {
    html {
        font-size: 1.8rem; /* Adjust the font size for mobile screens */
    }
}
/* Reset some default styles for consistency */
    body, h1, h2, h3, p, ul, ol {
        margin: 0;
        padding: 0;
    }

    /* Set a clean background and font */
body {
    font-family: Arial, sans-serif;
    background-color: #c7d8ff;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center; /* Center text within its container */
    color: gray;
    margin-top: 10pt;
}


.header-div {
    background: #ffe4e3;
    margin: 0 auto;
    margin: 10px;
    margin-top: 10px;
    padding: 5px;
    background: linear-gradient(45deg, #0d59ff, #6998ff, #0d59ff); /* Tri-color gradient */
    border-radius: 10px; /* Add rounded corners */
}

#page {
    background-color: white;
    max-width: 800px;
    margin: 0 auto;
    border: 10px solid #c7d8ff;
    padding: 25px;
}

    /* Add some padding and center content */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* Style headings */
    h2, h3 {
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
    }

    h3 {
        margin-left: 30px;
    }
    /* Style paragraphs */
    p {
        margin-top: 0pt;
        margin-left: 30pt;
        margin-right: 30pt;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    /* Style links */
    a {
        color: #007BFF;
        text-decoration: none;
    }


    /* Create a clean button style */
    .button {
        display: inline-block;
        padding: 5px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .button:hover {
            background-color: #0056b3;
        }

    /* Add some spacing between elements */
    .space {
        margin-bottom: 30px;
    }

    /* Create a clean navigation bar */
    .navbar {
        background-color: #333;
        color: #fff;
        padding: 10px 0;
    }

        .navbar a {
            color: #fff;
            margin-right: 20px;
            text-decoration: none;
        }

    /* Responsive design for smaller screens */
    @media (max-width: 768px) {
        .container {
            padding: 10px;
        }
    }

    header {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Horizontally center content */
        text-align: center; /* Center text within its container */
    }

    #logo {
        max-width: 250px;
        height: auto;
    }

    .menu-container {
        width: 100%; /* Full width of the container */
        padding: 10px; /* Add some padding for spacing */
    }

    /*.menu-item {
        display: inline-block;*/ /* Display items horizontally */
        /*padding: 5px 20px;*/ /* Padding for spacing inside the menu items */
        /*background-color: #8FB2E9;*/ /* Slightly darker background color */
        /*border-radius: 10px;*/ /* Rounded rectangle */
        /*margin-right: 10px;*/ /* Margin between items */
        /*transition: background-color 5s, color 5s;*/ /* Smooth transition */
    /*}*/
    /* Style for the menu items */
    .menu-link a {
        text-decoration: none; /* Remove underlines from links */
        color: #000000; /* Set the default text color */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    }

    /* Hover effect */
/*    .menu-item:hover {
        background-color: #6FA2D9;
    }
*/
.menu-link {
    text-decoration: none; /* Remove underline from links */
    color: black; /* Set the default text color */
    background-color: #FFE9AE; /* Set the default background color */
    padding: 5px 20px; /* Add some padding for spacing */
    display: inline-block; /* Make it a block element */
    margin: 5px; /* Margin between items */
    border-radius: 10px; /* Add rounded corners */
    transition: background-color 0.3s; /* Smooth transition for background color */
    font-weight: bold;
}

        .menu-link:hover a {
            color: #FFFFFF;
        }

    .menu-link:hover {
        background-color: #ffc119; /* Change the background color on hover */
        color: white; /* Change the text color on hover */
    }

    /* Target the <p> tag in the header section by its class name */
.header-paragraph {
    color: #ffe6a1; /* Change this to the desired text color */
    margin-left: 0pt;
}

    /* Define a class for rounded images */
    .rounded-image {
        border-radius: 10px; /* Adjust the border-radius as needed for the desired level of rounding */
        border: 2px solid #5C5B3F; /* Border color */
        max-width: 250px;
        display: block; /* Make the image a block-level element */
        margin: 0 auto; /* Center horizontally */
    }

    .rounded-image-wnd {
        border-radius: 10px; /* Adjust the border-radius as needed for the desired level of rounding */
        border: 10px solid #5C5B3F; /* Border color */
        width: 800px;
        display: block; /* Make the image a block-level element */
        margin: 0 auto; /* Center horizontally */
    }

    /* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
    }

        .modal img {
            display: block;
            margin: 0 auto;
            max-width: 90%;
            max-height: 90%;
        }

    /* Close button styles */
    .close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 30px;
        font-weight: bold;
        color: white;
        cursor: pointer;
    }

        .close:hover {
            color: red;
        }

    .list-element a {
        color: black;
        text-decoration: none; /* Remove underline from all links */
    }

    /* Add CSS styles for your slideshow */
    .slideshow-wrapper {
        display: flex;
        justify-content: center; /* Center the container horizontally */
        align-items: center; /* Center the container vertically */
        height: 525px;
    }

    .slideshow-container {
        position: relative;
        max-width: 800px; /* Set the maximum width of your images */
    }

    .slide {
        display: none; /* Hide all slides by default */
        width: 100%;
    }

    .fade {
        animation-name: fade;
        animation-duration: .5s;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .slide img {
        margin-top: 10pt;
        max-width: 100%;
        max-height: 500px;
        height: auto;
    }

    /* Apply the indentation to both <ol> and <ul> */
    ol, ul {
        padding-left: 90px; /* Indent the left side by 60px */
        padding-right: 90px; /* Indent the right side by 60px */
    }
    /* Apply the indentation to tables */
    table {
        margin-left: 90px; /* Indent the left side by 90px */
        margin-right: 90px; /* Indent the right side by 90px */
        border-collapse: collapse; /* Merge table borders into a single border */
        border: 1px solid #000; /* 1px solid black border */
    }

    th {
        border: 1px solid #000; /* 1px solid black border for table cells */
        padding: 2px 10px; /* Add padding to cells for spacing */
    }

    td {
        border: 1px solid #000; /* 1px solid black border for table cells */
        padding: 2px 10px; /* Add padding to cells for spacing */
    }

    .poem {
        margin-bottom: 5px;
    }

    .poem-h2 {
        margin-top: 30px;
    }

    .date {
        color: gray;
        margin-top: 0px;
        margin-left: 0px;
    }

    .date-center {
        margin-right: 0px;
        color: gray;
        margin-top: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center; /* Horizontally center */
    }

    .copyright {
        color: gray;
        margin-top: 0px;
        margin-left: 60px;
    }

    .indent {
        margin-left: 40px;
    }

    .footer-link {
        text-decoration: none; /* Remove underlines from links */
        color: gray; /* Set the default text color */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
        display: block;
    }

        .footer-link:hover {
            text-decoration: none; /* Remove underlines from links */
            color: #000; /* Set the default text color */
            transition: background-color 0.3s, color 0.3s; /* Smooth transition */
        }

    .footer-line {
        margin: 5px;
    }

    .footer {
        margin-right: 0px;
        color: gray;
        margin-top: 0px;
        margin-left: 0px;
        display: flex;
        justify-content: center; /* Horizontally center */
        margin-bottom: 0px;
    }

    .nav {
        height: 20px;
    }

    .nav-div {
        display: flex;
        justify-content: center;
        margin: 5px;
    }