.room1, .room2, .room3 {
   width:100%;
   height:100%;
   transform-style: preserve-3d;
}

:is(.room1-frontWall, .room1-backWall, .room1-rightWall, .room1-leftWall, .room1-frontWall,  .room1-floor, .room1-ceiling, .room2-frontWall, .room2-backWall, .room2-rightWall, .room2-leftWall, .room2-ceiling, .room2-frontWall,  .room2-floor, .room2-ceiling, .room3-frontWall, .room3-backWall, .room3-rightWall, .room3-leftWall, .room3-frontWall,  .room3-floor, .room3-ceiling) {
   pointer-events: none;
}

.art {
   pointer-events: all;
}

.room1-frontWall {
    position: absolute;
    width: 20em;
    height: 20em;
    top: -16em;
    left:-10em;
    transform: translateZ(-10em);
 }

 .room1-backWall {
   position: absolute;
   width: 20em;
   height: 20em;
   top: -16em;
   left:-10em;
   transform: translateZ(10em);
}

.room1-rightWall {
    position: absolute;
    width: 20em;
    height: 20em;
    top: -16em;
    transform: rotateY(90deg);
    background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 90%),
       var(--room1-rightWall);
    background-size: cover;
 }

 .room1-leftWall {
    position: absolute;
    width: 20em;
    height: 20em;
    top: -16em;
    left:-20em;
    transform: rotateY(-90deg);
    background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 90%),
       var(--room1-leftWall);
    background-size: cover;
 }
 
 .room1-ceiling {
    top: 1em;
    position: absolute;
    transform: 
       translate(-50%, -50%)
       rotateX(90deg)
       translateZ(15em);
    width: 20em;
    height: 20em;
    background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 90%),
      var(--room1-ceiling);
    background-size: cover;
    background-position: center center;
 }
 
 .room1-frontWall, .room1-backWall {
    background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 90%),
       var(--room1-frontWall);
    background-size: cover;
 }

 .room1-floor, .room2-floor {
    top: 1em;
    z-index: 0;
    position: absolute;
    transform: 
       translate(-50%, -50%)
       rotateX(90deg)
       translateZ(-3em);
    width: 20em;
    height: 20em;
    background-size: cover;
 }

 .room1-floor { 
   background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 70%),
       var(--room1-floor);
 }

 .room2-floor {
   background-image: 
       radial-gradient(#1111, rgb(0, 0, 0) 70%),
       var(--room2-floor);
 }

 .room3-rightWall {
   position: absolute;
   width: 20em;
   height: 20em;
   top: -16em;
   transform: rotateY(90deg) translateX(20em);
   background-image: 
      radial-gradient(#1111, rgb(0, 0, 0) 70%),            
      var(--room3-rightWall);
      background-size: cover;
}

.room3-leftWall {
   position: absolute;
   width: 20em;
   height: 20em;
   top: -16em;
   left:-20em;
   transform: rotateY(-90deg) translateX(-20em);
   background-image:  
      radial-gradient(#1111, rgb(0, 0, 0) 70%),                         
      var(--room3-leftWall);
      background-size: cover;
}

.room3-frontWall {
   background-image:   
      radial-gradient(#1111, rgb(0, 0, 0) 70%),                       
      var(--room3-frontWall);
   background-size: cover;
   position: absolute;
   width: 20.1em;
   height: 20em;
   top: -16em;
   left:-10.1em;
   transform: translateZ(-30em);            
}

.room3-ceiling {
   top: 0;
   position: absolute;
   transform: translateY(-20em) translateX(-50%) translateZ(-20em) rotateX(90deg);
   width: 20em;
   height: 20em;
   background-image: 
      radial-gradient(#1111, rgb(0, 0, 0) 90%),
      var(--room3-ceiling);
   background-size: cover;
   background-position: center center;   
}

.room3-floor {
   position: absolute;
   transform: translateY(-6em) translateX(-50%) translateZ(-20em) rotateX(90deg);
   width: 20em;
   height: 20em;
   background-image: 
   radial-gradient(#1111, rgb(0, 0, 0) 70%),            
      var(--room3-floor);
   background-size: 20em 20em;
   z-index: 2;
}

.room2-floor {
   transform: 
      translate(-150%, -50%)
      rotateX(90deg)
      translateZ(-3em);
}

.room2-rightWall {
   background-image:   
      radial-gradient(#1111, rgb(0, 0, 0) 70%),                       
      var(--room2-rightWall);
   background-size: cover;
   position: absolute;
   width: 20em;
   height: 20em;
   top: -16em;
   left:-40em;
   transform: translateX(10em) translateZ(-10em); 
}

.room2-leftWall {
   position: absolute;
   width: 20em;
   height: 20em;
   top: -16em;
   left:-40em;
   transform: rotateY(-90deg);
   background-image: 
      radial-gradient(#1111, rgb(0, 0, 0) 90%),
      var(--room2-leftWall);
   background-size: cover;
}

.room2-frontWall {
   background-image:  
      radial-gradient(#1111, rgb(0, 0, 0) 70%),                        
      var(--room1-frontWall);
   background-size: cover;
   position: absolute;
   width: 20.1em;
   height: 20em;
   top: -16em;
   left:-10.1em;
   transform: translateX(-20em) translateZ(10em);            
}

.room2-ceiling {
   top: 0;
   position: absolute;
   transform: translateY(-20em) translateX(-150%) rotateX(90deg);
   width: 20em;
   height: 20em;
   background-image: 
      radial-gradient(#1111, rgb(0, 0, 0) 90%),
      var(--room2-ceiling);
   background-size: cover;
   background-position: center center;
}