@keyframes stroke{0%{fill:transparent;stroke:#fff;stroke-dashoffset:25%;stroke-dasharray:0 50%;stroke-width:1}70%{fill:transparent;stroke:#fff}80%{fill:transparent;stroke:#fff;stroke-width:1}to{fill:#fff;stroke:transparent;stroke-dashoffset:-25%;stroke-dasharray:50%0;stroke-width:0}}@keyframes rotation{to{transform:rotateX(270deg) rotateY(270deg)}}@keyframes color{to{background-color:#9b46bb}}.css-anim-block{display:flex;justify-content:center;align-items:center;height:400px;margin:0;background:#fff;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}@media screen and (max-width:500px){.css-anim-block{margin-left:82px}}@media screen and (orientation:landscape) and (max-width:1199px){.css-anim-block{margin-left:82px}}.textfront{position:absolute;margin-left:-80px;text-align:center;z-index:100}#designcube{font-family:"Russo One",sans-serif;width:100%;height:100%}#designcube text{text-transform:uppercase;animation:stroke 5s infinite alternate;stroke-width:1;stroke:#fff;font-size:90px}.flex{display:flex;justify-content:center;align-items:center;width:80px;height:80px}.cube{position:relative;width:1px;height:1px;margin:0 80px 0 0;transform-style:preserve-3d}.wall{width:80px;height:80px;position:absolute;left:calc(-80px/2);top:calc(-80px/2);text-align:center;line-height:100px;border:solid 1px #9b46bb}.front{transform:translateZ(calc(80px/2))}.back{transform:translateZ(calc(-80px/2)) rotateY(180deg)}.right{transform:translateX(calc(80px/2)) rotateY(90deg)}.left{transform:translateX(calc(-80px/2)) rotateY(-90deg)}.top{transform:translateY(calc(-80px/2)) rotateX(90deg)}.bottom{transform:translateY(calc(80px/2)) rotateX(-90deg)}.flex:nth-of-type(4) .cube:nth-of-type(1){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) .5s forwards}.flex:nth-of-type(3) .cube:nth-of-type(1),.flex:nth-of-type(4) .cube:nth-of-type(2){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) .6s forwards}.flex:nth-of-type(2) .cube:nth-of-type(1),.flex:nth-of-type(3) .cube:nth-of-type(2){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) .7s forwards}.flex:nth-of-type(1) .cube:nth-of-type(1),.flex:nth-of-type(2) .cube:nth-of-type(2),.flex:nth-of-type(3) .cube:nth-of-type(3),.flex:nth-of-type(4) .cube:nth-of-type(3),.flex:nth-of-type(4) .cube:nth-of-type(4){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) .8s forwards}.flex:nth-of-type(1) .cube:nth-of-type(2),.flex:nth-of-type(2) .cube:nth-of-type(3),.flex:nth-of-type(3) .cube:nth-of-type(4){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) .9s forwards}.flex:nth-of-type(1) .cube:nth-of-type(3),.flex:nth-of-type(2) .cube:nth-of-type(4){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) 1s forwards}.flex:nth-of-type(1) .cube:nth-of-type(4){animation:rotation 3s infinite cubic-bezier(.215,.61,.355,1) 1.1s forwards}.wall{animation:color 2s linear 1.5s forwards}