:root{--size-cube: 2rem}@media screen and (min-width: 65rem){:root{--size-cube: 3rem}}@media screen and (min-width: 100rem){:root{--size-cube: 8rem}}*{box-sizing:border-box;margin:0;padding:0}body{width:100%;height:100vh;perspective:100rem;overflow:hidden;background-color:#8ab785;display:flex;justify-content:center;align-items:center}main{position:absolute;z-index:1;transform-style:preserve-3d;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center;transform:rotateY(-20deg) rotateX(70deg) translateZ(-10rem) translateY(-10rem)}.row{transform-style:preserve-3d}.wave{animation:wave 4s ease-in-out infinite}@keyframes wave{0%,to{translate:0 0 0}50%{translate:0 0 calc(var(--size-cube) * 2)}}.remove-wave{translate:0 0 0}.cube{margin:auto;position:relative;transform-style:preserve-3d;width:var(--size-cube);height:var(--size-cube);margin:.2rem 0rem;transform-origin:center}.face{position:absolute;width:var(--size-cube);height:var(--size-cube);background-color:#81b4ff;border:1px solid #464646;box-shadow:inset 0 0 20px -2px #000;opacity:.8}.face__top{transform:translateZ(calc(var(--size-cube) / 2))}.face__front{transform:translateY(calc(var(--size-cube) / 2)) rotateX(-90deg)}.face__right{transform:translate(calc(var(--size-cube) / 2)) rotateY(90deg) rotate(-90deg)}