body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #fff;
}

.header-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.logo-title {
    width: 70%;
    text-align: center; /* Center align the logo and title */
}

.logo {
    width: auto;
    max-width: 100%; /* Ensure logo doesn't exceed its container */
    height: auto;
    max-height: 300px; /* Limit maximum height of the logo */
}

nav ul {
    display: flex;
    list-style: none;
    padding: 10px;
    margin: 0;
    background-color: #b3740e;
    justify-content: center;
}

nav li {
    margin: 0 10px;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

main {
    display: flex;
    flex-wrap: wrap; /* Allow main content and sidebar to wrap on smaller screens */
    padding: 20px;
}

.main-content {
    flex: 3;
    padding-right: 20px;
}

aside {
    flex: 1;
}

.browse,
.submission {
    margin-bottom: 20px;
}

button {
    background-color: #9b6b38;
    color: white;
    border: none;
    padding: 10px 20px; /* Adjust button padding */
    cursor: pointer;
}

.timeline {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.timeline h2 {
    color: green;
}

.timeline table {
    width: 100%;
    border-collapse: collapse;
}

.timeline th,
.timeline td {
    text-align: left;
    padding: 8px;
}

.timeline th {
    width: 30%;
    color: green;
}

.footer {
    background-color: #9b6b38;
    color: white;
    text-align: center;
    padding: 10px 0;
1
    bottom: 0;
    width: 100%;
}

.footer a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
    font-size: 18px; /* Adjust font size for smaller screens */
}


/* Media Queries for Responsive Design */

@media only screen and (max-width: 800px) {
    /* For tablets and smaller screens */
    .logo-title {
        width: 100%; /* Adjust width for smaller screens */
    }

    main {
        flex-direction: column; /* Stack main content and sidebar */
    }

    .main-content {
        flex: auto; /* Take full width */
        padding-right: 0; /* Remove right padding */
        margin-bottom: 20px; /* Add margin between main content and sidebar */
    }

    aside {
        flex: auto; /* Take full width */
    }
}

@media only screen and (max-width: 500px) {
    /* For mobile phones */
    nav ul {
        flex-direction: column; /* Stack navigation items vertically */
        align-items: center; /* Center align navigation items */
    }

    nav li {
        margin: 5px 0; /* Adjust margin for navigation items */
    }

    .footer a {
        font-size: 16px; /* Further reduce font size for smaller screens */
    }
}
        /* Additional styles specific to the collapsible menu button */
        .menu-toggle {
            display: none; /* Hide toggle button by default */
        }

        @media only screen and (max-width: 800px) {
            .menu-toggle {
                display: block; /* Show toggle button for screens smaller than 800px */
                background: none;
                border: none;
                cursor: pointer;
                padding: 10px;
                display: flex;
                align-items: center;
                position: absolute;
                top: 15px;
                right: 15px;
                z-index: 1000;
            }

            .hamburger {
                width: 25px;
                height: 3px;
                background-color: #333;
                display: block;
                transition: background-color 0.3s ease;
            }

            .hamburger::before,
            .hamburger::after {
                content: '';
                width: 25px;
                height: 3px;
                background-color: #333;
                display: block;
                transition: transform 0.3s ease;
            }

            .hamburger::before {
                transform: translateY(-8px);
            }

            .hamburger::after {
                transform: translateY(5px);
            }

            .menu-toggle.active .hamburger {
                background-color: transparent;
            }

            .menu-toggle.active .hamburger::before {
                transform: rotate(45deg) translateY(0px);
            }

            .menu-toggle.active .hamburger::after {
                transform: rotate(-45deg) translateY(0px);
            }

            nav {
                display: none;
                position: absolute;
                top: 70px;
                right: 0;
                background-color: #b3740e;
                width: 200px; /* Adjust width as needed */
                padding: 10px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 999;
            }

            nav.active {
                display: block;
            }

            nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            nav li {
                margin-bottom: 10px;
            }

            nav a {
                text-decoration: none;
                color: white;
                padding: 10px;
                display: block;
            }
        }

        /* Style for vertical line */
        aside {
            position: relative;
        }

        .vertical-line {
            position: absolute;
            top: 2;
            left: -5%;
            width: 1px; /* Adjust thickness of the line */
            height: 100%;
            background-color: #ccc; /* Adjust color of the line */
            transform: translateX(-50%);
        }
          .browse a {
            text-decoration: none;
        }