html, body {
    /* Critical: Set height to 100% of the viewport and remove margins/padding */
    height: 100vh;
    margin: 0;
    padding: 0;
    
    /* Prevents scrollbars from appearing */
    overflow: hidden; 
}

body {
    /* Flexbox centers the container on the page */
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: black; /* Use black to hide the background space */
}

.image-container {
    /* Ensures the container uses the full available space */
    width: 100vw;
    height: 100vh;
}

.image-container img {
    /* Force the image element to take up the full viewport size */
    width: 100vw; /* 100% of Viewport Width */
    height: 100vh; /* 100% of Viewport Height */
    
    /* The key property: 'contain' scales the image down (or up) 
       to fit within the container's borders, keeping the aspect ratio. 
       This will show the full photo, but may leave black bars (letterboxing/pillarboxing) 
       on the sides or top/bottom if the image's aspect ratio doesn't match the screen's. */
    object-fit: contain;
    
    /* Ensures the image is centered within its boundaries */
    object-position: center;
    
    /* Display block removes residual space often found under images */
    display: block;
}