body {
	background-color: #212121;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.loader {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.simple-text {
	position: absolute;
	top: -150px;
	color: white;
	width: 200px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff,
		0 0 40px #0088ff;
	user-select: none;

	font-family: 'Advent Pro', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.cube {
	position: absolute;
	width: 40px;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(45deg);
	transition: 300ms ease;
	cursor: pointer;
	animation: rotateCube 10s infinite linear;
}
/* change the distance between cubes with translateX */
.cube-front,
.cube-back {
	transform: translateX(40px) translateZ(-20px);
	animation: none;
}
/* change the distance between cubes with translateZ */
.cube-top,
.cube-bottom {
	transform: translateZ(20px);
	animation: none;
}
/* change the distance between cubes with translateX */
.cube-left,
.cube-right {
	transform: translateX(40px) translateZ(-20px);
	animation: none;
}

.face {
	position: absolute;
	transform-style: preserve-3d;
	width: 40px;
	height: 40px;
	background: rgb(21, 46, 75);
	background: radial-gradient(
		circle,
		rgba(21, 46, 75, 1) 0%,
		rgba(10, 14, 55, 1) 100%
	);
}

.front {
	transform: rotateY(0deg) translateZ(20px);
}

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

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

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

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

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

.cube-back:hover .face,
.cube-front:hover .face,
.cube-top:hover .face,
.cube-bottom:hover .face,
.cube-left:hover .face,
.cube-right:hover .face {
	background: rgb(255, 255, 255);
	background: radial-gradient(circle, white 60%, rgb(157, 208, 255) 100%);
	filter: drop-shadow(0px 0px 5px #e7faff)
		drop-shadow(0px 0px 15px rgb(75, 168, 255))
		drop-shadow(0px 0px 30px rgb(50, 156, 255));
}

.cube:active {
	transform: translateX(0px) translateZ(-20px);
}

.cube-back:active .face,
.cube-front:active .face,
.cube-top:active .face,
.cube-bottom:active .face,
.cube-left:active .face,
.cube-right:active .face {
	background: rgb(255, 255, 255);
	background: radial-gradient(circle, white 60%, rgb(157, 208, 255) 100%);
	filter: drop-shadow(0px 0px 5px #e7faff)
		drop-shadow(0px 0px 15px rgb(75, 168, 255))
		drop-shadow(0px 0px 30px rgb(50, 156, 255));
}

.middle {
	background: transparent;
}

@keyframes rotateCube {
	0% {
		transform: rotateX(-30deg) rotateY(45deg);
	}
	100% {
		transform: rotateX(-30deg) rotateY(405deg);
	}
}