body {
    background-color: #2f2f2f;
    font-family: Arial, sans-serif; /* Adding a cleaner font */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background-color: lightblue;
    width: 90%;
    height: fit-content;
    margin: 2% auto; /* Center and add some vertical margin */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow from breaking the box */
}

.header, .footer {
    background-color: white;
    padding: 20px; /* Add padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
    border-radius: 10px 10px 0 0; /* Rounded top corners for header */
}

.header {
    margin-top: 0;
    margin-bottom: 1%;
    text-align: center;
}

.footer {
    border-radius: 0 0 10px 10px; /* Rounded bottom corners for footer */
    margin-top: 1%;
    margin-bottom: 0%;
}

#upperContainer {
    width: 90%;
    padding: 1%;
}

#contentContainer {
    display: flex; /* Use flexbox layout */
    padding: 20px; /* Add padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
    background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Subtle gradient */
    border-radius: 10px; /* Rounded corners */
    margin: 0 auto; /* Center horizontally */
    align-items: stretch;
}

.content {
    padding: 20px; /* Increase padding for better spacing */
    border-radius: 10px; /* Rounded corners */
    background-color: #2f2f2f;
}

.nav {
    flex-shrink: 0; /* Prevent shrinking */
    min-width: min-content; /* Fit content width */
    padding: 10px;
    background-color: #f8f9fa; /* Light gray for a softer look */
    margin: 0 2% 0 0;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
}

.mainbody {
    flex: 1 0; /* Allow the mainbody to grow and fill the remaining space */
    background-color: #ffffff; /* Pure white for main content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
    overflow-wrap: break-word;
}

.navHeader {
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.navContent {
    margin: auto;
    width: fit-content;
    padding: 0; /* Remove default padding */
}

.navContent ul {
    padding-inline-start: 1em;
}