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

/* Reset some default browser styles */
body {
    margin: 0; /* Removes default spacing around the page */
    font-family: Arial, sans-serif; /* Sets a clean, readable font */
    background-color: #f4f4f4; /* Light gray background */
}

/* =========================
   WRAPPER (main container)
   ========================= */

/* # is used because this is a UNIQUE element (only one wrapper on page) */
#wrapper {
    width: 80%; /* Makes content not stretch full width */
    margin: 0 auto; /* Centers the wrapper horizontally */
    background-color: white; /* White background for content */
    padding: 20px; /* Space inside the wrapper */
}

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

header {
    background-color: #BFA28C; /* Dark background */
    color: #748A80; /* White text */
    padding: 20px;
}

/* Style for the main name/title */
header h1 {
    margin: 0;
}

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

nav {
    margin-top: 10px;
}

/* Style all links inside nav */
nav a {
    color: #EFE6E3; /* White text */
    text-decoration: none; /* Removes underline */
    margin-right: 15px; /* Space between links */
}

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

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

main {
    display: flex; /* Places section and aside next to each other */
    margin-top: 20px;
}

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

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

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

aside {
    flex: 1; /* Smaller than section */
    padding: 20px;
    background-color: #ddd;
    margin-left: 10px; /* Space between section and aside */
}

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

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

/* =========================
   CLASSES (Reusable styles)
   ========================= */

/* . is used for reusable styles that can be applied to MANY elements */
.highlight {
    background-color: yellow;
}

.center-text {
    text-align: center;
}