/* =========================================
   GLOBAL STYLES (applies to entire page)
========================================= */

/* Removes default browser spacing */
body {
    margin: 0;
    font-family: Arial, sans-serif; /* clean readable font */
    background-color: #d9d9d9; /* light gray background */
}


/* Wrapper centers your whole site */
#wrapper {
    width: 100%; /* full width */
}


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

header {
    background-color: #7f8c8d; /* gray bar like your design */
    color: white;
    display: flex; /* puts items side-by-side */
    justify-content: space-between; /* spreads title + nav */
    align-items: center; /* vertically centers items */
    padding: 20px;
}


/* Main name */
header h1 {
    margin: 0;
    font-size: 40px;
}


/* Navigation container */
nav {
    background-color: #5f6769; /* darker gray box */
    padding: 15px;
}


/* Navigation links */
nav a {
    color: white;
    text-decoration: none; /* removes underline */
    margin: 0 10px; /* spacing between links */
    font-weight: bold;
}


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


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

main {
    background-color: #86b3a6; /* greenish color from your design */
    padding: 40px;
    display: flex; /* allows side-by-side layout */
    gap: 40px; /* space between section + aside */
}


/* Main text section */
section {
    width: 60%; /* takes most of the space */
}


/* Section heading */
section h2 {
    font-size: 30px;
}


/* Paragraph text */
section p {
    font-size: 18px;
    line-height: 1.6; /* better readability */
}


/* =========================================
   SIDEBAR (IMAGE)
========================================= */

aside {
    width: 40%;
}


/* Image styling */
aside img {
    width: 100%; /* makes image fit container */
    border-radius: 10px; /* rounded corners */
}


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

footer {
    background-color: #5f6769;
    color: white;
    text-align: center;
    padding: 15px;
}