body {
    display: flex; /* Use flexbox for easy centering of the container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Ensure the body takes at least the full viewport height */
    margin: 0; /* Remove default body margin */
    background-color: #f0f0f0; /* Just for visual context */
}

.image-container {
    max-width: 70%; /* Limit the container's width relative to its parent */
    padding: 20px; /* Add some padding around the image */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    text-align: center; /* Fallback for centering block elements if flexbox isn't used on container */
}

img {
    max-width: 100%; /* Image will scale down to fit its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image (common with inline images) */
    margin: 0 auto; /* Center the image horizontally within its container */
}

/* Optional: Media queries for more specific responsiveness if needed */
@media (max-width: 768px) {
    .image-container {
        padding: 10px;
    }
}