/* Reset some default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body styles */ body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; } /* Header styles */ header { background-color: #4CAF50; color: white; padding: 20px 0; text-align: center; } header h1 { margin-bottom: 10px; } header p { font-style: italic; } /* Navigation styles */ nav { background-color: #333; } nav ul { list-style-type: none; text-align: center; } nav ul li { display: inline; margin-right: 20px; } nav ul li a { color: white; text-decoration: none; font-weight: bold; } nav ul li a:hover { text-decoration: underline; } /* Main content styles */ main { padding: 20px; margin: 0 20px; /* Adds margin to the left and right sides */ max-width: 1100px; margin-left: auto; margin-right: auto; /* Center the content */ } /* Section styles */ section { margin-bottom: 30px; } section h2 { color: #333; margin-bottom: 10px; } section p { font-size: 1.1em; } /* Footer styles */ footer { background-color: #333; color: white; text-align: center; padding: 10px; position: fixed; width: 100%; bottom: 0; }

/* General Body Styles */body {    font-family: Arial, sans-serif;    line-height: 1.6;    background-color: #f4f4f4;    color: #333;    text-align: center;}
/* Image Styles */.responsive-image {    max-width: 100%;     /* Make the image responsive */    height: auto;        /* Maintain aspect ratio */    display: block;      /* Remove any extra space below the image */    margin: 0 auto;      /* Center the image horizontally */}
/* Media Queries for Mobile */@media (max-width: 768px) {    .responsive-image {        width: 90%;    /* On mobile, use 90% of the screen width */        margin-bottom: 20px; /* Add some margin below the image on mobile */    }}
/* Media Queries for Desktop */@media (min-width: 769px) {    .responsive-image {        width: 70%;    /* On desktop, use 70% of the screen width */    }}