/* General cube */
.cube {
    /* Cube size */
	width: 150px;
	height: 150px;
	/* Cube position */
	left: 100px;
	top: 110px;
    /* Extra details */
    position: relative;
	transform-style: preserve-3d; /* 3D effect */
	animation: animateCube 4s linear infinite; /* Repeat animation at same speed (4 seconds), all the time */
}

/* Cube sides and top */
.cube div {
	position: absolute;
    width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-style: preserve-3d; /* 3D effect */
}

/* Cube sides */
.side {
	/* Position */
	top: 0;
	left: 0;
	transform: rotateY(calc(90deg * var(--cubeSide))) translateZ(75px); /* 4 sides. 150px/2 = 75px */;
	/* Drawing */
	width: 100%;
	height: 100%;
	background: linear-gradient(#151515, #DC143C);
	/* Extra details */
	position: absolute;
}

/* Cube top side */
.top {
	/* Drawing */
	width: 150px;
	height: 150px;
	background: #222222;
	/* Position */
	top: 0;
	left: 0;
	transform: rotateX(90deg) translateZ(75px); /* 1 top side. 150px/2 = 75px */;
	/* Extra details */
	position: absolute;
}

/* Bottom glowing shadow */
.top::before {
	/* Drawing */
	width: 150px;
	height: 150px;
	background: #DC143C;
	filter: blur(20px); /* Glowing effect */
	box-shadow: 0 0 15px rgba(255,0,0,0.2),
	0 0 25px rgba(255,0,0,0.4),
	0 0 35px rgba(255,0,0,0.6),
	0 0 50px rgba(255,0,0,0.8),
	0 0 60px rgba(255,0,0,1); /* Shadow borders effect */
	/* Position */
	top: 0;
	left: 0;
	transform: translateZ(-190px);
	/* Extra details */
	content: '';
	position: absolute;
}

/* Cube rotation animation */
@keyframes animateCube {
	0% {
		transform: rotateX(-30deg) rotateY(0deg);
	}
	100% {
		transform: rotateX(-30deg) rotateY(360deg);
	}
}