html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

html {
  font: 100% / 1.5 Arial;
}

body {
  perspective: 800px;
  background: black;
}

.key {
  display: inline-block;
  padding:.25em .5em;
  background: #fff;
  box-shadow: 0 2px 1px #666;
  border-radius: 3px;
  margin: .1em;
} 

.object {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
}

/*3D transform objects */	


.ceiling1 {
  width: 1500px;
  height: 800px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(-400px) translateZ(400px);
background: url("img/1.png")
}
	

.floor {
  width: 1500px;
  height: 800px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(-400px) translateZ(0px);
background-image: url(img/2.png); 
	  background-size: contain;
    background-repeat: repeat;
}	


.garden {
 width: 1500px;
  height: 800px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(400px) translateZ(0px);
background-image:  url('https://avatars.mds.yandex.net/i?id=98d2b8f434e81c8c66daaf70fdad8b99_l-8182659-images-thumbs&n=13'); background-repeat: repeat;
background-size: contain;
   }
   .garden1 {
    width: 800px;
    height: 800px;
    margin: -400px;
    transform: translate3d(0, 200px, 0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(400px) translateZ(4000px);
    background-image: url(https://usagif.com/wp-content/uploads/gifs/sun-40.gif);
    background-repeat: repeat;
    background-size: contain;
    border-radius: 100%;
    -webkit-box-shadow: 0px 0px 50px 5px rgb(0 0 0) inset;
    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2) inset;
}

.walkway {
 width: 200px;
  height: 800px;
  margin: -400px;
  transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(400px) translateZ(0px);
background-image: url(https://static.wixstatic.com/media/bdaef3_7b5c8ab3f2684e938081c3fb00cf96dd~mv2.png); 
	  background-size: contain;
    background-repeat: repeat;

}

.road {
  width: 800px;
  height: 1500px;
  margin: -400px;
  left: -350px;
  transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(90deg) translateX(1200px) translateY(-300px) translateZ(350px);
background-image: url(https://furman.top/uploads/posts/2022-06/1655759141_21-furman-top-p-tekstura-zemli-mainkraft-krasivo-21.png); 
	  background-size: contain;
    background-repeat: repeat;	
background-size: contain;
} 

	
	.wall {
	 width: 400px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(0px) translateZ(0px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}

.wall2 {
	 width: 400px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(0px) translateZ(20px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}       
 
	.wall3 {
	 width: 900px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(200px) translateY(0px) translateZ(0px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}

.wall4 {
	 width: 900px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(200px) translateY(0px) translateZ(20px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		} 

	.wall5 {
	 width: 1500px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(-400px) translateY(0px) translateZ(800px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		} 


	.wall6 {
	 width: 800px;
  height: 400px;
		left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(400px) translateY(0px) translateZ(-800px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		} 

	.wall7 {
	 width: 800px;
  height: 400px;
  left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(400px) translateY(0px) translateZ(700px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}

	.wall8 {
	 width: 20px;
  height: 400px;
 left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(10px) translateY(0px) translateZ(-10px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}


	.wall9 {
	 width: 20px;
  height: 400px;
 left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(10px) translateY(0px) translateZ(190px);
background-image: url("img/1.png");	
	background-size: contain;
  background-repeat: repeat;
		}

	.housenumber {
	 width: 100px;
  height: 50px;
   left: 0px;
  margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-150px) translateY(150px) translateZ(0px);
color: white;
text-shadow: 2px 2px 2px black;
background-image: linear-gradient(white, grey);
border: 2px solid dimgrey;
border-radius: 20%;
text-align: center;
font-size: 15px;
		}
 
.welcomesign {
 width: 190px;
  height: 50px;
  margin: -400px;
  transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(2px) translateY(-30px) translateZ(-370px);
border: 2px solid saddlebrown;  
color: white;
font-size: 30px; 
text-shadow: 2px 2px 2px black;  
text-align: center;  
background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
    linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
    linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
    background-size: 25px 25px;  
}
  
.door
{
  background-image: url(https://static.wixstatic.com/media/bdaef3_8e75e9d6051f4dbfb19ec8ca5b243eeb~mv2.jpg);
	  background-size: contain;
    background-repeat: no-repeat;
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  height:410px;
margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(100deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);
  transform-origin: left;
  /*Speed of the Door animation*/
  transition: all 0.5s ease-in-out; 
}

/* Computer table */
	
	.computertable {
transform: translate3d(0,200px,0) rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateX(990px) translateY(20px) translateZ(550px);		
		
	}
	
  .tableplateup {
	  width: 200px;
  height: 400px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(150px);	
	}	
	
.tableplatedown {
	  width: 200px;
  height: 400px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(130px);	
	}
	
.tableplatefront {
  width: 400px;
  height: 20px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(0px);	
	}
	
.tableplateback {
   width: 400px;
  height: 20px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(-50px) translateZ(-200px);	
	}
	
.tableplateleft {
   width: 200px;
  height: 20px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(50px) translateZ(-200px);	
	}
	
.tableplateright {
   width: 200px;
  height: 20px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(50px) translateZ(200px);	
	}
	
.tablestandfront {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-190px) translateY(-50px) translateZ(-10px);	
	}
	
.tablestandback {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-190px) translateY(-50px) translateZ(10px);	
	}
	
.tablestandleft {
	  width: 20px;
  height: 130px;
  margin: -400px;
    background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(-0px) translateY(50px) translateZ(-200px);	
	}
	
.tablestandright {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(-0px) translateY(50px) translateZ(-180px);	
	}
	
	
.tablestandfront2 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(190px) translateY(-50px) translateZ(-10px);	
	}
	
.tablestandback2 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(190px) translateY(-50px) translateZ(10px);	
	}
	
.tablestandleft2 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(-0px) translateY(50px) translateZ(200px);	
	}
	
.tablestandright2 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(-0px) translateY(50px) translateZ(180px);	
	}
	
	
.tablestandfront3 {
	  width: 20px;
  height: 130px;
  margin: -400px;
    background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-190px) translateY(-50px) translateZ(170px);	
	}
	
.tablestandback3 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-190px) translateY(-50px) translateZ(190px);	
	}
	
.tablestandleft3 {
	  width: 20px;
  height: 130px;
  margin: -400px;
    background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(50px) translateZ(-200px);	
	}
	
.tablestandright3 {
	  width: 20px;
  height: 130px;
  margin: -400px;
    background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(50px) translateZ(-180px);	
	}	
	
   .tablestandfront4 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(190px) translateY(-50px) translateZ(170px);	
	}
	
   .tablestandback4 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(190px) translateY(-50px) translateZ(190px);	
	}
	
     .tablestandleft4 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(50px) translateZ(200px);	
	}
	
	.tablestandright4 {
	  width: 20px;
  height: 130px;
  margin: -400px;
   background-image: url(https://static.wixstatic.com/media/bdaef3_9066de5f35fb45efa43ae25ccb160e01~mv2.jpg);   
    background-repeat: repeat;	
  transform: translate3d(0,200px,0) rotateX(360deg) rotateY(0deg) rotateZ(0deg) translateX(180px) translateY(50px) translateZ(180px);	
	}	
	
	
/* monitor screen */	

	.monitorscreen {				
 height: 800px;
 width: 1200px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(360deg) rotateY(270deg) rotateZ(360deg) translateX(0px) translateY(-490px) translateZ(452px) scale(0.25) ;
 background-color: black;
 border: 1px solid grey;			
	}		
	
	.monitorfront {				
 height: 200px;
 width: 300px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(190px) translateZ(0px);		
 background-color: black;
 border: 1px solid grey;		
	}	
	
	.monitorback {				
 height: 200px;
 width: 300px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(190px) translateZ(10px);		
 background-color: black;
 		
	}
	
	.monitorleft {				
 height: 200px;
 width: 10px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(150px) translateY(190px) translateZ(150px);		
 background-color: dimgrey;
 		
	}
	
	
  .monitorright {				
 height: 200px;
 width: 10px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(150px) translateY(190px) translateZ(-150px);		
 background-color: dimgrey;
 		
	}

  .monitorup {				
 height: 300px;
 width: 10px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(150px) translateY(0px) translateZ(300px);		
 background-color: dimgrey;
 		
	}

  .monitordown {				
 height: 300px;
 width: 10px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(150px) translateY(0px) translateZ(140px);		
 background-color: dimgrey;
 		
	}
	
/* Monitor stand */	
	
	.monitorstandfront {
	 height: 100px;
 width: 15px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(50px) translateZ(169px);		
 background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
	
		.monitorstandback {
	 height: 120px;
 width: 15px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(65px) translateZ(185px);		
background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
	
	
	.monitorstandleft {
  height: 100px;
 width: 15px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(177px) translateY(50px) translateZ(8px);		
background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
	
	
   .monitorstandright {
  height: 100px;
 width: 15px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(177px) translateY(50px) translateZ(-8px);		
 background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
	
   .monitorconnectleft {
  height: 15px;
 width: 34px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(158px) translateY(65px) translateZ(-8px);		
 background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
   .monitorconnectright {
  height: 15px;
 width: 34px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(158px) translateY(65px) translateZ(8px);		
background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}
	
   .monitorconnectup {
  height: 15px;
 width: 34px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(158px) translateY(0px) translateZ(73px);		
background-image: linear-gradient(white, grey);   
 border: 1px solid dimgrey;	
	}
	
 .monitorconnectdown {
  height: 15px;
 width: 34px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(158px) translateY(0px) translateZ(59px);		
background-image: linear-gradient(white, grey);
 border: 1px solid dimgrey;	
	}	
	
	.monitorweight {
	  height: 200px;
 width: 40px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(158px) translateY(0px) translateZ(53px);		
 background-color: black;
 border: 1px solid dimgrey;		
	}	
	
/* Computer button */	
	
	
	
	.computerbutton {
		 height: 20px;
 width: 30px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateX(-160px) translateY(-10px) translateZ(-5px);		
 background-color: transparent;
	}
	
	input {
	width: 10px;
	height: 10px;
  background-color: black;	
  display: inline-block;
  padding:.25em .5em;
  border: 1px solid red;		
  box-shadow: 1px 1px 1px black;
  border-radius: 20%;
  margin: .1em;	
  font-size: 14px;		
	}
	

	.monitorswitch {
	 height: 200px;
 width: 300px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(190px) translateZ(-2px);		
 background-color: black;
 border: 1px solid grey;	
	}	
	
	.monitorout {
height: 200px;
 width: 300px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(490px) translateZ(0px);		
 background-color: black;	
	}
	
/* Computer */	
	
	.computerfront {
		 height: 80px;
 width: 40px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-170px) translateY(20px) translateZ(0px);		
background-image: linear-gradient(black, white);
		}
	
	.computerback {
		 height: 80px;
 width: 40px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-170px) translateY(20px) translateZ(80px);		
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
		}
	
	.computerup {
		 height: 40px;
 width: 80px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(20px) translateY(-170px) translateZ(40px);		
background-color: black;
		}
	
  	.computerleft {
		 height: 80px;
 width: 80px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(20px) translateY(20px) translateZ(150px);			
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
		}
	
	  	.computerright {
		 height: 80px;
 width: 80px;		
 margin: -400px;
 transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(20px) translateY(20px) translateZ(190px);			
 background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
		}


/*  Stool  */	

.stool {
transform: translate3d(0,200px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-600px) translateY(-20px) translateZ(-600px);
}

.stoolup {
height: 100px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(0px) translateZ(360px);
  background-color:  	#DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stooldown {
height: 100px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(0px) translateZ(350px);
  background-color:  	#DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolfront {
height: 10px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(310px) translateZ(-50px);
  background-color:  	#DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolback {
height: 10px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(310px) translateZ(50px);
  background-color:   #DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolright {
height: 10px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(310px) translateZ(50px);
  background-color:  	#DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolleft {
height: 10px;
width: 100px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(310px) translateZ(150px);
  background-color:  	#DEB887;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandfront1 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(300px) translateZ(-50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandback1 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(300px) translateZ(-40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandleft1 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(45px) translateY(300px) translateZ(95px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandright1 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(45px) translateY(300px) translateZ(105px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandfront2 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(300px) translateZ(50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandback2 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(300px) translateZ(40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandleft2 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-45px) translateY(300px) translateZ(95px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandright2 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-45px) translateY(300px) translateZ(105px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
} 

.stoolstandfront3 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(300px) translateZ(-50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandback3 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(300px) translateZ(-40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandleft3 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(45px) translateY(300px) translateZ(195px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandright3 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(45px) translateY(300px) translateZ(185px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}   

.stoolstandfront4 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(300px) translateZ(50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandback4 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(300px) translateZ(40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandleft4 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-45px) translateY(300px) translateZ(195px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolstandright4 {
height: 150px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(-45px) translateY(300px) translateZ(185px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframefront1 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(210px) translateZ(-50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeback1 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(210px) translateZ(-40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeup1 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(45px) translateZ(215px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframedown1 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(45px) translateZ(205px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframefront2 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(210px) translateZ(50px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeback2 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(210px) translateZ(40px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}
 
.stoolframeup2 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(-45px) translateZ(215px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframedown2 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(110px) translateY(-45px) translateZ(205px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframefront3 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(210px) translateZ(60px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeback3 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(210px) translateZ(70px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeup3 {
height: 80px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(0px) translateZ(250px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframedown3 {
height: 80px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(0px) translateZ(240px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
} 

.stoolframefront4 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(210px) translateZ(160px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeback4 {
height: 10px;
width: 80px;
transform: translate3d(0,200px,0) rotateX(180deg) rotateY(90deg) rotateZ(0deg) translateX(0px) translateY(210px) translateZ(150px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}

.stoolframeup4 {
height: 80px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(0px) translateZ(250px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}
 
.stoolframedown4 {
height: 80px;
width: 10px;
transform: translate3d(0,200px,0) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateX(190px) translateY(0px) translateZ(240px);
  background-color: saddlebrown;
  border-color: #2b0276;
  background-image: linear-gradient(transparent 45%, black 45% 55%, transparent 50%);
  background-size: 12px 12px;
}
      

/* panels for the demo */

.panel {
  position: fixed;
  padding: 1em;
  text-align: center;
  border-radius: 4px;
}

.panel cite {
  font-style: normal;
}

.panel a {
  color: #fc0;
}

.panel--help {
  background: rgba(255,255,255,.7);
  top: 1em;
  left: 1em;
}

.panel--about {
  font-style: normal;
  background: rgba(0,0,0,.5);
  bottom: 1em;
  left: 1em;
  right: 1em;
  color: #fff;
}
.home {
  position: absolute;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  top: 5%;
  right: 8%;
  transform: translate(-50%, -50%) scale(1.0);
  border: white solid 1px;
  padding: 5px;
  border-radius: 100%;
  z-index: 1000;
}