.container{position:static;width:fit-content;margin:auto;transform:skewY(-20deg)}.container .cube{position:relative;translate:calc(40px * var(--z)) calc(40px * var(--z))}.container .cube div{position:absolute;translate:calc(-48px * var(--x)) calc(-48px * var(--y))}.container .cube div span{position:relative;display:inline-block;width:30px;height:30px;background:#dcdcdc;transition:1.5s}.container .cube div span.active{background:var(--primary);transform:translateY(-50px);animation:animate 2s ease-in-out infinite}.container .cube div span:before{content:"";position:absolute;left:-30px;width:30px;height:100%;background:#c8c8c8;transform-origin:right;transform:skewY(45deg);transition:1.5s}.container .cube div span.active:before{background:var(--secondary)}.container .cube div span:after{content:"";position:absolute;top:-30px;left:0;width:100%;height:30px;background:#f2f2f2;transform-origin:bottom;transform:skewX(45deg);box-shadow:-100px 100px 5px rgba(0,0,0,.15)}.container .cube div span.active:after{background:var(--tertiary);box-shadow:-150px 150px 5px rgba(0,0,0,.15)}@keyframes animate{0%{filter:he-rotate(0deg)}to{filter:hue-rotate(1turn)}}@media (max-width:1200px){.container{margin-top:30vh;margin-bottom:40vh}}@media (max-width:768px){.container{margin-top:25vh;margin-bottom:35vh;margin-left:53vw}}@media (max-width:700px){.container{margin-bottom:25vh}}@media (max-height:500px){.container{margin-top:50vh}}