.deur {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
}

#intro {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    transition: opacity 1s ease-out;
}

#door, #door-frame {
    position: absolute;
    width: 200px;
    height: auto;
}

#door {
    transform-origin: left center; /* Set the transform origin to the left side */
    transform: rotateY(10deg); /* Slightly open the door initially */
}

#door-frame {
    z-index: 1; /* Ensure the door frame is on top */
}

@keyframes openDoor {
    0% { transform: rotateY(10deg); } /* Slightly open initially */
    100% { transform: rotateY(-90deg); } /* Rotate to the right */
}

.open {
    animation: openDoor 2s forwards;
}

@media (max-width: 600px) {
    #door, #door-frame {
        width: 100px; /* Resize for mobile view */
    }
}