/* =========================
   MAIN.CSS - Starter Styles
   ========================= */

/* Reset some default browser styles */
* {
    margin: 0; /* Removes default spacing around elements */
    padding: 0; /* Removes default padding */
    box-sizing: border-box; /* Makes sizing more predictable */
}

/* Style the whole page */
body {
    font-family: Arial, sans-serif; /* Sets the font */
    line-height: 1.6; /* Improves readability */
    background-color: #f4f4f4; /* Light gray background */
}

/* =========================
   WRAPPER (ID SELECTOR)
   ========================= */

/* We use #wrapper because IDs are unique (only one per page) */
#wrapper {
    width: 80%; /* Makes content narrower than full screen */
    margin: 0 auto; /* Centers the wrapper horizontally */
    background-color: #ffffff; /* White background for content */
    padding: 20px; /* Space inside the wrapper */
}

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

header {
    margin-bottom: 20px; /* Space below header */
}

/* Target h1 inside header only */
header h1 {
    margin-bottom: 10px;
}

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

nav {
    margin-bottom: 20px;
}

/* Style links inside nav */
nav a {
    text-decoration: none; /* Removes underline */
    margin-right: 10px; /* Space between links */
}

/* Hover effect for links */
nav a:hover {
    text-decoration: underline;
}

/* =========================
   MAIN LAYOUT
   ========================= */

main {
    display: flex; /* Places section and aside side-by-side */
    gap: 20px; /* Space between them */
}

/* =========================
   SECTION (MAIN CONTENT)
   ========================= */

/* We use element selector because there may be multiple sections */
section {
    flex: 3; /* Takes up more space than aside */
    background-color: #e8f0fe; /* Light blue placeholder */
    padding: 15px;
}

/* =========================
   ASIDE (SIDEBAR)
   ========================= */

aside {
    flex: 1; /* Smaller than section */
    background-color: #fce8e6; /* Light red placeholder */
    padding: 15px;
}

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

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

/* =========================
   EXTRA NOTES
   ========================= */

/*
# vs . vs element:

#id
- Used for ONE unique element (like #wrapper)
- IDs should not repeat

.class
- Used for reusable styles (ex: .card, .button)
- You didn’t use classes yet, but you will later

element (like header, nav, section)
- Styles all elements of that type
- Good for general layout and structure
*/