/* Body styling: Background color, font color, font family, and margin */
body {
    background-color: #f0f0f0; /* Light gray background */
    color: #333; /* Dark text color for contrast */
    font-family: 'Arial', sans-serif; /* Clean, modern font */
    margin: 10px; /* Adds space around the page */
    line-height: 1.6; /* Increases line height for better readability */
}

/* Main header styling */
h1 {
    text-align: center; /* Centers the header */
    font-size: 2em; /* Slightly larger font size for emphasis */
    color: #007BFF; /* Blue color for a pop effect */
    margin-bottom: 20px; /* Adds space below the header */
}

/* Navigation bar styling */
nav {
    text-align: center; /* Centers the navigation links */
    margin-bottom: 20px; /* Adds space below the navigation bar */
}

nav a {
    text-decoration: none; /* Removes underlines from the links */
    color: #fff; /* White color for the text */
    background-color: #007BFF; /* Blue background for buttons */
    padding: 10px 20px; /* Adds padding for clickable area */
    margin: 0 10px; /* Adds space between the links */
    border-radius: 5px; /* Rounded corners for the links */
}

nav a:hover {
    background-color: #0056b3; /* Darker blue for hover effect */
}

/* Styling for the footer */
footer {
    text-align: center; /* Centers the footer text */
    margin-top: 30px; /* Adds space above the footer */
    padding: 10px; /* Adds padding inside the footer */
    background-color: #007BFF; /* Blue background */
    color: #fff; /* White text in footer */
    font-size: 0.9em; /* Slightly smaller font size */
}

/* Main content area */
main {
    max-width: 900px; /* Ensures the content doesn't stretch too wide */
    margin: 0 auto; /* Centers the content */
    padding: 20px; /* Adds padding inside the content area */
    background-color: #fff; /* White background for content */
    border-radius: 8px; /* Rounded corners for content box */
}

/* Styling for all images inside <figure> */
figure img {
    width: 100%; /* Makes images responsive */
    max-width: 700px; /* Limits image width */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes any space below images */
    margin: 20px auto; /* Centers images and adds space around them */
}

/* Styling for <figcaption> under images */
figcaption {
    text-align: center; /* Centers the caption text */
    font-size: 1em; /* Standard font size for captions */
    color: #555; /* Dark gray for the caption text */
}

/* Adding some spacing for paragraphs */
p {
    margin-bottom: 15px; /* Adds space below paragraphs */
    font-size: 1.1em; /* Slightly larger text for readability */
}

/* Styling for audio player */
audio {
    margin: 20px 0; /* Adds space above and below the audio player */
    display: block; /* Makes the audio player take up full width */
    width: 100%; /* Ensures audio player is responsive */
}

/* Styling for the iframe (YouTube video) */
iframe {
    width: 100%; /* Makes the video responsive */
    height: 315px; /* Fixed height for video */
    max-width: 700px; /* Limits video width */
    margin: 20px auto; /* Centers the video */
    display: block; /* Removes space around the iframe */
}