/* Full reset to make the image cover the screen */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; /* Fallback background color */
}

/* Ensure the container takes up the entire screen */
#image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image fills the screen with automatic cropping */
#displayed-image {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* Automatically crop to fill the screen */
}