html {
    background-color: #eeeeee;
    height: 100%;
}
body{
    max-width: 80ch;
    margin-inline: auto;
    color: #222222;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

container{
    display: block;
    width: fit-content;
    height: fit-content;
    position: relative;
    margin-inline: auto;
}

room{
    display: block;
    width: 20rem;
    height: 10rem;
    border: currentColor 10px solid;
    position: relative;
    overflow: hidden;
    background-color: #bbb;
}

rect{
    display: block;
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    border: currentColor solid 5px;
    width: var(--w);
    height: var(--h);
}

room[class^='reflection-'] {
    position: absolute;
    opacity: 0.5;
    bottom: var(--y); left: var(--x);
    z-index: 10; 
    background-color: #bbb4;
    border-color: color-mix(in srgb, currentColor, transparent 80%)
}


.cube {
    /* left: calc(var(--x) + 6.5rem);
    bottom: calc(var(--y) + -2.5rem);
    transform: rotate(45deg); */
    background-color: #fdd;
    animation: cubeMove 0.7s linear 2.2s forwards;
}

@keyframes cubeMove {
    0%{
        left: calc(var(--x) + 6.5rem);
        bottom: calc(var(--y) + -2.5rem);
        transform: rotate(45deg);
    }
    100% {
        left: calc(var(--x) + 18.5rem);
        bottom: calc(var(--y) + 9.5rem);
        transform: rotate(45deg);
    }
}


.piston-arm, .piston-head, .orange-portal, .reflection-one {
    animation: pistonMove 0.5s normal 2s forwards;
} 

@keyframes pistonMove {
    0%{
        bottom: calc(var(--y) + 0rem);
    }
    100% {
        bottom: calc(var(--y) + -4.5rem);
    }
}

.reflection-two {
    animation: reflectionMove 0.5s normal 2s forwards;
} 

@keyframes reflectionMove {
    0%{
        left: calc(var(--x) + 0rem);

        bottom: calc(var(--y) + 0rem);
    }
    100% {
        left: calc(var(--x) + 3.2rem);
        bottom: calc(var(--y) + 3.2rem);
    }
}