/* Ensure no default margins or padding interfere with full-screen layout */
html, body {
    margin: 0;
    padding: 0;
    /* Use 100% width on both for safety */
    width: 100%;
}

/* Set the body as a full-height flex container for perfect centering */
body {
    background-color: #aed8a8; /* Pistachio background */
    
    /* Crucial for centering: Body must take up the full viewport height */
    height: 100vh;
    
    /* Flexbox properties to center the content both horizontally and vertically */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
}

/* No changes needed for the logo-container, it acts as the centered content */
.logo-container {
    max-width: 100%;
    max-height: 100%;
}

/* Explicitly control the logo size to prevent massive display */
.logo-image {
    /* Set a specific, non-massive width and let the browser adjust the height proportionally */
    width: 400px; 
    height: auto; 
    
    /* Make sure it shrinks on small screens if 400px is too wide */
    max-width: 90vw; 
    
    /* Prevents stretching on very tall screens */
    max-height: 90vh;
}