/* Previous existing styles maintained */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* Ensures no scrolling on the entire document */
}

#display-container {
    background: black;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Handles any overflow if the image is larger than the container */
    cursor: none; /* Hides the cursor over the container */
}

#display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 6s ease-in-out; /* Slow fade-in transition for consistency */
    opacity: 0; /* Start invisible */
}

#display-image.fade-in {
    opacity: 1; /* Transition to fully visible */
    animation: fadeIn 6s forwards;  /* Consistent with transition timing */
}

#display-image.fade-out {
    animation: fadeOut 6s forwards; /* Consistent with transition timing */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}