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

/* Add the following CSS rule for the logo-wrapper */
#logo-wrapper {
    border-top: 5px solid #333; /* 5-pixel thick separator line above the logo */
    border-bottom: 5px solid #333; /* 5-pixel thick separator line below the logo */
}

/* Update the header CSS rule */
header {
    text-align: center;
    padding: 20px 0;
	background-color: #bad8da;
}

#logo {
    width: 742px;
    height: 386px;
}

nav {
    text-align: center;
    padding: 10px 0;
}

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu li {
    display: inline;
}

#menu a {
    text-decoration: none;
    color: #333;
    padding: 8px 16px;
    font-size: 24px; /* Larger font size for menu items */
}

#menu a:hover {
    background-color: #f1f1f1;
}

#content {
    width: 60%; /* Content frame width */
    margin: 0 auto; /* Center the content frame */
}

.content-section {
    transition: opacity 0.5s ease;
}

.hidden {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}