body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e1e1e, #333); /* of gewoon #1e1e1e */
}

.container {
    position: relative;
    display: flex; /* flex toevoegen */
    justify-content: center; /* horizontaal centreren */
    align-items: center; /* verticaal centreren */
    overflow: hidden;
}
.bg-wrapper {
    position: relative;
    display: inline-block; /* past zich aan aan de afbeelding */
}

.bg-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    transition: opacity 1.0s ease-in-out;
}

.bg-img.animate {
    animation: bgZoomOut 1s forwards; 
        transform-origin: 50% 23%; /* horizontaal midden, 20% boven het midden */

}

@keyframes bgZoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* SCREEN HOVER EFFECT */
.screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/screenhover.png") no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

.container:not(.on):not(.animating) .screen:hover::after {
    opacity: 1;
}

/* SCREEN */
.screen {
    position: absolute;
    top: 17.9%;
    left: 23.5%;
    width: 51.5%;
    height: 34.2%;
    cursor: pointer;
    border: 2px solid transparent;
    z-index: 3;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ONBUTTON */
.onbutton {
    position: absolute;
    top: 56.7%;
    left: 73.96%;
    width: 1.8%;
    height: 3.7%;
    cursor: pointer;
    border: 2px solid transparent;
    z-index: 4;
    background-color: transparent;
}

/* TURN ON BACKGROUND SWITCH */
.container.on .bg-img {
    content: url("../images/gamingsetupon.jpg");
    transition: opacity 0.9s ease-in-out;
}
.crossfade-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    z-index: 2; /* onder .screen (z-index:3) en .onbutton (z-index:4) */
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* gebruik 'cover' als jouw img object-fit: cover gebruikt */
}