:root {
    --rotateSpeed: 8s;
    --rotateSpeed2: 13s;
    --borderColor: #333;
    --borderAccent: #C0C0C0;
    --wallColor: #3988;
}

body {
    background: var(--wallColor);
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    perspective: 12em;
    perspective-origin: 50% calc(50% - 0.5em);
    animation: lightsOut var(--rotateSpeed) forwards linear;
}

.scene {
    position: absolute;
    transform-style: preserve-3d;
    animation: sceneRotate var(--rotateSpeed) forwards ease-in-out;
}

.floor {
    width: 15em;
    height: 15em;
    background-image: radial-gradient(#0000, #000 75%), repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
    background-size: 100%, 1em 1em;
    position: absolute;
    transform: translate(-50%, -50%) rotateX(90deg);
    top: 5em;
}

.cube {
    width: 3em;
    height: 4em;
    transform-style: preserve-3d;
    position: absolute;
    bottom: -5em;
}

.screen1, .screen2 {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 .25em var(--borderAccent) inset;
}

.screen1 {
    transform-style: preserve-3d;
    background: #3983;
    transform: rotateY(180deg) translateZ(9em) translateY(-1em);
    box-shadow: 0 0 0 .1em inset var(--borderColor);
}

.screen2 {
    transform-style: preserve-3d;
    background: #3982;
    transform: rotateY(180deg) translateZ(9em) translateX(5em) translateY(-1em);
    box-shadow: 0 0 0 .1em inset var(--borderColor);
}

.left, .right, .top {
    position: absolute;
    background: var(--borderColor);
    box-shadow: 0 0 2px inset var(--borderAccent);
}

.left {
    height: 100%;
    width: .2em;
    transform: translateX(-.1em) translateZ(.1em) rotateY(90deg);
}

.right {
    height: 100%;
    width: .2em;
    transform: translateX(2.9em) translateZ(.1em) rotateY(90deg);
}

.top {
    height: 3em;
    width: .2em;
    transform: translateX(1.4em) translateY(-5.5em) translateZ(.1em) rotateZ(90deg) rotateY(90deg);
}

.front {
    background: rgb(192, 192, 192);
    background: linear-gradient(333deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 17%, rgba(223, 223, 223, 1) 32%, rgba(203, 203, 203, 1) 36%, rgba(192, 192, 192, 1) 46%, rgba(255, 255, 255, 1) 49%, rgba(213, 213, 213, 1) 53%, rgba(192, 192, 192, 1) 58%, rgba(227, 227, 227, 1) 68%, rgba(255, 255, 255, 1) 77%, rgba(192, 192, 192, 1) 85%);
    transform: translateZ(2px);
    width: 100%;
    height: 100%;
}

/*.back{
        transform: translateZ(0.2em);
        width:100%;
        height: 100%;
      }*/

.ghost {
    position: relative;
    bottom: 2.4em;
    right: -1em;
    background: white;
    height: 2.3em;
    width: 1.3em;
    border-radius: 50% 50% 0 0;
}

.eyeLeft {
    position: absolute;
    height: .3em;
    width: .2em;
    top: .5em;
    left: .8em;
    border-radius: 50%;
    background: black;
}

.eyeRight {
    position: absolute;
    height: .3em;
    width: .2em;
    top: .5em;
    left: .4em;
    border-radius: 50%;
    background: black;
}

.mouth {
    position: absolute;
    height: .3em;
    width: .2em;
    top: 1em;
    left: .6em;
    border-radius: 50%;
    background: black;
}

.mouth2 {
    position: absolute;
    height: .3em;
    width: .5em;
    top: 1em;
    left: .5em;
    border-radius: 0 0 50% 50%;
    background: black;
}

.g1 {
    opacity: 0;
    animation: appear2 var(--rotateSpeed) infinite linear;
    animation-delay: 5s;
    transform: translateY(-2.2em) translateZ(-10em) scale(1.5) skewX(-15deg);
}

.g2 {
    animation: appear var(--rotateSpeed2) infinite ease-in-out;
}

@keyframes sceneRotate {
    0% {
        transform: translateX(1em) translateZ(1em) translateY(2em) rotateY(-25deg);
    }
    95% {
        transform: translateX(4em) translateZ(8em) translateY(1em) rotateY(5deg);
    }
    100% {
        transform: translateX(4em) translateZ(8em) translateY(1em) rotateY(5deg);
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: translateX(-1em);
    }
    32% {
        opacity: 0;
    }
    33% {
        opacity: .5;
    }
    34% {
        opacity: 0;
    }
    35% {
        opacity: .6;
    }
    36% {
        opacity: .3;
    }
    47% {
        opacity: .1;
    }
    48% {
        opacity: 0;
        transform: translateX(5.5em);
    }
    51% {
        opacity: 0;
        transform: translateX(5.5em);
    }
    83% {
        opacity: 0;
    }
    84% {
        opacity: .8;
    }
    100% {
        opacity: 0;
        transform: translateX(-1em);
    }
}

@keyframes appear2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    56% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lightsOut {
    0% {
        background-color: var(-wallColor)
    }
    80% {
        background-color: var(-wallColor)
    }
    81% {
        background-color: black
    }
    100% {
        background-color: black
    }
}