* {
	box-sizing: border-box;
}

.cubes-box {
	position: absolute;
	perspective: 1000px;
	transform-style: preserve-3d;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cubes {
	--cubes-row-delay: 0.4s;
	--cubes-float-speed: calc(var(--cubes-row-delay) * 10);
	--cube-max-top: 30px;
	--cube-size: min(12vw,12vh); /*120px;*/
	--cube-half-size: calc(var(--cube-size) / 2);
	--cubes-distance: var(--cube-half-size);
	--cube-space: calc(var(--cube-size) + var(--cubes-distance));
	--cube-shadow-color: rgba(160,160,160,0.4);
	--cube-shadow-opacity: 0.4;
	--cube-shadow-distance: calc(var(--cube-space) * 2);
	--cube-link-translateZ: calc(var(--cube-space) / 2);
	--cube-hover-rotateZ: -45deg;
	--cube-link-hover-rotateZ: -225deg;
	transform: translateZ(-600px) translateY(calc(var(--cube-space) * -3.5)) rotateX(50deg) rotateZ(45deg);
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.cubes > .cubes {
	--cubes-row: 0;
	transform-style: preserve-3d;
	transform: none;
}

.cube {
	transition: all 0.5s ease;
	transform: rotateZ(0deg) translateZ(0px);
	--cube-glow-size: 15px;
	--cube-color-a: 0.8;
	--cube-color-r: calc(192 + (((var(--cubes-row) - 2) / -2) * 63));
	--cube-color-g: calc(192 + ((((var(--cubes-col) - 2) * (var(--cubes-row) - 2)) / 4) * 63));
	--cube-color-b: calc(192 + (((var(--cubes-col) - 2) / -2) * 63));
}

.cube:hover {
	transform: rotateZ(var(--cube-hover-rotateZ));
}

a.cube:hover, .cube.link:hover {
	transition: transform 0.5s ease-out;
	transform: rotateZ(var(--cube-link-hover-rotateZ)) translateZ(var(--cube-link-translateZ));
}

.cube:hover::after {
	opacity: 0;
}

.cube:hover {
	--cube-glow-size: 30px;
}

.cube:hover b, .cube:hover b::before, .cube:hover b::after,
.cube:hover a, .cube:hover a::before, .cube:hover a::after,
.cube:hover i, .cube:hover i::before, .cube:hover i::after {
	--cube-shadow-color: var(--cube-face-color);
	--cube-color-r: 15;
	--cube-color-g: 15;
	--cube-color-b: 15;
	--cube-color-a: 0.5;
	box-shadow: 0 0 20px #eee;
	
}

.cube, .cube::after {
	width: var(--cube-size);
	height: var(--cube-size);
	transform-style: preserve-3d;
	position: absolute;
}

.cube > b, .cube > a {
	animation: cube-oscillate-b var(--cubes-float-speed) infinite ease-in-out;
	transform: translateZ(translateZ(var(--cube-size))) rotateX(180deg) rotateZ(90deg);
}
.cube > i {
	animation: cube-oscillate var(--cubes-float-speed) infinite ease-in-out;
	transform: translateZ(0px);
}

.cube > *, .cube > *::after, .cube > *::before {
	animation: cube-link-glow var(--cubes-float-speed) var(--cubes-float-speed) infinite;
}

.cube::after { /* shadow */
	content: "";
	pointer-events: none;
	background-color: var(--cube-shadow-color);
	animation: cube-shadow-scale var(--cubes-float-speed) infinite ease-in-out;
	opacity: var(--cube-shadow-opacity);
	transform: translateZ(calc(var(--cube-shadow-distance) * -1));
	animation-delay: calc((var(--cubes-row-delay) * var(--cubes-row)) + (var(--cubes-row-delay) * var(--cubes-col)));
	border-radius: 3px;
	position: fixed;
	transition: opacity 0.25s ease-out;
}

.cube > b, .cube > b::before, .cube > b::after,
.cube > a, .cube > a::before, .cube > a::after,
.cube > i, .cube > i::before, .cube > i::after { /* faces */
	width: 100%;
	height: 100%;
	position: absolute;	
	display: block;
	animation-delay: inherit;
	transition: all 0.5s ease;
	background-color: var(--cube-face-color);
}

.cube > a, .cube > b, .cube > i { transform-style: preserve-3d; } /* top face and container */
.cube > a::before, .cube > a::after, .cube > b::before, .cube > b::after, .cube > i::before, .cube > i::after { content: ""; } /* front and left faces as pseudo elements */

.cube > i { /* top face */
	transform: rotateX(0deg) translateZ(0px);
	--cube-face-color: rgba(calc(var(--cube-color-r) - 32), calc(var(--cube-color-g) - 32), calc(var(--cube-color-b) - 32), var(--cube-color-a));
}
.cube > i::before { /* front face */
	transform: rotateX(-90deg) translateY(var(--cube-half-size)) translateZ(calc(var(--cube-half-size)));
	--cube-face-color: rgba(calc(var(--cube-color-r) - 96), calc(var(--cube-color-g) - 96), calc(var(--cube-color-b) - 96), var(--cube-color-a));
}
.cube > i::after { /* left face */
	transform: rotateY(90deg) translateX(var(--cube-half-size)) translateZ(calc(var(--cube-half-size)));
	--cube-face-color: rgba(calc(var(--cube-color-r) - 64), calc(var(--cube-color-g) - 64), calc(var(--cube-color-b) - 64), var(--cube-color-a));
}

.cube > b, .cube > a { /* top face */
	transform: rotateX(180deg) rotateZ(90deg) translateZ(var(--cube-size));
	--cube-face-color: rgba(calc(var(--cube-color-r) - 16), calc(var(--cube-color-g) - 16), calc(var(--cube-color-b) - 16), var(--cube-color-a));
}
.cube > b::before, .cube > a::before { /* front face */
	transform: rotateX(-90deg) translateY(calc(var(--cube-half-size))) translateZ(calc(var(--cube-half-size)));
	--cube-face-color: rgba(calc(var(--cube-color-r) - 80), calc(var(--cube-color-g) - 80), calc(var(--cube-color-b) - 80), var(--cube-color-a));
}
.cube > b::after, .cube > a::after { /* left face */
	transform: rotateY(90deg) translateX(var(--cube-half-size)) translateZ(calc(var(--cube-half-size)));
	--cube-face-color: rgba(calc(var(--cube-color-r) - 48), calc(var(--cube-color-g) - 48), calc(var(--cube-color-b) - 48), var(--cube-color-a));
}

@keyframes cube-oscillate {
	0% { transform: translateZ(0px); }
	50% { transform: translateZ(var(--cube-max-top)); }
	100% { transform: translateZ(0px); }
}

@keyframes cube-oscillate-b {
	0% { transform: translateZ(calc(var(--cube-size) * -1)) rotateX(180deg) rotateZ(90deg); }
	50% { transform: translateZ(calc(var(--cube-max-top) - var(--cube-size))) rotateX(180deg) rotateZ(90deg); }
	100% { transform: translateZ(calc(var(--cube-size) * -1)) rotateX(180deg) rotateZ(90deg); }
}

@keyframes cube-link-glow {
	from { box-shadow: 0 0 5px transparent; }
	50% { box-shadow: 0 0 var(--cube-glow-size) #fff; }
	to { box-shadow: 0 0 5px transparent; }
}

@keyframes cube-shadow-scale {
  0% { transform: scale(1) translateZ(calc(var(--cube-shadow-distance) * -1)); }
  50% { transform: scale(0.75) translateZ(calc(var(--cube-shadow-distance) * -1)); }
  100% { transform: scale(1) translateZ(calc(var(--cube-shadow-distance) * -1)); }
}

.cubes > .cubes .cube {
	left: calc(var(--cube-space) * var(--cubes-col));
	top: calc(var(--cubes-row) * var(--cube-space));
	animation-delay: calc((var(--cubes-row-delay) * var(--cubes-row)) + (var(--cubes-row-delay) * var(--cubes-col)));
}

.cubes .cube:nth-child(5n-4) { --cubes-col: 0; }
.cubes .cube:nth-child(5n-3) { --cubes-col: 1; }
.cubes .cube:nth-child(5n-2) { --cubes-col: 2; }
.cubes .cube:nth-child(5n-1) { --cubes-col: 3; }
.cubes .cube:nth-child(5n-0) { --cubes-col: 4; }

.cubes .cubes:nth-child(0) { --cubes-row: 0; }
.cubes .cubes:nth-child(1) { --cubes-row: 1; }
.cubes .cubes:nth-child(2) { --cubes-row: 2; }
.cubes .cubes:nth-child(3) { --cubes-row: 3; }
.cubes .cubes:nth-child(4) { --cubes-row: 4; }