/* 
    Author: Rich Robichaud
    Course: ITWP 1050 
    Assignment: Homework 2 
*/

/* Universal selector to set default text color for all elements */
* {
    color: #333333; /* Dark gray for better readability */
}

/* Body element styling */
body {
    margin: 25px; /* Creates space around the entire content */
    font-family: Arial, Helvetica, sans-serif; /* Web-safe font stack */
    font-size: 1em; /* Base font size */
    text-align: center; /* Centers all content */
    background-color: #f4f4f4; /* Light gray background */
    max-width: 800px; /* Prevents page from becoming too wide */
    margin-left: auto; /* Centers the page horizontally */
    margin-right: auto;
}

/* Header section formatting */
header {
    text-align: center;
    margin-bottom: 20px; /* Separates header from main content */
}

/* Styling for all heading elements */
h1, h2, h3 {
    color: #990000; /* Maroon color for headings */
}

/* Image formatting and border properties */
img {
    display: block;
    margin: 20px auto; /* Centers images and adds vertical spacing */
    max-width: 100%; /* Makes images responsive */
    height: auto; /* Maintains aspect ratio */
    border: 1px solid black; /* Adding required border */
    border-radius: 10px; /* Rounded corners as required */
}

/* Paragraph text styling */
p {
    text-indent: 40px; /* Indentation for first line of paragraphs */
    line-height: 1.6; /* Improves readability with increased line spacing */
}

/* Source citation styling */
.source {
    text-align: center;
    font-weight: bold;
    margin-top: 20px; /* Adds space above the source section */
}

/* Footer layout and appearance */
footer {
    margin-top: 50px; /* Required top margin */
    margin-bottom: 50px; /* Required bottom margin */
    text-align: center;
    font-size: 0.9em; /* Slightly smaller text */
    background-color: #ddd; /* Light gray background */
    padding: 15px; /* Internal spacing */
    border-top: 2px solid #990000; /* Colored top border */
}

/* Footer link default appearance */
footer a {
    text-decoration: none; /* Removes underline */
    color: #003366; /* Navy blue color */
    font-weight: bold;
    margin: 0 10px; /* Horizontal spacing between links */
}

/* Footer link hover state */
footer a:hover {
    text-decoration: underline; /* Adds underline on hover */
    color: #990000; /* Changes to maroon on hover */
}

/* External link indicator using pseudo-element */
.external-link::after {
    content: " (external)"; /* Adds text after external links */
    color: red; /* Makes added text red for visibility */
}