body {
    font-family: Arial, sans-serif;
    background-color: #FAF0BE; /* Changed to warm yellow hue */
    font-size: 140%; /* Increased base font size for better readability */
}

.logo {
    /* Remove position: fixed; top: 10px; right: 10px; */
    margin-right: 20px;     /* Keep spacing between logo and navigation items */
}

.main-content {
    text-align: center;
    /* Remove margin-top property */
}

.main-content img {
    max-width: 75%;
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
}

.student-names {
    margin-top: 20px;
}

/* Remove sidebar and open button styles */

/* Navigation Bar Styles */
nav {
    background-color: rgba(211, 211, 211, 0.7); /* Transparent gray */
    height: 40px; /* Shorter height */
    width: 100%;
    z-index: 1000;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;          /* Use Flexbox for horizontal alignment */
    align-items: center;    /* Vertically center items */
    justify-content: flex-start;  /* Align items to the left */
}

nav li:not(.logo) {
    margin-left: 20px;            /* Add spacing between navigation links */
}

nav li {
    /* Remove float: left; */
}

nav li.logo {
    margin-right: 20px;     /* Add space between logo and navigation links */
}

nav li.logo img {
    height: 40px;           /* Increase logo size */
    width: auto;
}

nav li a {
    display: block;
    color: black; /* Changed text color to black */
    text-align: center;
    padding: 0 15px; /* Reduce padding */
    line-height: 40px;         /* Center text vertically */
    text-decoration: none;
}

nav li a:hover {
    background-color: #ddd;
    color: black;
}

/* Clear floats after the navigation items */
nav::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

.info-container {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    flex-wrap: wrap; /* Allow wrapping */
}

.background-information,
.research-information,
.conclusion-information {
    text-align: left;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 30%;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin: 10px; /* Adjust margin for better spacing */
    flex: 1 1 30%; /* Allow boxes to grow and shrink */
}

/* Styles for the STEM information box */
.stem-information {
    text-align: left;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 75%; /* Changed to match poster's width */
    box-sizing: border-box;
    margin: 20px auto; /* Center align */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .main-content {
        margin-top: 60px;
    }

    .main-content img {
        max-width: 90%;
    }

    .background-information,
    .research-information,
    .conclusion-information {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .logo {
        top: 5px;
        right: 5px;
    }

    .main-content {
        margin-top: 40px;
    }

    .background-information,
    .research-information,
    .conclusion-information {
        width: 100%;
    }

    .stem-information {
        width: 100%;
    }
}

/* Clear floats after the background-information and poster image */
.main-content::after {
    content: "";
    display: table;
    clear: both;
}