/* ===============================
   GLOBAL STYLES (affects whole page)
   =============================== */

/* This targets the entire page */
body {
    margin: 0; /* Removes default browser spacing */
    font-family: Arial, sans-serif; /* Sets default font */
    background-color: #f4f4f4; /* Light gray background */
}

/* ===============================
   WRAPPER (ID = #wrapper)
   =============================== */

/* # is used for IDs (only ONE element should have this) */
#wrapper {
    width: 80%; /* Controls page width */
    margin: auto; /* Centers the page */
    background-color: white; /* Main content background */
    padding: 20px; /* Space inside the wrapper */
}

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

header {
    background-color: #A5D8F8; /* Dark background */
    color: white; /* White text */
    padding: 10px;
}

/* Target the h1 inside the header */
header h1 {
    margin: 0; /* Removes extra spacing */
}

/* ===============================
   NAVIGATION BAR
   =============================== */

/* nav is a semantic HTML tag */
nav {
    margin-top: 10px;
    width: 261px;
height: 42px;
flex-shrink: 0;
}

/* This targets ALL links inside nav */
nav a {
    color: white;
    text-decoration: none; /* Removes underline */
    margin-right: 15px;
    color: #000;
font-family: "Inria Serif";
font-size: 8px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* Adds hover effect when mouse is over links */
nav a:hover {
    text-decoration: underline;
}

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

main {
    display: flex; /* Places section and aside side-by-side */
    margin-top: 20px;
}

/* ===============================
   SECTION (main content)
   =============================== */

section {
    flex: 3; /* Takes more space than aside */
    padding: 10px;
    background-color: #eaeaea;
}

/* ===============================
   ASIDE (sidebar)
   =============================== */

aside {
    flex: 1; /* Smaller column */
    padding: 10px;
    background-color: #ccc;
    margin-left: 10px;
}

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

footer {
    margin-top: 20px;
    padding: 10px;
    background-color: #333;
    color: white;
    text-align: center;
}