/*
    NOTE TO STUDENTS: DON'T MODIFY THE CODE IN THIS FILE!

    If you do, you risk messing up the template!
    However, feel free to look at the CSS Properties used.

    Some of them are relatively advanced, but you are encouraged
    to do your own research to try to understand how they work.

    If you get stuck, feel free to ask about them in office hours!
*/

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    overflow: hidden;
}

.scene {
    width: 600px;
    height: 300px;
    perspective: 500px;
}

.gallery {
    width: 600px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(500px) translateY(-0px);
    /* 500px? */
}

.wall {
    position: absolute;
    width: 600px;
    height: 300px;
    border: 3px solid #666666;
    background: 
        radial-gradient(#00000011, #00000088),
        20% center/50% url("../images/white-brick-wall.avif");
}

.ceiling {
    position: absolute;
    width: 600px;
    height: 600px;
    border: 2px solid #0f0f0f;
}

.ceiling {
    background: 
        radial-gradient(
            #00000099,
            #00000099
        ),
        center/25% url("../images/metal_ceiling_2.jfif");
    transform: rotateX(-90deg) translateZ(-300px);
}

.floor {
    position: absolute;
    width: 2400px;
    height: 2400px;
    border: 2px solid #0f0f0f;
}

.floor {
    background: 
        radial-gradient(
            #00000088,
            #00000022
        ),
        center/30% url("../images/wood_flooring_H.jpg")
        ;
    transform: 
        translateX(-900px) 
        translateY(-900px) 
        translateZ(-500px) 
        rotateX(90deg) 
        translateZ(-300px);
}

.left {
    transform: rotateY(90deg) translateZ(300px);
}

.right {
    transform: rotateY(-90deg) translateZ(300px);
}

.back {
    transform: rotateY(0deg) translateZ(-300px);
}

.showing-area {
    position: absolute;
    width: 600px;
    height: 300px;
    transform: rotateY(0deg) translateZ(-295px);
    text-align: center;
}

.display-space {
    max-width: 33.3%;
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
    -webkit-box-reflect: below 0px linear-gradient(transparent, #00000022);
}