body {
    background-color: beige;
}
/* ===============================
   GLOBAL PAGE STYLES
   These styles apply to the entire page
   =============================== */

/* Style the body of the page */
body {
    font-family: Arial, Helvetica, sans-serif; /* Sets the default font */
    margin: 0; /* Removes default spacing around the page */
    padding: 0; /* Removes default padding */
    background-color: #f4f4f4; /* Light gray background for the page */
}

/* ===============================
   WRAPPER STYLES
   #wrapper is an ID because it is used only once
   It holds ALL page content
   =============================== */

#wrapper {
    width: 90%; /* Makes wrapper take up 90% of screen width */
    max-width: 1000px; /* Limits width so it doesn't stretch too wide */
    margin: auto; /* Centers wrapper horizontally */
    background-color: #FCFBF4; /* White background */
    padding: 10px; /* Adds space inside wrapper */
}

/* ===============================
   HEADER STYLES
   =============================== */

header {
    background-color: #5799BF; /* Dark background */
    color: white; /* White text */
    padding: 15px; /* Space inside header */
}

/* Style the main title inside header */
header h1 {
    margin: 0; /* Removes extra space around heading */
}

/* ===============================
   NAVIGATION STYLES
   =============================== */

/* Style navigation container */
nav {
    margin-top: 10px; /* Adds space above navigation links */
}

/* Style navigation links */
nav a {
    text-decoration: none; /* Removes underline from links */
    color: #5799BF; /* White text */
    background-color: #FCFBF4; /* Dark gray background */
    padding: 8px 12px; /* Space inside each link */
    margin-right: 5px; /* Space between links */
    display: inline-block; /* Allows padding and spacing */
}

/* Change color when mouse hovers over links */
nav a:hover {
    background-color: #777; /* Lighter gray on hover */
}

/* ===============================
   MAIN CONTENT AREA
   =============================== */

main {
    display: flex; /* Places section and aside next to each other */
    gap: 10px; /* Space between section and aside */
    margin-top: 10px; /* Space above main content */
}

/* ===============================
   SECTION STYLES
   Main content area
   =============================== */

section {
    flex: 3; /* Takes up more space than aside */
    background-color: #e9ecef; /* Light gray background */
    padding: 15px; /* Space inside section */
}

/* ===============================
   ASIDE STYLES
   Secondary content area
   =============================== */

aside {
    flex: 1; /* Takes less space than section */
    background-color: #dfe3e6; /* Slightly darker gray */
    padding: 15px; /* Space inside aside */
}

/* ===============================
   FOOTER STYLES
   =============================== */

footer {
    margin-top: 10px; /* Space above footer */
    background-color: #333; /* Dark background */
    color: white; /* White text */
    text-align: center; /* Centers footer text */
    padding: 10px; /* Space inside footer */
}

/* Footer heading style */
footer h4 {
    margin: 0; /* Removes extra spacing */
}