html, body {
	
	background: black;
	color: #000;
	min-height: 100vh;
	min-width: 100vw;
	overflow: hidden;
	padding: 0;
	margin: 0;
	
}

#cube-world {
	
	width: 100vw;
	height: 100vh;
	perspective: 500px;
	
}
@keyframes cube-spin {
	
	0% {
		
		transform: var(--transform) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		
	}
	100% {
		
		transform: var(--transform) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		
	}
	
}

#cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	width: 200px;
	height: 200px;
	left: 50vw;
	top: 50vh;
	--transform: translate(-50%, -50%);
	transform: var(--transform);
	animation: cube-spin 5s linear infinite;
}
body.temple {
	
	cursor: none;
	
}
body.temple #cube-world {
	
	perspective: 5000px;
	z-index: 1000000;
	position: fixed;
	pointer-events: none;
	
}
body.temple #cube {
	
	--transform: translate(-50%, -50%) scale(0.2);
	left: var(--mousex);
	top: var(--mousey);
	width: 400px;
	height: 400px;
	
}


@keyframes changecolor {
	
	0% {
		border-color: #cfc;
	}
	50% {
		border-color: #0f0;
	}
	100% {
		border-color: #cfc;
	}
}
#cube div {
	position: absolute;
	width: inherit;
	height: inherit;
	border: 2px solid #0f0;
	animation: changecolor 5s ease-in-out infinite;
	animation-delay: calc(-1s * var(--nthchild));
	background-size: cover;
	background-position: center;
}


#cube div:nth-child(1) { transform: rotateY(  0deg) translateZ(100px); --nthchild: 1; }
#cube div:nth-child(2) { transform: rotateY( 90deg) translateZ(100px);  --nthchild: 2;}
#cube div:nth-child(3) { transform: rotateY(180deg) translateZ(100px);  --nthchild: 3;}
#cube div:nth-child(4) { transform: rotateY(-90deg) translateZ(100px);  --nthchild: 4;}
#cube div:nth-child(5) { transform: rotateX( 90deg) translateZ(100px);  --nthchild: 5;}
#cube div:nth-child(6) { transform: rotateX(-90deg) translateZ(100px);  --nthchild: 6;}

@keyframes wobble {
	0% {
		transform: var(--transform) rotate(-20deg);
	}
	50% {
		transform: var(--transform) rotate(20deg);
	}
	100% {
		transform: var(--transform) rotate(-20deg);
	}
}
#text {
	
	--transform: translate(-50%, -50%);
	animation: wobble 1s ease-in-out infinite;
	left: 50vw;
	top: 50vh;
	position: fixed;
	color: #fffc;
	font-size: 30px;
	text-align: center;
	font-family: monospace;
	
	
}