chair {
	display: block;
	position: absolute;
	height: 80px;
	width: 60px;
	background: #333;
	transform: translateY(10px);
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

chair backrest {
	display: block;
	position: absolute;
	height: 40px;
	width: 60px;
	background: #444;
	transform: translateZ(20px);
}

chair seat {
	display: block;
	position: absolute;
	height: 40px;
	width: 60px;
	background: #555;
	transform: translateY(20px);
}

chair leg {
	display: block;
	position: absolute;
	height: 10px;
	width: 10px;
	background: #222;
	transform: translateZ(-20px);
}

html,body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:rgb(40,40,40);
}
*{
	transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

scene{
	display:block;
	position:absolute;
	bottom:50%;
	left:50%;
	transform:scale(1);
}

room-cube{
	display:block;
	position:absolute;
	bottom:0px;
	left:50%;
	transform-origin:0% 0%;
	transform:rotateX(50deg) rotateZ(45deg);
	animation:spin 4s 1s linear infinite;
}
body:hover room-cube{
	animation:none;
}
@keyframes spin{
	0%{
		transform:rotateX(50deg) rotateZ(45deg);
	}
	25%{
		transform:rotateX(55deg) rotateZ(40deg);
	}
	50%{
		transform:rotateX(60deg) rotateZ(45deg);
	}
	75%{
		transform:rotateX(55deg) rotateZ(50deg);
	}
	100%{
		transform:rotateX(50deg) rotateZ(45deg);
	}
}
room-cube:before{
	content:'';
	height:0px;
	width:0px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	box-shadow:0px 0px 50px 125px rgba(0,0,0,0.375);
	transform:translateY(15px) translateX(105px) translateZ(-125px);
}
floor{
	display:block;
	position:absolute;
	height:300px;
	width:300px;
	background:orange;
	transform:translateX(-0.5px) translateY(-0.5px);
}
floor:before{
	content:'';
	display:block;
	height:20px;
	width:319.5px;
	position:absolute;
	top:100%;
	left:-20px;
	transform-origin:50% 0%;
	transform:rotateX(-90deg) rotateZ(180deg) translateY(-19.5px) translateX(-0.5px);
	box-shadow:inset -15px 15px 0px 0px #e6e6e6, inset 0px 20px 0px 0px #d49855;
	background-size:100% auto;
	background-position:50% 60%;
	background-repeat:no-repeat;
}
floor:after{
	content:'';
	display:block;
	height:20px;
	width:320px;
	position:absolute;
	top:100%;
	left:100%;
	transform-origin:0% 0%;
	transform:rotateX(-90deg) rotateY(90deg) rotateZ(180deg)  translateY(-19.5px) translateX(-319.5px);
	box-shadow:inset 15px 15px 0px 0px #cccccc, inset 0px 20px 0px 0px #ba864a;
	background-size:100% auto;
	background-position:50% 70%;
	background-repeat:no-repeat;
}

left-wall{
	display:block;
	position:absolute;
	height:300px;
	width:300px;
	background:#022952;
	transform:rotateX(-90deg) rotateY(90deg) translateZ(-150px) translateY(-150px);
}
left-wall:before{
	content:'';
	display:block;
	height:20px;
	width:320px;
	position:absolute;
	top:-20px;
	transform-origin:50% 100%;
	transform:rotateX(90deg) translateY(0.5px) translateX(-0.5px);
	box-shadow:inset -15px 15px 0px 0px #ffffff, inset 0px 20px 0px 0px #a0ba93;
	background-size:100% auto;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
left-wall:after{
	content:'';
	display:block;
	height:20px;
	width:300.5px;
	position:absolute;
	top:-20px;
	left:-100%;
	transform-origin:100% 100%;
	transform:rotateX(90deg) rotateY(-90deg) translateY(0.5px) translateX(-0.5px);
	box-shadow:inset 0px 15px 0px 0px #e6e6e6, inset 0px 20px 0px 0px #a0ba93;
	background-size:100% auto;
	background-position:50% 80%;
	background-repeat:no-repeat;
}

right-wall{
	display:block;
	position:absolute;
	height:300px;
	width:300px;
	background:#033365;
	transform:rotateX(-90deg) translateZ(-150px) translateY(-150px);
}
right-wall:before{
	content:'';
	display:block;
	height:20px;
	width:300.5px;
	position:absolute;
	top:-20px;
	transform-origin:50% 100%;
	transform:rotateX(90deg) translateY(0.5px) translateX(-0.5px);
	box-shadow:inset 0px 15px 0px 0px white, inset 0px 20px 0px 0px #aac69c;
	background-size:100% auto;
	background-position:50% 40%;
	background-repeat:no-repeat;
}
right-wall:after{
	content:'';
	display:block;
	height:20px;
	width:300.5px;
	position:absolute;
	top:-20px;
	left:100%;
	transform-origin:0% 100%;
	transform:rotateX(90deg) rotateY(90deg) translateY(0.5px) translateX(-0.5px);
	box-shadow:inset 0px 15px 0px 0px #cccccc, inset 0px 20px 0px 0px #95ad89;
	background-size:100% auto;
	background-position:50% 30%;
	background-repeat:no-repeat;
}

rug{
	height:240px;
	width:180px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-120px;
	margin-left:-90px;
	background:beige;
	box-shadow:1px 1px 3px 1px rgba(0,0,0,0.125);
}

coffee-table{
	height:92px;
	width:140px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-46px;
	margin-left:-70px;
	background:rgb(30,30,30);
	transform:rotateZ(-90deg) translateZ(52px);
}
coffee-table:before{
	content:'';
	height:6px;
	width:100%;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(10,10,10);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateY(-0.5px) translateX(-0.5px);
}
coffee-table:after{
	content:'';
	height:100%;
	width:6px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(20,20,20);
	transform-origin:100% 50%;
	transform:rotateY(-90deg) translateX(0.5px);
}

tv{
	height: 70px;
	width: 70px;
	background-color:#000;
		display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-120px;
	margin-left:-90px;
	background:beige;
	box-shadow:1px 1px 3px 1px rgba(0,0,0,0.125);
}

coffee-table shelf{
	height:80px;
	width:138px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-40px;
	margin-left:-69px;
	background:rgb(30,30,30);
	transform:translateZ(-24px);
}
coffee-table shelf:before{
	content:'';
	height:3px;
	width:100%;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(10,10,10);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateY(-0.5px) translateX(-0.5px);
}
coffee-table shelf:after{
	content:'';
	height:100%;
	width:3px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(20,20,20);
	transform-origin:100% 50%;
	transform:rotateY(-90deg) translateX(0.5px);
}

coffee-table leg{
	height:6px;
	width:6px;
	display:block;
	position:absolute;
	transform:translateZ(-1px);
}
coffee-table leg:before{
	content:'';
	height:6px;
	width:51px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(10,10,10);
	transform-origin:100% 50%;
	transform:rotateY(-90deg);
}
coffee-table leg:after{
	content:'';
	height:51px;
	width:6px;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(20,20,20);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateX(-0.5px);
}

coffee-table leg:nth-child(1){
	top:0%;
	left:0%;
}
coffee-table leg:nth-child(2){
	bottom:0%;
	left:0%;
}
coffee-table leg:nth-child(3){
	bottom:0%;
	right:0%;
}

desk {
	display: block;
	position: absolute;
	height: 60px;
	width: 120px;
	background: #5d5d5d;
	transform: translateX(50px) translateY(120px) translateZ(-30px) rotateX(-90deg);
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

desk:before {
	content: '';
	position: absolute;
	height: 3px;
	width: 120px;
	background: #4c4c4c;
	transform: translateY(-30px);
}

computer {
	display: block;
	position: absolute;
	height: 80px;
	width: 110px;
/* 	background: #333; */
	transform: translateX(60px) translateY(110px) translateZ(20px);
/* 	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); */
}

computer screen {
	border:8px solid #d7d7d7;
	display: block;
	position: absolute;
	height: 120px;
	width: 180px;
	background: #000;
	transform: translateX(2.5px) translateY(-40px);\
	box-shadow: 30px 30px 30px ;
}

computer screen text {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: orange;
	font-size: 18px;
	font-family: Arial, sans-serif;
	text-align: center;
}

computer2 {
	display: block;
	position: absolute;
	height: 40px;
	width: 60px;
/* 	background: #333; */
	transform: translateX(80px) translateY(190px) translateZ(20px);
/* 	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); */
}

computer2 screen2 {
	border:3px solid #d7d7d7;
	display: block;
	position: absolute;
	height: 70px;
	width: 100px;
/* 	background: #000; */
   background-image:url(https://45994852.fs1.hubspotusercontent-na1.net/hubfs/45994852/simon-berger-twukN12EN7c-unsplash.jpg);
	background-size: cover;
	transform: translateX(2.5px) translateY(-40px);
	box-shadow: 30px 30px 30px ;
}

computer2 screen2 text2 {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: orange;
	font-size: 18px;
	font-family: Arial, sans-serif;
	text-align: center;
}

computer3 {
	display: block;
	position: absolute;
	height: 40px;
	width: 40px;
/* 	background: #333; */
	transform: translateX(150px) translateY(50px) translateZ(20px);
/* 	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); */
}

computer3 screen3 {
	border:3px solid #d7d7d7;
	display: block;
	position: absolute;
	height: 70px;
	width: 70px;
	background: #000;
  background-image:url(https://45994852.fs1.hubspotusercontent-na1.net/hubfs/45994852/kalen-emsley-Bkci_8qcdvQ-unsplash.jpg);
	background-size: cover;
  transform: translateX(2.5px) translateY(-40px);
	box-shadow: 30px 30px 30px ;
}

computer3 screen3 text3 {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: orange;
	font-size: 12px;
	font-family: Arial, sans-serif;
	text-align: center;
}


coffee-table {
	height: 92px;
	width: 140px;
	display: block;
	position: absolute;
	background: rgb(30, 30, 30);
	transform: translateX(-50px) translateY(-50px) rotateZ(-90deg) translateZ(52px);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}


coffee-table{
	height:92px;
	width:140px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-46px;
	margin-left:-70px;
	background:rgb(30,30,30);
	transform:rotateZ(-90deg) translateZ(52px);
}
coffee-table:before{
	content:'';
	height:6px;
	width:100%;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(10,10,10);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateY(-0.5px) translateX(-0.5px);
}
coffee-table:after{
	content:'';
	height:100%;
	width:6px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(20,20,20);
	transform-origin:100% 50%;
	transform:rotateY(-90deg) translateX(0.5px);
}

tv{
	height: 70px;
	width: 70px;
	background-color:#000;
		display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-120px;
	margin-left:-90px;
	background:beige;
	box-shadow:1px 1px 3px 1px rgba(0,0,0,0.125);
}

/* Styling for the square coffee table */
coffee-table.square {
    height: 92px;
    width: 32px;
    background: rgb(30, 30, 30);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
}




/* Additional styling to maintain the 3D effect for square coffee table */
coffee-table.square:before,
coffee-table.square:after {
    content: '';
    position: absolute;
    background: rgb(10, 10, 10);
    transform-origin: 50% 0%;
    height: 6px;
}

/* Top face */
coffee-table.square:before {
    width: 100%;
    top: 100%;
    left: 0;
    transform: rotateX(-90deg);
}

/* Side face */
coffee-table.square:after {
    width: 6px;
    height: 100%;
    top: 0;
    right: 100%;
    transform: rotateY(-90deg);
}

coffee-table.square leg{
	height:6px;
	width:6px;
	display:block;
	position:absolute;
	transform:translateZ(-1px);
}
coffee-table.square leg:before{
	content:'';
	height:6px;
	width:51px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(10,10,10);
	transform-origin:100% 50%;
	transform:rotateY(-90deg);
}
coffee-table.square leg:after{
	content:'';
	height:51px;
	width:6px;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(20,20,20);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateX(-0.5px);
}

coffee-table.square leg:nth-child(1){
	top:0%;
	left:0%;
}
coffee-table.square leg:nth-child(2){
	bottom:0%;
	left:0%;
}
coffee-table.square leg:nth-child(3){
	bottom:0%;
	right:0%;
}

coffee-table.square leg:nth-child(4){
	top:0%;
	right:0%;
}

coffee-table.square2 {
    height: 32px;
    width: 32px;
    background: rgb(30, 30, 30);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
}




/* Additional styling to maintain the 3D effect for square coffee table */
coffee-table.square2:before,
coffee-table.square2:after {
    content: '';
    position: absolute;
    background: rgb(10, 10, 10);
    transform-origin: 50% 0%;
    height: 6px;
}

/* Top face */
coffee-table.square2:before {
    width: 100%;
    top: 100%;
    left: 0;
    transform: rotateX(-90deg);
}

/* Side face */
coffee-table.square2:after {
    width: 6px;
    height: 100%;
    top: 0;
    right: 100%;
    transform: rotateY(-90deg);
}

coffee-table.square2 leg{
	height:6px;
	width:6px;
	display:block;
	position:absolute;
	transform:translateZ(-1px);
}
coffee-table.square2 leg:before{
	content:'';
	height:6px;
	width:51px;
	display:block;
	position:absolute;
	top:0%;
	right:100%;
	background:rgb(10,10,10);
	transform-origin:100% 50%;
	transform:rotateY(-90deg);
}
coffee-table.square2 leg:after{
	content:'';
	height:51px;
	width:6px;
	display:block;
	position:absolute;
	top:100%;
	left:0%;
	background:rgb(20,20,20);
	transform-origin:50% 0%;
	transform:rotateX(-90deg) translateX(-0.5px);
}

coffee-table.square2 leg:nth-child(1){
	top:0%;
	left:0%;
}
coffee-table.square2 leg:nth-child(2){
	bottom:0%;
	left:0%;
}
coffee-table.square2 leg:nth-child(3){
	bottom:0%;
	right:0%;
}

coffee-table.square2 leg:nth-child(4){
	top:0%;
	right:0%;
}