@keyframes animate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}.container{animation:animate 5s infinite alternate;height:400px;left:200px;position:relative;top:80px;transform:skewY(-20deg);width:400px;z-index:9}.container .cube{position:relative;z-index:2}.container .cube:nth-child(2){translate:-60px -60px;z-index:1}.container .cube:nth-child(3){translate:60px 60px;z-index:3}.container .cube div{display:flex;flex-direction:column;gap:20px;position:absolute;translate:calc(-70px*var(--x)) calc(-60px*var(--y))}.container .cube div span{background:var(--color-gray-dark);display:inline-block;height:50px;position:relative;transition:1.5s;width:50px;z-index:calc(var(--i)*1)}.container .cube div span:hover{background:#ef4149;filter:drop-shadow(0 0 30px #ef4149);transition:0s}.container .cube div span:hover:after,.container .cube div span:hover:before{background:#ef4149;transition:0s}.container .cube div span:before{background:var(--color-gray);height:100%;left:-40px;transform:skewY(45deg);transform-origin:right;width:40px}.container .cube div span:after,.container .cube div span:before{content:"";position:absolute;transition:1.5s}.container .cube div span:after{background:var(--color-gray-muted);height:40px;left:0;top:-40px;transform:skew(45deg);transform-origin:bottom;width:100%}