/* 1. Basic Reset and Full Viewport Setup */
body, html {
    margin: 0;
    padding: 0;
    /* This ensures the body takes up the full height of the browser window */
    height: 100%; 
    width: 100%;
    background-color: #ffffff; /* Optional: A light background for contrast */
}

/* 2. Flexbox Centering on the Container/Body */
.container {
    /* Use the same full dimensions as the body */
    height: 100%; 
    width: 100%;
    
    /* Enable Flexbox */
    display: flex; 
    
    /* Center content horizontally (left-to-right) */
    justify-content: center; 
    
    /* Center content vertically (top-to-bottom) */
    align-items: center; 
}

/* 3. Image Responsiveness */
.centered-image {
    /* Ensures the image doesn't overflow its parent container */
    max-width: 90%; 
    
    /* Ensures the image doesn't overflow the screen height */
    max-height: 90vh; 
    
    /* Keeps the image's proportions correct as it scales */
    height: auto; 
    width: auto;
}