.face,.wrapper-grid{height:var(--cube-height)}#pre-loader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background-color:#111}.wrapper-grid{--animation-duration:3.5s;--cube-color:#010000;--highlight-color:#d7c355;--cube-width:48px;--cube-height:48px;--font-size:1.8em;position:relative;display:grid;grid-template-columns:repeat(var(--cube-count,8),var(--cube-width));grid-template-rows:auto;grid-gap:0;width:calc(var(--cube-count,8) * var(--cube-width));perspective:350px;font-family:Montserrat,sans-serif;font-size:var(--font-size);font-weight:800;color:transparent}.cube{position:relative;transform-style:preserve-3d;animation:translate-z var(--animation-duration) ease-in-out infinite}.face{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--cube-width);background-color:var(--cube-color)}.face-back,.face-front,.face-left,.face-right{box-shadow:inset 0 0 2px 1px #0001,inset 0 0 12px 1px #fff1}.face-front{transform:rotateY(0) translateZ(calc(var(--cube-width)/ 2))}.face-back{transform:rotateY(180deg) translateZ(calc(var(--cube-width)/ 2));opacity:.6}.face-left{transform:rotateY(-90deg) translateZ(calc(var(--cube-width)/ 2));opacity:.6}.face-right{transform:rotateY(90deg) translateZ(calc(var(--cube-width)/ 2));opacity:.6}.face-bottom,.face-top{height:var(--cube-width);opacity:.8}.face-top{transform:rotateX(90deg) translateZ(calc(var(--cube-width)/ 2))}.face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube-height) - var(--cube-width) * .5))}.cube:first-child{animation-delay:0ms;z-index:0}.cube:nth-child(2){animation-delay:.2s;z-index:1}.cube:nth-child(3){animation-delay:.4s;z-index:2}.cube:nth-child(4){animation-delay:.6s;z-index:3}.cube:nth-child(5){animation-delay:.8s;z-index:4}.cube:nth-child(6){animation-delay:1s;z-index:5}.cube:nth-child(7){animation-delay:1.2s;z-index:4}.cube:nth-child(8){animation-delay:1.4s;z-index:3}.cube:nth-child(9){animation-delay:1.6s;z-index:2}.cube:nth-child(10){animation-delay:1.8s;z-index:1}.cube:nth-child(11){animation-delay:2s;z-index:0}.cube .face{animation:face-color var(--animation-duration) ease-in-out infinite,edge-glow var(--animation-duration) ease-in-out infinite;animation-delay:inherit}.cube .face.face-front{animation:face-color var(--animation-duration) ease-in-out infinite,face-glow var(--animation-duration) ease-in-out infinite,edge-glow var(--animation-duration) ease-in-out infinite;animation-delay:inherit}@keyframes translate-z{0%,100%,40%{transform:translateZ(-2px)}30%{transform:translateZ(16px) translateY(-1px)}}@keyframes face-color{0%,100%,50%{background-color:var(--cube-color)}10%{background-color:var(--highlight-color)}}@keyframes face-glow{0%,100%,50%{color:#fff0;filter:none}30%{color:#fff;filter:drop-shadow(0 14px 10px var(--highlight-color))}}@keyframes edge-glow{0%,100%,40%{box-shadow:inset 0 0 2px 1px #0001,inset 0 0 12px 1px #fff1}30%{box-shadow:0 0 2px 0 var(--highlight-color)}}@media (max-width:768px){.wrapper-grid{--cube-width:28px;--cube-height:28px;--font-size:1.1em;width:calc(var(--cube-count,8) * var(--cube-width))}}