#scene{
  width:var(--width); height:var(--height);
  perspective:calc(var(--height)*0.4);
  -webkit-perspective:calc(var(--height)*0.4);
  -moz-perspective:var(--height);
}

.wall-front{ transform:rotateY(0deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px)); width:var(--width); height:var(--height); }
.wall-back{ transform:rotateY(180deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px)); width:var(--width); height:var(--height); }
.wall-floor{ transform:rotateX(90deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px)); width:var(--width); height:var(--height); }
.wall-ceiling{ transform:rotateX(-90deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px)); width:var(--width); height:var(--height); }
.wall-left{ transform:rotateY(90deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px)); width:var(--height); height:var(--height); }
.wall-right{ transform:rotateY(-90deg) translate3d(0,0,calc(0px - var(--height)/2 + 1px - (var(--width) - var(--height)))); width:var(--height); height:var(--height); }

/* background */
.wall-front{ background-image:url('/img/sky/sky_front.webp'); }
.wall-left{ background-image:url('/img/sky/sky_left.webp'); }
.wall-right{ background-image:url('/img/sky/sky_right.webp'); }
.wall-floor{ background-image:url('/img/sky/sky_bottom.webp'); }
.wall-ceiling{ background-image:url('/img/sky/sky_top.webp'); }
.wall-back{ background-image:url('/img/sky/sky_back.webp'); }

/* after */
/* .wall-top:after{ background-image:linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.3)); }
.wall-roomback:after{ background-image:linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.15)); }
.wall-right:after,
.wall-left:after{ background-image:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.1)); }
.wall-bottom:after{ background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.12)); } */