:root{--color:#5c8df6;--colorRight:#4e7bda;--colorLeft:#547fdc;--shadow:#dbe3f4;--size:32px;--duration:800ms}.boxes{height:calc(var(--size) * 2);width:calc(var(--size) * 3);position:relative;transform-style:preserve-3d;transform-origin:50% 50%;margin-top:calc(var(--size) * 1.5 * -1);transform:rotateX(60deg) rotate(45deg) rotateY(0deg) translateZ(0)}.box{width:var(--size);height:var(--size);top:0;left:0;position:absolute;transform-style:preserve-3d}.box:first-child{transform:translate(100%);animation:box1 var(--duration) linear infinite}.box:nth-child(2){transform:translateY(100%);animation:box2 var(--duration) linear infinite}.box:nth-child(3){transform:translate(100%,100%);animation:box3 var(--duration) linear infinite}.box:nth-child(4){transform:translate(200%);animation:box4 var(--duration) linear infinite}.box>div{position:absolute;width:100%;height:100%;background:var(--color);top:auto;right:auto;bottom:auto;left:auto;transform:rotateY(0deg) rotateX(0deg) translateZ(calc(var(--size) / 2))}.box>div:first-child{top:0;left:0}.box>div:nth-child(2){background:var(--colorRight);right:0;transform:rotateY(90deg) translateZ(calc(var(--size) / 2))}.box>div:nth-child(3){background:var(--colorLeft);transform:rotateX(-90deg) translateZ(calc(var(--size) / 2))}.box>div:nth-child(4){background:var(--shadow);top:0;left:0;transform:translateZ(calc(var(--size) * 3 * -1))}@keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}.loader-container{min-height:100vh;font-family:Roboto,Arial;color:#adafb6;display:flex;justify-content:center;align-items:center;background:#f9fbff}.dribbble{position:fixed;display:block;right:20px;bottom:20px}.dribbble img{display:block;height:28px}