/*
Author: Gerald Pender
Date: March 8, 2026
File Name: styles.css

This multi-line comment identifies the author of the stylesheet,
the date it was created, and the file name. Comments help document
the purpose of the code so other developers can easily understand
what the stylesheet controls.
*/


/* CSS Reset */

/*
A CSS reset removes default browser styling such as margins,
padding, and borders. Different browsers apply their own default
styles, so resetting them ensures the webpage looks consistent
across all browsers.
*/

body, header, nav, main, footer, img, h1, h3 {
    margin: 0;
    padding: 0;
    border: 0;
}


/* Style rules for body and images */

/*
The body selector controls the overall appearance of the webpage.
Setting the background color creates a consistent page background
that appears behind all content.
*/

body {
    background-color: #f6eee4;
}


/*
The img selector controls how images behave within the page layout.
Setting max-width to 100% prevents images from overflowing their
containers and keeps them responsive on smaller screens.
*/

img {
    max-width: 100%;
    display: block;
}


/* Style rules for navigation area */

/*
The nav selector styles the navigation bar that contains the site links.
The background color creates a dark bar that visually separates
navigation from the rest of the page content.
*/

nav {
    background-color: #2a1f14;
}


/*
The nav ul selector removes the default bullet points from lists
and centers the navigation menu. This makes the menu look cleaner
and more organized.
*/

nav ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
}


/*
The nav li selector controls each individual navigation item.
Displaying them as inline-block allows them to appear horizontally
instead of stacked vertically.
*/

nav li {
    display: inline-block;
    font-size: 1.5em;
    font-family: Geneva, Arial, sans-serif;
    font-weight: bold;
}


/*
The nav li a selector styles the clickable links within the navigation menu.
Padding adds space around each link to make them easier to click,
and removing text decoration removes the default underline.
*/

nav li a {
    display: block;
    color: #f6eee4;
    padding: 0.5em 2em;
    text-decoration: none;
}


/* Style rules for main content */

/*
The main selector controls the primary content area of the webpage.
Adding padding creates space between the content and the edges of
the page so text is easier to read.
*/

main {
    padding: 2%;
    font-family: Verdana, Arial, sans-serif;
}


/*
The main p selector adjusts the size of paragraph text
to make it slightly larger and easier to read.
*/

main p {
    font-size: 1.25em;
}


/*
The main h3 selector adds spacing above subsection headings
so they do not appear too close to the content above them.
*/

main h3 {
    padding-top: 2%;
}


/*
The main ul selector changes the bullet style used for lists
within the main content area to square bullets.
*/

main ul {
    list-style-type: square;
}


/*
The .link class is used for hyperlinks that need special styling.
It changes the color, removes the underline, and applies bold
and italic formatting to make the link stand out.
*/

.link {
    color: #4d3319;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}


/*
The .action class highlights important call-to-action text,
such as requests for donations or volunteers.
The larger font size and centered alignment draw attention.
*/

.action {
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
}


/*
The #contact id selector styles the contact section of the page.
Centering the text keeps the contact information neatly aligned
and easy for visitors to locate.
*/

#contact {
    text-align: center;
}


/* Style rules for footer content */

/*
The footer selector styles the bottom section of the webpage.
It uses the same dark background as the navigation area to create
visual consistency across the site.
*/

footer {
    text-align: center;
    font-size: 0.85em;
    background-color: #2a1f14;
    color: #f6eee4;
    padding: 1% 0%;
}


/*
The footer a selector styles links that appear inside the footer.
The color makes the link visible against the dark background
and removing the underline keeps the design clean.
*/

footer a {
    color: #f3e6d8;
    text-decoration: none;
}