.card{position:relative;border-radius:21px;overflow:hidden;transition:all 1s ease-in-out}.background{position:absolute;border-radius:30px;inset:0;background:radial-gradient(circle at 100% 107%,#ff89cc 0,#9cb8ec 30%,#00ffee 60%,#62c2fe 100%)}.logo{position:absolute;right:50%;bottom:50%;transform:translate(50%,50%);transition:all .6s ease-in-out}.logo .logo-svg{fill:white;width:40px;height:40px}.icon{display:inline-block;width:20px;height:20px}.icon .svg{fill:rgba(255,255,255,.797);width:100%;transition:all .5s ease-in-out}.box{padding:10px;text-align:right;background:rgba(255,255,255,.389);border-top:2px solid rgb(255,255,255);border-right:1px solid white;border-radius:10% 5% 42% 0/10% 8% 75% 0;box-shadow:-7px 7px 29px 0 rgba(100,100,111,.364);transform-origin:bottom left;transition:all 1s ease-in-out}.box,.box:before{position:absolute}.box:before{content:"";inset:0;border-radius:inherit;opacity:0;transition:all .5s ease-in-out}.box:hover .svg{fill:white}.box1{width:70%;height:70%;bottom:-70%;left:-70%}.box1:before{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#ff53d4 60%,#62c2fe 90%)}.box2{width:50%;height:50%;bottom:-50%;left:-50%;transition-delay:.2s}.box2:before{background:radial-gradient(circle at 30% 107%,#91e9ff 0,#00ACEE 90%)}.box3{width:30%;height:30%;bottom:-30%;left:-30%;transition-delay:.4s}.box3:before{background:radial-gradient(circle at 30% 107%,#969fff 0,#b349ff 90%)}.box4{width:10%;height:10%;bottom:-10%;left:-10%;transition-delay:.6s}.box1:hover:before{opacity:1}.box1:hover .icon .svg{filter:drop-shadow(0 0 5px white)}.box2:hover:before{opacity:1}.box2:hover .icon .svg{filter:drop-shadow(0 0 5px white)}.box3:hover:before{opacity:1}.box3:hover .icon .svg{filter:drop-shadow(0 0 5px white)}.card:hover{transform:scale(1.1)}.card:hover .box{bottom:-1px;left:-1px}.card:hover .logo{transform:translate(0);bottom:20px;right:20px}.card.active,.card:hover{transform:scale(1.1)}.card.active .box,.card:hover .box{bottom:-1px;left:-1px}.card.active .logo,.card:hover .logo{transform:translate(0);bottom:20px;right:20px}.card.active .box1:before,.card.active .box2:before,.card.active .box3:before,.card:hover .box1:before,.card:hover .box2:before,.card:hover .box3:before{opacity:1}.card.active .icon .svg,.card:hover .icon .svg{filter:drop-shadow(0 0 5px white);fill:white}.containerself{animation:fadeInContainer .3s ease-out forwards}.containerself>div:first-child{animation:fadeInOverlay .3s ease-out forwards}.containerself>div:last-child{animation:modalBounce .2s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes fadeInContainer{0%{opacity:0}to{opacity:1}}@keyframes fadeInOverlay{0%{background-color:rgba(0,0,0,0);backdrop-filter:blur(0)}to{background-color:rgba(0,0,0,.5);backdrop-filter:blur(.5px)}}@keyframes modalBounce{0%{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}