.loading-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: all 1s ease;
	z-index: 2;
	background: var(--dark)
}

.loading-screen.closed {
	transform: translateY(-100%);
}

.loading-text {
	font-family: "Koulen", sans-serif;
}

.cube-wrapper {
	position: relative;
	width: 100px;
	height: 100px;
	perspective: 600px;
}

.cube {
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(45deg);	
	transition: transform 1s;
	animation: rotator 4s ease-in-out infinite;
	animation-fill-mode: both;
}

.cube .face {
	position: absolute;
	width: 100px;
	height: 100px;
	background: var(--accent-1);
	transform-style: preserve-3d;
	line-height: 100px;
}

.face.top {
	background: var(--accent-1);
}

.face.front, .face.back {
	background: var(--accent-3);
}
.face.left, .face.right {
	background: var(--accent-2);
}

.face.front { 
	transform: rotateY(  0deg) translateZ(50px); 

}
.face.right { 
	transform: rotateY( 90deg) translateZ(50px); 

}
.face.back { 
	transform: rotateY(180deg) translateZ(50px); 

}
.face.left { 
	transform: rotateY(-90deg) translateZ(50px); 

}
.face.top { 
	transform: rotateX( 90deg) translateZ(50px);

}
.face.bottom { 
	transform: rotateX(-90deg) translateZ(50px);
}

@keyframes rotator {
	0% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(45deg);	
	}

	12.5% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(90deg);
	}

	25% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(135deg);
	}

	37.5% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(180deg);
	}

	50% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(225deg);	
	}
	
	62.5% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(270deg);
	}

	75% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(315deg);	
	}

	87.5% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(360deg);
	}

	100% {
	transform: 
		translateZ(-100px) 
		rotateX(-35deg)
		rotateY(405deg);	
	}
}