@keyframes animate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}.cube-container{position:relative;top:-70px;transform:skewY(-20deg);.cube{position:relative;z-index:2;&:nth-child(2){z-index:1;translate:-60px -60px}&:nth-child(3){z-index:3;translate:60px 60px}div{position:absolute;display:flex;flex-direction:column;gap:30px;translate:calc(-70px * var(--x)) calc(-60px * var(--y));span{position:relative;display:inline-block;width:50px;height:50px;background:#dcdcdc;z-index:calc(1 * var(--i));transition:background-color 1.5s,filter 1.5s;&.cube-image-left{&:before{background-size:70%;background-repeat:no-repeat;background-position:50%;transition:background-color 1.5s}&.hover-effect:before,&:hover:before{background-image:var(--chain-logo)}}&.cube-image-top{&:after{background-size:70%;background-repeat:no-repeat;background-position:50%;transition:background-color 1.5s}&.hover-effect:after,&:hover:after{background-image:var(--chain-logo)}}&.cube-image-right{background-size:70%;background-repeat:no-repeat;background-position:50%;&.hover-effect,&:hover{background-image:var(--chain-logo)}}&:hover{transition:0s;background-color:var(--b3-primary,#3b82f6);filter:drop-shadow(0 0 30px var(--b3-primary,#3b82f6));&:after,&:before{transition:0s;background-color:var(--b3-primary,#3b82f6)}}&:before{left:-40px;width:40px;height:100%;background:#fff;transform-origin:right;transform:skewY(45deg)}&:after,&:before{content:"";position:absolute;transition:background-color 1.5s}&:after{top:-40px;left:0;width:100%;height:40px;background:#f2f2f2;transform-origin:bottom;transform:skewX(45deg)}}}}}.cube-container .cube div span.hover-effect:after,.cube-container .cube div span.hover-effect:before{transition:0s;background-color:var(--b3-primary,#3b82f6)}