/* Removes default browser margins */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.centered-container {
    /* Set the maroon background */
    background-color: #ffffff; 
    
    /* Create a flexbox layout */
    display: flex;
    
    /* Centers horizontally */
    justify-content: center; 
    
    /* Centers vertically */
    align-items: center; 
    
    /* Makes the container fill the full viewport height */
    height: 100vh; 
    width: 100vw;
}

.center-img {
    /* This prevents the image from ever being taller than 350px */
    max-height: 350px;
    
    /* This prevents the image from being wider than the screen */
    max-width: 90%;
    
    /* 'auto' tells the browser to keep the original aspect ratio */
    height: auto;
    width: auto;

    /* This is a safety net to ensure it doesn't stretch weirdly */
    object-fit: contain;
}