:root {
	 --cube-size: 24vmin;
	 --side-size: calc(var(--cube-size) / 2);
	 --perspective: calc(var(--cube-size) * 5);
	 --gap: 0.5vmin;
  }
 .container-cube {
	 position: relative;
	 perspective: var(--perspective);
}
 .cube {
	 position: relative;
	 width: var(--cube-size);
	 height: var(--cube-size);
	 transform-style: preserve-3d;
	 animation: cube-rotation 20s linear infinite;
}
 .side {
	 position: absolute;
	 display: grid;
	 grid-template-columns: repeat(5, 1fr);
	 grid-gap: var(--gap);
	 width: calc(var(--cube-size) - var(--gap));
	 height: calc(var(--cube-size) - var(--gap));
}
 .tile {
	 position: relative;
	 animation: tile-color 5s linear alternate infinite, tile-glow 1s linear infinite;
	 animation-delay: calc(var(--index) * -0.025s), calc(var(--index) * -0.25s);
}
 .front {
	 transform: rotateY(0deg) translateZ(var(--side-size));
}
 .back {
	 transform: rotateY(180deg) translateZ(var(--side-size));
}
 .right {
	 transform: rotateY(90deg) translateZ(var(--side-size));
}
 .left {
	 transform: rotateY(-90deg) translateZ(var(--side-size));
}
 .top {
	 transform: rotateX(90deg) translateZ(var(--side-size));
}
 .bottom {
	 transform: rotateX(-90deg) translateZ(var(--side-size));
}
 @keyframes cube-rotation {
	 from {
		 transform: rotateX(-20deg) rotateY(0);
	}
	 to {
		 transform: rotateX(-20deg) rotateY(1turn);
	}
}
 @keyframes tile-glow {
	 50% {
		 opacity: 0.5;
	}
}
 @keyframes tile-color {
	 0% {
		 background-color: #00b69f;
	}
	 25% {
		 background-color: #40b3ef;
	}
	 50% {
		 background-color: #4c40f6;
	}
	 100% {
		 background-color: #00E7F8;
	}
	 75% {
		 background-color: #00b69f;
	}
}