/* =========================
   MAIN CSS FILE: main.css
   ========================= */

/* Reset some default browser styles */
* {
    margin: 0; /* removes default margin */
    padding: 0; /* removes default padding */
    box-sizing: border-box; /* makes sizing easier to control */
}

/* Body styling */
body {
    font-family: Arial, sans-serif; /* sets default font */
    background-color: #f4f4f4; /* light gray background */
    color: #333; /* dark text color */
}

/* Wrapper (uses # because it's an ID - only one wrapper on the page) */
#wrapper {
    width: 80%; /* controls page width */
    margin: 0 auto; /* centers the page horizontally */
    background-color: white; /* white background for content */
    padding: 20px; /* space inside the wrapper */
}

/* Header section */
header {
    background-color: #333; /* dark background */
    color: C1C6C8; /* white text */
    padding: 15px;
}

/* Header title */
header h1 {
    margin-bottom: 10px;
    height: 148px;
}

/* Navigation links */
nav a {
    color: white; /* white links */
    text-decoration: none; /* removes underline */
    margin-right: 15px; /* spacing between links */
}

/* Navigation hover effect */
nav a:hover {
    text-decoration: underline; /* underline when hovered */
}

/* Main content area */
main {
    display: flex; /* puts section and aside side-by-side */
    margin-top: 20px;
}

/* Section (main content area) */
section {
    flex: 3; /* takes up more space */
    padding: 10px;
}

/* Aside (sidebar) */
aside {
    flex: 1; /* smaller side column */
    background-color: #e4e4e4; /* light gray background */
    padding: 10px;
    margin-left: 10px;
}

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

/* Example class (uses . because it can be reused multiple times) */
.highlight {
    color: red; /* makes text red */
}