/* =========================
   Reset default browser styles
   ========================= */
   * {
    margin: 0;                /* Remove default margins from all elements */
    padding: 0;               /* Remove default padding from all elements */
    box-sizing: border-box;   /* Include padding and border in element's total width/height */
}

/* =========================
   Body styling
   ========================= */
body {
    background-color: #FFF8E7;
    color: #4B3621;
    font-family: Arial, sans-serif; /* Use Arial font, fallback to generic sans-serif */
}

/* =========================
   Main container for the whole page
   ========================= */
#container {
    display: flex;             /* Use flexbox layout for page structure */
    flex-direction: column;    /* Arrange child elements (header, content, footer) vertically */
    min-height: 100vh;         /* Make container at least the height of the browser window */
}

/* =========================
   Header styles
   ========================= */
header {
    background-color: #F4B400;    /* Dark background for contrast */
    color: white;              /* White text for readability */
    text-align: center;        /* Center-align the heading text */
    padding: 15px;             /* Space inside the header */
}

/* =========================
   Content area (main text + navigation)
   ========================= */
#content {
    display: flex;             /* Use flexbox for side-by-side layout */
    flex-direction: row;       /* Keep items in a horizontal row (content on left, nav on right) */
    padding: 20px;             /* Space inside the content area */
    flex: 1;                   /* Allow this section to stretch to fill vertical space */
}

/* =========================
   Main content section
   ========================= */
#main {
    flex: 3;                   /* Take up 3 parts of the available width */
    padding-right: 20px;       /* Space between content and navigation */
}

#main a {
    color: #B22222; /* Deep red */
    text-decoration: underline;
}

#main a:hover {
    color: #E69500; /* Soft orange hover */
}

/* =========================
   Navigation menu styles
   ========================= */
nav {
    flex: 1;                   /* Take up 1 part of the available width */
    background-color: #F6E2B3; /* Light grey background to separate from content */
    padding: 20px;             /* Space inside the navigation area */
}

/* =========================
   Navigation links
   ========================= */
nav a {
    display: block;            /* Make links fill the available width like buttons */
    background: #F4B400;          /* Light grey button background */
    padding: 10px;             /* Space inside each button */
    margin-bottom: 10px;       /* Space between buttons */
    text-decoration: none;     /* Remove underline from links */
    color: black;              /* Black text for readability */
    border-radius: 5px;        /* Rounded corners on buttons */
    text-align: center;        /* Center text inside buttons */
}

/* Hover effect for navigation links */
nav a:hover {
    background: #E69500;          /* Darker grey when hovering */
}

/* =========================
   Footer styles
   ========================= */
footer {
    background-color: #F4B400;    /* Golden background like the header */
    color: white;              /* White text for contrast */
    text-align: center;        /* Center-align footer text */
    padding: 10px;             /* Space inside the footer */
}

h2{
    padding-bottom: 20px; /* Space below the heading */
    padding-top: 10px; /* Space above the heading */
}