* {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

body {
	overflow: hidden;
	background-color: #1A1A1A;
}

.display-area {
	width: 100vw;
	height: 100vh;
	/*margin-top: 2.5vw;*/
	background: repeating-linear-gradient(45deg, blue, red);
}

.translation-square {
	perspective: 128vw;
	perspective-origin: 0% -100%;
	
	height: 8vw;
	width: 8vw;
	/*border: 10px solid green;*/
}

.cube {
	position: relative;
	width: 8vw;
	transform-style: preserve-3d;
	
	/*border: 10px solid green;*/
}

.cube div {
	border: 1px solid black;
	background-color: rgba(225,225,225,0.4);
	position: absolute;
	width: 8vw;
	height: 8vw;
}

.front {
	transform: translateZ(4vw);
}

.back {
	transform: translateZ(-4vw) rotateY(180deg);
}

.top {
	transform: rotateX(-90deg) translateY(-4vw);
	transform-origin: top center;
}

.bottom {
	transform: rotateX(90deg) translateY(4vw);
	transform-origin: bottom center;
}

.left {
	transform: rotateY(270deg) translateX(-4vw);
	transform-origin: center left;
}

.right {
	transform: rotateY(-270deg) translateX(4vw);
	transform-origin: top right;
}


@keyframes spin {
	from { 
		transform: rotateY(0deg); 
	}
	to { 
		transform: rotateY(360deg); 
	}
}

.cube {
	animation: spin 5s infinite linear;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 *
 *				X AXIS: -45vw TO 45vw
 *				Y AXIS:  0vh  TO 84vh
 *
 *	Why is the height scale only 84vh high while the width scale is
 *	 90vw across? See this blogpost for the answer:
 *		https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
 *
\*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

@keyframes bounce {
	0%     {
		transform: translateX(22.5vw) translateY(0vh);		/*TOP*/
	}
	8.33%  {
		transform: translateX(-45vw) translateY(45vh);	/*LEFT*/
	}
	16.67% {
		transform: translateX(22.5vw) translateY(84vh);	/*BOTTOM*/
	}
	25.00% {
		transform: translateX(45vw) translateY(67.5vh);	/*RIGHT*/
	}
	33.33% {
		transform: translateX(0vw) translateY(0vh);		/*TOP*/
	}
	41.67% {
		transform: translateX(-45vw) translateY(67.5vh);	/*LEFT*/
	}
	50.00% {
		transform: translateX(-22.5vw) translateY(84vh);	/*BOTTOM*/
	}
	58.33% {
		transform: translateX(45vw) translateY(45vh);	/*RIGHT*/
	}
	66.67% {
		transform: translateX(-22.5vw) translateY(0vh);	/*TOP*/
	}
	75.00% {
		transform: translateX(-45vw) translateY(22.5vh);	/*LEFT*/
	}
	83.33% {
		transform: translateX(0vw) translateY(84vh);		/*BOTTOM*/
	}
	91.67% {
		transform: translateX(45vw) translateY(22.5vh);	/*RIGHT*/
	}
	100%   {
		transform: translateX(22.5vw) translateY(0vh);		/*TOP*/
	}
}
.translation-square {
	animation: bounce 16s infinite linear;
}
*/