:root{
    --cabinet-x: 200px;
    --cabinet-y: 200px;
    --cabinet-z: 100px;
        --half-cabinet-x: calc(var(--cabinet-x) / 2);
        --half-cabinet-y: calc(var(--cabinet-y) / 2);
        --half-cabinet-z: calc(var(--cabinet-z) / 2);

    --SH-width: 200px;
    --SH-height: 100px;
    --SH-length: 100px;

    --SH-hypo: hypot(var(--SH-height), var(--SH-length));
    --SH-angle: atan2(var(--SH-length), var(--SH-height));
}

.scene{
    perspective: 750px;
    transform-style: preserve-3d;
    position: relative;
    height: 100dvh;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
    .world {
        position: relative;
        transform-style: preserve-3d;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(500px) translateY(100px) translateZ(950px) rotateY(-90deg);
        /* transform: translateX(-300px) translateY(0px) translateZ(-100px) rotateY(0deg); */
    }
        .world-In{
            animation: panIn 3s forwards ease-in-out;
        }
        .world-Out{
            animation: panOut 3s forwards ease-in-out;
        }
    .backWall{
        transform-style: preserve-3d;
        position: absolute;
        width: 1200px;
        height: 600px;
        transform: translateZ(-100px) translateY(-125px);
        background-color: rgb(35, 0, 80);
        background-image: radial-gradient(rgb(75, 255, 245) 20%, transparent 20%),
                          radial-gradient(rgb(255, 0, 110) 20%, transparent 20%);
        background-size: 90px 90px;
        background-position: 0 0, 45.5px 45.5px;
    }
    .leftWall{
        transform-style: preserve-3d;
        position: absolute;
        width: 1200px;
        height: 600px;
        transform: rotateY(90deg) translateZ(-600px) translateY(-125px) translateX(-500px);
        background-color: #000000;
        background-image: 
            radial-gradient(circle, transparent 40%, rgb(0, 191, 255) 40%, rgb(0, 191, 255) 50%, transparent 50%),
            radial-gradient(circle, transparent 40%, rgb(131, 56, 236) 40%, rgb(131, 56, 236) 50%, transparent 50%);
        background-size: 105px 105px;
        background-position: 0 0, 52.5px 52.5px;
    }
    .rightWall{
        transform-style: preserve-3d;
        position: absolute;
        width: 1200px;
        height: 600px;
        transform: rotateY(90deg) translateZ(600px) translateY(-125px) translateX(-500px);
        background-color: rgb(0, 159, 170);
        background-image: 
            linear-gradient(30deg, rgb(0, 0, 50) 12%, transparent 12.5%, transparent 87%, rgb(0, 0, 50) 87.5%, rgb(0, 0, 50)),
            linear-gradient(150deg, rgb(0, 0, 50) 12%, transparent 12.5%, transparent 87%, rgb(0, 0, 50) 87.5%, rgb(0, 0, 50)),
            linear-gradient(30deg, rgb(0, 0, 50) 12%, transparent 12.5%, transparent 87%, rgb(0, 0, 50) 87.5%, rgb(0, 0, 50)),
            linear-gradient(150deg, rgb(0, 0, 50) 12%, transparent 12.5%, transparent 87%, rgb(0, 0, 50) 87.5%, rgb(0, 0, 50)),
            linear-gradient(60deg, rgb(255, 0, 174) 25%, transparent 25.5%, transparent 75%, rgb(255, 0, 174) 75%, rgb(255, 0, 174)),
            linear-gradient(60deg, rgb(255, 0, 174) 25%, transparent 25.5%, transparent 75%, rgb(255, 0, 174) 75%, rgb(255, 0, 174));
        background-size: 40px 90px;
        background-position: 0 0, 0 0, 16.5px 28.578px, 16.5px 28.578px, 0 0, 16.5px 28.578px;
    }
    .ceiling{
        transform-style: preserve-3d;
        position: absolute;
        width: 1200px;
        height: 1200px;
        transform: rotateX(90deg) translateZ(425px) translateY(500px);
        background-color: grey;
    }
    .floor{
        transform-style: preserve-3d;
        position: absolute;
        width: 1200px;
        height: 1200px;
        transform: rotateX(90deg) translateZ(-175px) translateY(500px);
        background-color: rgb(10, 10, 10);
        background-image: 
            linear-gradient(rgb(115, 0, 255) 2px, transparent 2px),
            linear-gradient(90deg, rgb(115, 0, 255) 2px, transparent 2px),
            linear-gradient(rgb(0, 217, 255) 1px, transparent 1px),
            linear-gradient(90deg, rgb(0, 217, 255) 1px, transparent 1px);
        background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
        background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    }

.cabinet{
    transform-style: preserve-3d;
    transform: translateY(75px) translateZ(25px) translateX(425px) rotateY(-30deg);
}
    .cab-faces{
        position: absolute;
        transform-style: preserve-3d;
        background-color: rgba(222,222,222,1);
        border: 1px solid black;
    }

    .cab-front{
        transform: translate(-50%, -50%) translateZ(var(--half-cabinet-z));
        height: var(--cabinet-y);
        width: var(--cabinet-x);
    }
    .cab-left{
        transform: translate(-50%, -50%) rotateY(-90deg) translateZ(var(--half-cabinet-x));
        height: var(--cabinet-y);
        width: var(--cabinet-z);
    }
    .cab-right{
        transform: translate(-50%, -50%) rotateY(90deg) translateZ(var(--half-cabinet-x));
        height: var(--cabinet-y);
        width: var(--cabinet-z);
    }
    .cab-back{
        transform: translate(-50%, -50%) translateZ(calc(var(--half-cabinet-z) * -1));
        height: var(--cabinet-y);
        width: var(--cabinet-x);
    }

.screen-housing{
    transform-style: preserve-3d;
    transform: translateY(-75px) translateZ(25px) translateX(425px) rotateY(-30deg);
}
    .realScreen{
        transform-style: preserve-3d;
        position: absolute;
        transform: translate(-50%, -79%) translateZ(45px);
        background-color: black;
        word-wrap: break-word;
        width: 180px;
        height: 180px;
    }

    .buttonPanel{
        transform-style: preserve-3d;
        transform: rotateZ(180deg) translate(0px, -95px) translateZ(60px) rotateX(45deg);
    }
        .BP-faces{
            position: absolute;
            transform-style: preserve-3d;
            background-color: rgba(222, 222, 222, 1);
            border: 1px solid black;
        }

        .BP-panel{
            transform: translate(-50%, -50%) rotateX(-90deg) rotateZ(180deg) translateZ(25px);
            height: 75px;
            width: 200px;
        }
        .BP-bottom{
            transform: translate(-50%, -50%) rotateX(atan2(75, 50));
            width: 200px;
            height: calc(hypot(75px, 50px) + 1px);
        }
        .BP-left{
            clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
            transform: translate(-50%, -50%) rotateY(-90deg) translateZ(100.33px);
            height: 50px;
            width: 75px;
        }
        .BP-right{
            clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
            transform: translate(-50%, -50%) rotateY(-90deg) translateZ(-100.33px);
            height: 50px;
            width: 75px;
        }
        .BP-back{
            transform: translate(-50%, -50%) translateZ(-37.5px);
            height: 50px;
            width: 200px;
        }

    .SH1{
        transform-style: preserve-3d;
    }
        .SH1-faces{
            position: absolute;
            transform-style: preserve-3d;
            background-color: rgba(222,222,222,1);
            border: 1px solid black;
        }
        .SH1-top{
            transform: translate(-50%, -50%) rotateX(var(--SH-angle));
            width: var(--SH-width);
            height: var(--SH-hypo);
            border-left: none;
            border-right: none;
        }
        .SH1-back{
            transform: translate(-50%, -50%) translateZ(calc((var(--SH-length) / 2) * -1));
            height: var(--SH-height);
            width: var(--SH-width);
        }

    .SH2{
        transform-style: preserve-3d;
        transform: rotateZ(90deg) translate(-50px, 50px);
    }
        .SH2-faces{
            position: absolute;
            transform-style: preserve-3d;
            background-color: rgba(222,222,222,1);
            border: 1px solid black;
        }
        .SH2-top{
            transform: translate(-50%, -50%) rotateX(var(--SH-angle));
            width: var(--SH-width);
            height: var(--SH-hypo);
            border-left: none;
            border-right: none;
        }
        .SH2-back{
            transform: translate(-50%, -50%) translateZ(calc((var(--SH-length) / 2) * -1));
            height: var(--SH-height);
            width: var(--SH-width);
        }
        .SH2-bottom{
            transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc((var(--SH-height) / 2) * -1));
            height: var(--SH-length);
            width: var(--SH-width);
        }
    
    .SH3{
        transform-style: preserve-3d;
        transform: rotateZ(180deg) translate(0px, 100px);
    }
        .SH3-faces{
            position: absolute;
            transform-style: preserve-3d;
            background-color: rgba(222,222,222,1);
            border: 1px solid black;
        }
        .SH3-top{
            transform: translate(-50%, -50%) rotateX(var(--SH-angle));
            width: var(--SH-width);
            height: var(--SH-hypo);
            border-left: none;
            border-right: none;
        }
        .SH3-back{
            transform: translate(-50%, -50%) translateZ(calc((var(--SH-length) / 2) * -1));
            height: var(--SH-height);
            width: var(--SH-width);
        }
        .SH3-bottom{
            transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc((var(--SH-height) / 2) * -1));
            height: var(--SH-length);
            width: var(--SH-width);
        }

    .SH4{
        transform-style: preserve-3d;
        transform: rotateZ(-90deg) translate(50px, 50px);
    }
        .SH4-faces{
            position: absolute;
            transform-style: preserve-3d;
            background-color: rgba(222,222,222,1);
            border: 1px solid black;
        }
        .SH4-top{
            transform: translate(-50%, -50%) rotateX(var(--SH-angle));
            width: var(--SH-width);
            height: var(--SH-hypo);
            border-left: none;
            border-right: none;
        }
        .SH4-back{
            transform: translate(-50%, -50%) translateZ(calc((var(--SH-length) / 2) * -1));
            height: var(--SH-height);
            width: var(--SH-width);
        }
        .SH4-bottom{
            transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc((var(--SH-height) / 2) * -1));
            height: var(--SH-length);
            width: var(--SH-width);
        }


@keyframes panIn {
    0%{
        transform: translateX(500px) translateY(100px) translateZ(950px) rotateY(-90deg);
    }
    50%{
        transform: translateX(150px) translateY(0px) translateZ(250px) rotateY(0deg);
    }
    100%{
        transform: translateX(-380px) translateY(60px) translateZ(445px) rotateY(30deg);
    }
}
@keyframes panOut {
    0%{
        transform: translateX(-380px) translateY(60px) translateZ(445px) rotateY(30deg);
    }
    50%{
        transform: translateX(150px) translateY(0px) translateZ(250px) rotateY(0deg);
    }
    100%{
        transform: translateX(500px) translateY(100px) translateZ(950px) rotateY(-90deg);
        
    }
}