/* CUBE */

:root {
     --cube_size: 10vmin;
     --cube_timing: ease;
     --cube_duration: 3s;
     --cube_delay: 100ms;
     --cube_f: rotateY(0deg);
     --cube_b: rotateY(-180deg);
     --cube_l: rotateY(-90deg);
     --cube_bt: rotateX(-90deg);
     --cube_r: rotateY(90deg);
     --cube_t: rotateX(90deg);
     --cube_z1: translateZ(var(--cube_size));
     --cube_z2: translateZ(calc(var(--cube_size) / 2));
     --cube_z0: translateZ(calc(1.041 * var(--cube_size)));
}
.cube_main{ left:50%; top:50%; transform: translate(-50%, -50%); }
.cube_main, .cube_main * {
      position: absolute; width: var(--cube_size); height: var(--cube_size);
}
.cube_main .sides{
     animation: rotate var(--cube_duration) 0.8s var(--cube_timing) infinite;
     transform-style: preserve-3d;
     transform: rotateX(-37.5deg) rotateY(45deg);
}
.cube_main .sides * {
     border: calc(var(--cube_size) / 50) solid;
     border-color: #fff;
     border-radius: calc(var(--cube_size) / 12);
     background: rgba(255,255,255,0.1);
     transform-origin: 50% 50%;
     animation-fill-mode: forwards;
}
.cube_main .sides .right{ animation:right var(--cube_duration) var(--cube_delay) var(--cube_timing) infinite; }
.cube_main .sides .bottom{ animation:bottom var(--cube_duration) 0ms var(--cube_timing) infinite; }
.cube_main .sides .left{ animation:left var(--cube_duration) var(--cube_delay) var(--cube_timing) infinite; }
.cube_main .sides .front{ animation:front var(--cube_duration) var(--cube_delay) var(--cube_timing) infinite; }
.cube_main .sides .back{ animation:back var(--cube_duration) var(--cube_delay) var(--cube_timing) infinite; }
.cube_main .sides .top{ animation:top var(--cube_duration) 0ms var(--cube_timing) infinite; }
@-moz-keyframes back{
     0% { transform: var(--cube_b) var(--cube_z1); }
     20% { transform: var(--cube_b) var(--cube_z2); }
     70% { transform: var(--cube_b) var(--cube_z2); }
     90% { transform: var(--cube_b) var(--cube_z1); }
     100% { transform: var(--cube_b) var(--cube_z1); }
}
@-webkit-keyframes back {
     0% { transform: var(--cube_b) var(--cube_z1); }
     20% { transform: var(--cube_b) var(--cube_z2); }
     70% { transform: var(--cube_b) var(--cube_z2); }
     90% {
         transform: var(--cube_b) var(--cube_z1);
    }
     100% {
         transform: var(--cube_b) var(--cube_z1);
    }
}
@-o-keyframes back {
     0% {
         transform: var(--cube_b) var(--cube_z1);
    }
     20% {
         transform: var(--cube_b) var(--cube_z2);
    }
     70% {
         transform: var(--cube_b) var(--cube_z2);
    }
     90% {
         transform: var(--cube_b) var(--cube_z1);
    }
     100% {
         transform: var(--cube_b) var(--cube_z1);
    }
}
 @keyframes back {
     0% {
         transform: var(--cube_b) var(--cube_z1);
    }
     20% {
         transform: var(--cube_b) var(--cube_z2);
    }
     70% {
         transform: var(--cube_b) var(--cube_z2);
    }
     90% {
         transform: var(--cube_b) var(--cube_z1);
    }
     100% {
         transform: var(--cube_b) var(--cube_z1);
    }
}
 @-moz-keyframes front {
     0% {
         transform: var(--cube_f) var(--cube_z1);
    }
     20% {
         transform: var(--cube_f) var(--cube_z2);
    }
     70% {
         transform: var(--cube_f) var(--cube_z2);
    }
     90% {
         transform: var(--cube_f) var(--cube_z1);
    }
     100% {
         transform: var(--cube_f) var(--cube_z1);
    }
}
 @-webkit-keyframes front {
     0% {
         transform: var(--cube_f) var(--cube_z1);
    }
     20% {
         transform: var(--cube_f) var(--cube_z2);
    }
     70% {
         transform: var(--cube_f) var(--cube_z2);
    }
     90% {
         transform: var(--cube_f) var(--cube_z1);
    }
     100% {
         transform: var(--cube_f) var(--cube_z1);
    }
}
 @-o-keyframes front {
     0% {
         transform: var(--cube_f) var(--cube_z1);
    }
     20% {
         transform: var(--cube_f) var(--cube_z2);
    }
     70% {
         transform: var(--cube_f) var(--cube_z2);
    }
     90% {
         transform: var(--cube_f) var(--cube_z1);
    }
     100% {
         transform: var(--cube_f) var(--cube_z1);
    }
}
 @keyframes front {
     0% {
         transform: var(--cube_f) var(--cube_z1);
    }
     20% {
         transform: var(--cube_f) var(--cube_z2);
    }
     70% {
         transform: var(--cube_f) var(--cube_z2);
    }
     90% {
         transform: var(--cube_f) var(--cube_z1);
    }
     100% {
         transform: var(--cube_f) var(--cube_z1);
    }
}
 @-moz-keyframes left {
     0% {
         transform: var(--cube_l) var(--cube_z1);
    }
     20% {
         transform: var(--cube_l) var(--cube_z2);
    }
     70% {
         transform: var(--cube_l) var(--cube_z2);
    }
     90% {
         transform: var(--cube_l) var(--cube_z1);
    }
     100% {
         transform: var(--cube_l) var(--cube_z1);
    }
}
 @-webkit-keyframes left {
     0% {
         transform: var(--cube_l) var(--cube_z1);
    }
     20% {
         transform: var(--cube_l) var(--cube_z2);
    }
     70% {
         transform: var(--cube_l) var(--cube_z2);
    }
     90% {
         transform: var(--cube_l) var(--cube_z1);
    }
     100% {
         transform: var(--cube_l) var(--cube_z1);
    }
}
 @-o-keyframes left {
     0% {
         transform: var(--cube_l) var(--cube_z1);
    }
     20% {
         transform: var(--cube_l) var(--cube_z2);
    }
     70% {
         transform: var(--cube_l) var(--cube_z2);
    }
     90% {
         transform: var(--cube_l) var(--cube_z1);
    }
     100% {
         transform: var(--cube_l) var(--cube_z1);
    }
}
 @keyframes left {
     0% {
         transform: var(--cube_l) var(--cube_z1);
    }
     20% {
         transform: var(--cube_l) var(--cube_z2);
    }
     70% {
         transform: var(--cube_l) var(--cube_z2);
    }
     90% {
         transform: var(--cube_l) var(--cube_z1);
    }
     100% {
         transform: var(--cube_l) var(--cube_z1);
    }
}
 @-moz-keyframes bottom {
     0% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     20% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     70% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     90% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     100% {
         transform: var(--cube_bt) var(--cube_z0);
    }
}
 @-webkit-keyframes bottom {
     0% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     20% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     70% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     90% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     100% {
         transform: var(--cube_bt) var(--cube_z0);
    }
}
 @-o-keyframes bottom {
     0% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     20% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     70% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     90% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     100% {
         transform: var(--cube_bt) var(--cube_z0);
    }
}
 @keyframes bottom {
     0% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     20% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     70% {
         transform: var(--cube_bt) var(--cube_z2);
    }
     90% {
         transform: var(--cube_bt) var(--cube_z0);
    }
     100% {
         transform: var(--cube_bt) var(--cube_z0);
    }
}
 @-moz-keyframes right {
     0% {
         transform: var(--cube_r) var(--cube_z1);
    }
     20% {
         transform: var(--cube_r) var(--cube_z2);
    }
     70% {
         transform: var(--cube_r) var(--cube_z2);
    }
     90% {
         transform: var(--cube_r) var(--cube_z1);
    }
     100% {
         transform: var(--cube_r) var(--cube_z1);
    }
}
 @-webkit-keyframes right {
     0% {
         transform: var(--cube_r) var(--cube_z1);
    }
     20% {
         transform: var(--cube_r) var(--cube_z2);
    }
     70% {
         transform: var(--cube_r) var(--cube_z2);
    }
     90% {
         transform: var(--cube_r) var(--cube_z1);
    }
     100% {
         transform: var(--cube_r) var(--cube_z1);
    }
}
 @-o-keyframes right {
     0% {
         transform: var(--cube_r) var(--cube_z1);
    }
     20% {
         transform: var(--cube_r) var(--cube_z2);
    }
     70% {
         transform: var(--cube_r) var(--cube_z2);
    }
     90% {
         transform: var(--cube_r) var(--cube_z1);
    }
     100% {
         transform: var(--cube_r) var(--cube_z1);
    }
}
 @keyframes right {
     0% {
         transform: var(--cube_r) var(--cube_z1);
    }
     20% {
         transform: var(--cube_r) var(--cube_z2);
    }
     70% {
         transform: var(--cube_r) var(--cube_z2);
    }
     90% {
         transform: var(--cube_r) var(--cube_z1);
    }
     100% {
         transform: var(--cube_r) var(--cube_z1);
    }
}
 @-moz-keyframes top {
     0% {
         transform: var(--cube_t) var(--cube_z0);
    }
     20% {
         transform: var(--cube_t) var(--cube_z2);
    }
     70% {
         transform: var(--cube_t) var(--cube_z2);
    }
     90% {
         transform: var(--cube_t) var(--cube_z0);
    }
     100% {
         transform: var(--cube_t) var(--cube_z0);
    }
}
 @-webkit-keyframes top {
     0% {
         transform: var(--cube_t) var(--cube_z0);
    }
     20% {
         transform: var(--cube_t) var(--cube_z2);
    }
     70% {
         transform: var(--cube_t) var(--cube_z2);
    }
     90% {
         transform: var(--cube_t) var(--cube_z0);
    }
     100% {
         transform: var(--cube_t) var(--cube_z0);
    }
}
 @-o-keyframes top {
     0% {
         transform: var(--cube_t) var(--cube_z0);
    }
     20% {
         transform: var(--cube_t) var(--cube_z2);
    }
     70% {
         transform: var(--cube_t) var(--cube_z2);
    }
     90% {
         transform: var(--cube_t) var(--cube_z0);
    }
     100% {
         transform: var(--cube_t) var(--cube_z0);
    }
}
@keyframes top {
     0% {
         transform: var(--cube_t) var(--cube_z0);
    }
     20% {
         transform: var(--cube_t) var(--cube_z2);
    }
     70% {
         transform: var(--cube_t) var(--cube_z2);
    }
     90% {
         transform: var(--cube_t) var(--cube_z0);
    }
     100% {
         transform: var(--cube_t) var(--cube_z0);
    }
}
@-moz-keyframes rotate {
     0% {
         transform: rotateX(-37.5deg) rotateY(45deg);
    }
     50% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
     100% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
}
@-webkit-keyframes rotate {
     0% {
         transform: rotateX(-37.5deg) rotateY(45deg);
    }
     50% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
     100% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
}
@-o-keyframes rotate {
     0% {
         transform: rotateX(-37.5deg) rotateY(45deg);
    }
     50% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
     100% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
}
@keyframes rotate {
     0% {
         transform: rotateX(-37.5deg) rotateY(45deg);
    }
     50% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
     100% {
         transform: rotateX(-37.5deg) rotateY(405deg);
    }
}