/* 🛠️ This reset makes sizing more predictable and removes default spacing. */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* 🎨 Variables keep the page colors organized and reusable. */
:root{
    --color-ink: #1f2937;
    --color-muted: #6b7280;
    --color-surface: #f9fafb;
    --color-accent: #2563eb;
    --color-border: #d1d5db;
}

/* 🌐 The body sets the overall page background and default text color. */
body{
    background: var(--color-ink);
    color: var(--color-surface);
}

/* 🧱 The container becomes a grid parent for the header, menu, content, and footer. */
.container{
    width: 90%;
    max-width: 1200px;
    background: var(--color-surface);
    min-height: 500px;
    margin: 20px auto;
    display: grid;
     /* 🗺️ Each quoted line is one grid row. Repeating header or footer across
         both cells makes that area span both columns; it does not merge HTML elements. */
    grid-template-areas: "header header" "menu content" "footer footer";
     /* ⚖️ The columns use four total parts: menu gets 1 part and content gets
         3 parts, so content is three times wider than menu. */
    grid-template-columns: 1fr 3fr;
    /* ↔️ Gap creates space between the grid items. */
    gap: 3px;
    padding: 10px;

}

/* 📦 Shared styles apply to every direct div inside the grid container. */
.container div{
    background: var(--color-surface);
    padding: 10px;
}

/* 🏁 Place the header in the named header area and center its heading. */
.container div.header{
    grid-area: header;
    text-align: center;
}

/* 🧭 Place the menu in the named menu area. */
.container div.menu{
    grid-area:menu;
}

/* 📝 Place the main content in the named content area. */
.container div.content{
    grid-area: content;
}

/* 👣 Place the footer in the named footer area and center its heading. */
.container div.footer{
    grid-area:footer;
    text-align: center;
}

/* 🔤 Shared heading styles keep the labels centered and easy to spot. */
h1, h2, h3{
    text-align: center;
    color: var(--color-accent);
}

/* 📖 The paragraph gets readable spacing, color, and a larger demonstration font. */
p{
    padding: 20px;
    color: var(--color-ink);
    font-family:Arial, Helvetica, sans-serif;
    font-size:x-large;
}