/* Styles for the body */
body {
    margin: 20px;
    font-family: Arial, sans-serif;
}

/* Center the header text and add bottom margin */
header {
    text-align: center;
    margin-bottom: 20px;
}

/* Center the footer text and style it */
footer {
    text-align: center;
    margin-top: 20px; /* Adjusted to margin-top for better spacing */
    font-size: 0.8em;
    color: #666;
}

/* Style for the main heading */
h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Center and limit the width of the content */
.content-container {
    max-width: 800px; /* Adjust the max-width as needed */
    margin: 0 auto; /* Centers the container */
    padding: 20px;
}

/* Style images within the content container */
.content-container img {
    width: 100%; /* Makes the image responsive */
    height: auto;
    display: block;
    margin-bottom: 20px; /* Adds space below the image */
}

/* General image styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Paragraph styling */
p {
    margin: 10px 0;
}

/* Style the unordered list */
ul {
    text-align: left;
    display: inline-block;
    margin: 20px auto;
    padding-left: 20px;
    list-style-type: disc;
    line-height: 1.6; /* Added for better readability */
}