.card{background:#daf6f2;border:1px solid #e5e3e399;border-radius:20px;place-content:center;place-items:center;transition:all .5s;display:flex;position:relative;overflow:hidden;transform:rotateX(-1deg)rotateY(-2deg)rotate(0);box-shadow:0 0 .5em #bdbdbd80}.card:hover{opacity:1;transform:rotate(0)}.card:before{content:"";z-index:0;background-image:linear-gradient(#00b7ff,#ff30ff);width:180%;height:50%;transition:all .2s linear;animation:8s linear infinite rotBGimg;position:absolute}@keyframes rotBGimg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card:after{content:"";z-index:1;background:#fbfbfb;border-radius:16px;position:absolute;inset:4px}.card:hover:before{background-image:linear-gradient(#51ff00,purple);animation:3.5s linear infinite rotBGimg}.card-inner{z-index:2;color:#fff;position:relative}.card1{background:#daf6f2;border:1px solid #e5e3e399;border-radius:20px;place-content:center;place-items:center;transition:all .5s;display:flex;position:relative;overflow:hidden;transform:rotateX(-1deg)rotateY(1deg)rotate(0);box-shadow:0 0 .5em #bdbdbd80}.card1:hover{opacity:1;transform:rotate(0)}.card1:before{content:"";z-index:0;background-image:linear-gradient(#00b7ff,#ff30ff);width:180%;height:50%;transition:all .2s linear;animation:8s linear infinite rotBGimg;position:absolute}.card1:after{content:"";z-index:1;background:#fbfbfb;border-radius:16px;position:absolute;inset:4px}.card1:hover:before{background-image:linear-gradient(#51ff00,purple);animation:8s linear infinite rotBGimg}.card1-inner{z-index:2;color:#fff;position:relative}