:root {
	--boxColor:#0ff7;
	--size: 200px;
}

body {
	background-image: url(2/2.gif);
	background-color: aqua;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	transform-style: preserve-3d;
}

.floatingText {
	position: absolute;
	left: calc((100% / 2) -1em);
	top: calc(100% / 5);
	font-family: "Pixelated MS Sans Serif";
	animation: fontSwap 0.5s infinite;
}

.scene {
  width: var(--size);
  height: var(--size);
  margin: 80px;
  perspective: calc(var(--size) * 2);
}

.cube {
	width: var(--size);
	height: var(--size);
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--size) / 2) * -1);
	top: calc(-var(--size));
	left: calc(-var(--size));
	animation: spin 5s infinite ease-in-out;
}
.cube.door {
	animation: none;
}

.cube__face {
	position: absolute;
	width: var(--size);
	height: var(--size);
	background-size: var(--size);
}
.cube__face--front  { 
	transform: rotateY(  0deg) translateZ(calc(var(--size) / 2));
	background-image: url(2/1.gif);
 }
.cube__face--right  { 
	transform: rotateY( 90deg) translateZ(calc(var(--size) / 2));
	background-image: url(2/1.gif);
}
.cube__face--back   { 
	transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); 
	background-image: url(2/1.gif);
}
.cube__face--left   { 
	transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); 
	background-image: url(2/1.gif);
}
.cube__face--top    { 
	transform: rotateX( 90deg) translateZ(calc(var(--size) / 2));
	background-image: url(2/1.gif);
 }
.cube__face--bottom { 
	transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));
	background-image: url(2/1.gif);
}

.door {
	position: absolute;
	width: 57px;
	height: 128px;
}
.door--front {
	transform:  translateZ(calc(var(--size) * -0.25)) translateX(calc(var(--size) / 2.5)) translateY(128px) rotateY(  0deg);
}
.door--front:hover {
	transform:  translateZ(calc(var(--size) * -0.24)) translateX(calc(var(--size) / 2.6)) translateY(128px) rotateY(  30deg);
}
.door--back {
	opacity: 75%;
	transform: rotateY(  0deg) translateZ(calc(var(--size) * -0.25)) translateX(calc(var(--size) / 2.5)) translateY(128px);
}

.floor {
	position: absolute;
	top: calc(var(--size) / 2);
	transform:
		translate(-50%, -50%)
		translateZ(var(--size))
		rotateX(89deg);
	width: calc(var(--size) * 4);
	height: calc(var(--size) * 4);
	background-image: repeating-conic-gradient(
		from 45deg, 
		#111 0deg 90deg, 
		#ffffff 90deg 180deg);
	background-size: calc(var(--size) / 32) calc(var(--size) / 32);
	animation: floorMove 60s infinite ease-in-out;
}
.floor.carpet {
	background-image: url(2/carpet.png);
	background-size: calc(var(--size) * 3.5) calc(var(--size) * 3.5);
	transform: 
		translateX(calc(var(--size) * -1.5))
		translateY(calc(var(--size) * -1))
		translateZ(var(--size))
		rotateX(89.5deg);
	animation: none;
	z-index: -1;
}
.floor.brick {
	background-size: calc(var(--size) * 2) calc(var(--size) * 1);
	transform: 
		translateX(calc(var(--size) * -1.5))
		translateY(calc(var(--size) * -1))
		translateZ(var(--size))
		rotateX(89.5deg);
	animation: movingGround 1s infinite ease;
	z-index: -1;
}
.floor.wall {
	position: absolute;
	top: calc(var(--size) / 2);
	transform:
		translate(-50%, -50%)
		translateZ(var(--size))
		rotateX(89deg);
	width: calc(var(--size) * 4);
	height: calc(var(--size) * 4);
	background-image: repeating-conic-gradient(
		from 45deg, 
		#111 0deg 90deg, 
		#ffffff 90deg 180deg);
	background-size: calc(var(--size) / 32) calc(var(--size) / 32);
	animation: spinVert 20s infinite ease-in-out;
}
/*carpet page stuff idk what to call it like the tv and yeah*/
.crt {
    z-index: 1;
    width: 256px;
    height: 256px;
	position: fixed;
	opacity: 95%;
	animation: crt 5s infinite ease-in-out;
	transform: 
		translateY(256px);
}
.crt:hover {
	opacity: 100%;
	cursor:help;
	animation: crt 1s infinite ease-in-out;
}
#revealText {
	font-family: "Pixelated MS Sans Serif";
	font-style: oblique;
	font-size: 8em;
	display: block;
	opacity: 0;
	top: -1em;
	color: red;
}
#revealText:hover {
	color: rebeccapurple;
}
@keyframes floorMove {
	0% {
		transform:rotateX(89deg) translate(-50%, 0%) rotateZ(0deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
	50% {
		transform:rotateX(89deg) translate(-50%, 0%) rotateZ(740deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
	100% {
		transform:rotateX(89deg) translate(-50%, 0%) rotateZ(0deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
}
@keyframes spin {
	0% {
		transform: translateZ(calc(var(--size) / 2)) rotateX(20deg) rotateY(40deg) ;
	}
	50% {
		transform: translateZ(calc(var(--size))) rotateX(-40deg) rotateY(740deg);
	}
	100% {
		transform: translateZ(calc(var(--size) / 2)) rotateX(20deg) rotateY(40deg);
	}
}
@keyframes spinVert {
	0% {transform:translate(-50%, 0%) rotateZ(0deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
	50% {
		transform:translate(-50%, 0%) rotateZ(740deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
	100% {transform:translate(-50%, 0%) rotateZ(0deg) translateZ(calc(var(--size) / 4)) scale(2);
	}
}
@keyframes crt {
	0% {
		transform: translateY(128px) rotateZ(10deg) scale(2);
	}
	50% {
		transform: translateY(128px) rotateZ(-10deg) scale(2);
	}
	100% {
		transform: translateY(128px) rotateZ(10deg) scale(2);
	}
}
@keyframes reveal {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}
@keyframes fontSwap {
	0% {
		font-family: 'Courier New', Courier, monospace;
		color: white;
		translate: 5px 2px;
	}
	10% {
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		color:darkmagenta;
		translate: -5px -6px;
	}
	25% {
		font-family: "Pixelated MS Sans Serif";
		color: red;
		translate: -2px 19px;
		}
	50% {
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		color:darkcyan;
		translate: 6px -6px;
	}
	75% {
		font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
		color:black;
		translate: 9px 33px;
	}
	100% {
		font-family: "Pixelated MS Sans Serif";
		color:chartreuse;
		translate: 44px -92px;
	}
}
@keyframes movingGround {
	0% {
		background-size: calc(var(--size) * 2) calc(var(--size) * 1);
		filter: saturate(0);
	}
	50% {
		background-size: calc(var(--size) * 3) calc(var(--size) / 2);
		filter: invert(1);
	}
	66% {
		background-size: calc(var(--size) * 1) calc(var(--size) * 1);
		filter: contrast(300%);
	}
	75% {
		background-size: calc(var(--size) / 3) calc(var(--size) * 2);
	}
}