/* Apply general styles to the body */
body {
    background-color: #f4f4f4; /* Light gray background color */
    color: #333; /* Dark text color for better readability */
    font-family: 'Arial', sans-serif; /* Set font family to Arial or fallback to sans-serif */
    margin: 10px; /* Apply a 10-pixel margin around the page */
}

/* Style the image below the header and center it */
.header-image {
    width: 30%; /* Adjust the width of the image to 30% of its container (you can adjust this value) */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Makes the image behave as a block element */
    margin: 20px auto; /* Centers the image horizontally with 20px margin on top and bottom */
}

/* Center the main header (h1) */
header h1 {
    text-align: center;
}

/* Center the navigation menu (nav) */
nav {
    text-align: center;
}

/* Border the main text /*
main {
    border: 5px solid #333; /* Solid border with a thickness of 5px and dark color */

/* Center the footer content */
footer {
    text-align: center;
    padding: 20px 0; /* Optional: adds some space around the footer text */
}