:root {
    --boxColor: #0ff7;
    --buildingColor1: #646161;
    --buildingColor1Dark: #555555;
    --windowColor1: #000000b5;
    --daytime: 
        radial-gradient(closest-side,#f6ff00a3, transparent),
        linear-gradient(180deg, #00bbff, #0080ff, #00bbff);
    --nighttime: 
        radial-gradient(closest-side, #ffffffa4, transparent, transparent, #00000092),
        linear-gradient(180deg, #1b1b1b, #000000, #1b1b1b);
    --sideWalkColor: #1e1e1e;
    --groundColor: #0e0e0e;

    --penthouseHeight: .5em;
    --penthouseWidth: .75em;
    --penthouseDepth: .75em;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
}

.hero {
    perspective: 12em;
    perspective-origin: 50% calc(50% - 2.75em);
}

.daytime {
    background: var(--daytime);
}

.nighttime {
    background: var(--nighttime);
}

.moveCloser {
    animation: moveCloser 9.5s linear forwards;
}

@keyframes moveCloser {
    0% {}
    100% {perspective: 4em;}
}

.scene {
    position: relative;
    transform-style: preserve-3d;
}

.floor {
    position: absolute;
    top: 1em;
    transform: 
        translate(-50%, -50%)
        rotateX(90deg);
    width: 20em;
    height: 20em;
    background: 
        radial-gradient(#0000, #000 75%),
        var(--groundColor);
    background-size:100%, 1em 1em;

}

.building {
    position: absolute;

    transform-style: preserve-3d;
    
}

.tall {
    height: 4.5em;
    width: 2em; 
    top: -4em;
    left: 1em;
    

    .side {
        position: absolute;
        height: 100%;
        width: 100%;
        background: var(--buildingColor1);
        backface-visibility: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.5%;
        row-gap: 10px;
        flex-wrap: wrap;
        box-shadow: 0 0 1.5em #000a inset;
    }

    .window {
        height: 1em;
        width: 20%;
        background: var(--windowColor1);
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.95) inset;
    }

    .front {
        transform: translateZ(1em);
        background: linear-gradient(45deg, 0% transparent, 40% transparent, 50% #ffffff98, 60% transparent, 100% transparent);
    }

    .front .window, .left .window {
        background:  
        linear-gradient(45deg, transparent, #ffffff98, transparent),
        var(--windowColor1);
    }

    .right .window {
        background: 
            linear-gradient(45deg, 0% #000, 40% transparent, 50% #ffffff98, 60% transparent, 100% #000),
            var(--windowColor1);
    }
    
    .back {
        transform: rotateY(180deg) translateZ(1em);
    }

    .right {
        transform: rotateY(90deg) translateZ(1em);
        background: 
            linear-gradient(90deg, #000a, #000a),
            var(--buildingColor1Dark);
    }

    .left {
        transform: rotateY(270deg) translateZ(1em);
    }

    .top {
        height: 2em;
        width: 2em;
        transform: translateY(-50%) rotateX(90deg);
    }
    
    .bottom {
        height: 2em;
        width: 2em;
        transform: translateY(3.5em) rotateX(90deg);
        box-shadow: 
            0 0 .5em .125em #000000bb,
            0 0 0 .25em  var(--sideWalkColor);
    }
}

.wide {
    height: 2em;
    width: 3.25em;
    top: -1.5em;
    left: -3em;

    .side {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: var(--buildingColor1);
        backface-visibility: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.5%;
        flex-wrap: wrap;
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.95) inset;
    }

    .window {
        height: 20%;
        width: 20%;
        background-color: var(--windowColor1);
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.95) inset;
    }
    
    .front {
        transform: translateZ(1em);
        background: linear-gradient(45deg, 0% transparent, 40% transparent, 50% #ffffff98, 60% transparent, 100% transparent);
    }

    .front .window, .left .window {
        background:  
        linear-gradient(45deg, transparent, #ffffff98, transparent),
        var(--windowColor1);
    }

    .right .window {
        background: 
            linear-gradient(45deg, 0% #000, 40% transparent, 50% #ffffff98, 60% transparent, 100% #000),
            var(--windowColor1);
    }

    
    .back {
        transform: rotateY(180deg) translateZ(1em);
    }

    .right {
        height: 2em;
        width: 2em;
        transform: rotateY(90deg) translateZ(2.25em) ;
        background: 
            linear-gradient(90deg, #000a, #000a),
            var(--buildingColor1Dark);
    }

    .left {
        height: 2em;
        width: 2em;
        transform: rotateY(270deg) translateZ(1em);
    }

    .top {
        transform: translateY(-50%) rotateX(90deg);
    }
    
    .bottom {
        transform: translateY(1em) rotateX(90deg);
        box-shadow: 
            0 0 .5em .125em #000000bb,
            0 0 0 .25em  var(--sideWalkColor);
    }
}

.penthouse {
    
    position: absolute;
    transform-style: preserve-3d;
    background: var(--buildingColor1);
    bottom: 1em;
    right: 2em;
    

    

    .side {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: var(--buildingColor1);
        backface-visibility: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.5%;
        flex-wrap: wrap;
        box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.95) inset;
    }

    .front {
        transform: translateZ(.375em);
    }
    .back {
        transform: rotateY(180deg) translateZ(.375em);
    }
    .right {
        transform: rotateY(90deg) translateZ(.375em);
    }
    .left {
        transform: rotateY(270deg) translateZ(.375em);
    }
    .top {
        transform: translateY(-50%) rotateX(90deg);
    }
    .bottom {
        transform: translateY(.25em) rotateX(90deg);
    }
}

#building2 {
    transform: translateZ(3.5em) translateX(-1.25em);
}

#building3 {
    transform: translateZ(6.5em) translateX(-6.25em);
}

#building4 {
    transform: translateZ(-2.5em) translateX(5.25em);
}

#building5 {
    transform: translateZ(-1.5em) translateX(-5.5em);
}

#building6 {
    transform: translateZ(4.5em) translateX(6em);
}

#building7 {
    transform: translateZ(3.5em) translateX(-7.25em);
}

#building8 {
    transform: translateZ(1.25em) translateX(-7.25em);
}

#building9 {
    transform: translateZ(1.75em) translateX(2.75em);
}

#building10 {
    transform: translateZ(6.5em) translateX(2.5em);
}

#building11 {
    transform: translateZ(-3.5em) translateX(-3.25em);
}

#building12 {
    transform: translateZ(-0.5em) translateX(-3.25em);
}

#building13 {
    transform: translateZ(6.25em) translateX(3em);
}

#building14 {
    transform: translateZ(2.25em) translateX(2.55em);
}

#building15 {
    transform: translateZ(6.75em) translateX(-3.25em);
}