:root{
	--color1: rgb(0, 255, 255);
	--color2: rgb(100, 0, 255);
	--cube_size: 62.5px;
	--blur: 0px;
	--light: 0px solid #000000;
	--atlas_y: 0px;
}
body{
	margin: 0;
	background: #000000;
	height: 100vh;
	display: grid;
	color: #ffffff;
}
#timer{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: radial-gradient(at center top, var(--color1), transparent), 
				radial-gradient(at center bottom, var(--color2), transparent);
}
.container {

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	perspective: 500px;
}

.cube {
	position: relative;
	width: 125px;
	height: 125px;
	transform-style: preserve-3d;
	animation: rotate 5s linear infinite;
	image-rendering: auto;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.cube > div {
	position: absolute;
	width: 125px;
	height: 125px;
	opacity: 1.0;
	background-image: url(atlas.png);
	background-position-y: var(--atlas_y);
	background-repeat: repeat repeat;
	background-size: 750px;
}

.s1 /*top*/ {
	transform: translateZ(var(--cube_size));
	background-position: 0px;
}

.s2 /*right*/ {
	transform: rotateY(90deg) translateZ(var(--cube_size)) rotate(270deg);
	background-position: 250px;
}

.s3 /*bottom*/ {
	transform: rotateY(180deg) translateZ(var(--cube_size)) rotate(180deg);
	background-position: 125px;
}

.s4 /*back*/ {
	transform: rotateX(90deg) translateZ(var(--cube_size)) rotate(180deg);
	background-position: 375px;
}

.s5 /*left*/ {
	transform: rotateY(-90deg) translateZ(var(--cube_size)) rotate(90deg);
	background-position: 250px;
}

.s6 /*front*/ {
	transform: rotateX(-90deg) translateZ(var(--cube_size)) rotate(0deg);
	background-position: -125px;
}
@keyframes rotate {

	0% {
		transform: rotateY(0deg) rotateX(135deg) translateZ(100px);
	}
	50% {
		transform: rotateY(360deg) rotateX(90deg) translateZ(-100px);
	}
	100% {
		transform: rotateY(720deg) rotateX(135deg) translateZ(100px);
	}
}