.social-card{position:relative;width:calc(300px - 15px);height:calc(300px - 15px);background:#d3d3d3;border-radius:30px;overflow:hidden;box-shadow:0 7px 29px 0 hsla(240,5%,41%,.2);transition:all 1s ease-in-out;border:2px solid #fff}.social-background{position:absolute;inset:0;background-color:#4158d0;background-image:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70)}.social-logo{position:absolute;right:50%;bottom:50%;transform:translate(50%,50%);transition:all .6s ease-in-out;font-size:1.3em;font-weight:600;color:#fff;letter-spacing:3px}.social-logo .social-logo-svg{fill:#fff;width:30px;height:30px}.social-icon{display:inline-block;width:20px;height:20px}.social-icon .social-svg{fill:hsla(0,0%,100%,.797);width:100%;transition:all .5s ease-in-out}.social-box{position:absolute;padding:10px;text-align:right;background:hsla(0,0%,100%,.389);border-top:2px solid #fff;border-right:1px solid #fff;border-radius:10% 13% 42% 0/10% 12% 75% 0;box-shadow:-7px 7px 29px 0 hsla(240,5%,41%,.364);transform-origin:bottom left;transition:all 1s ease-in-out}.social-box:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:all .5s ease-in-out}.social-box:hover .social-svg{fill:#fff}.social-box1{width:70%;height:70%;bottom:-70%;left:-70%}.social-box1:before{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#ff53d4 60%,#62c2fe 90%)}.social-box1:hover:before{opacity:1}.social-box1:hover .social-icon .social-svg{filter:drop-shadow(0 0 5px white)}.social-box2{width:50%;height:50%;bottom:-50%;left:-50%;transition-delay:.2s}.social-box2:before{background:radial-gradient(circle at 30% 107%,#91e9ff 0,#00acee 90%)}.social-box2:hover:before{opacity:1}.social-box2:hover .social-icon .social-svg{filter:drop-shadow(0 0 5px white)}.social-box3{width:30%;height:30%;bottom:-30%;left:-30%;transition-delay:.4s}.social-box3:before{background:radial-gradient(circle at 30% 107%,#969fff 0,#b349ff 90%)}.social-box3:hover:before{opacity:1}.social-box3:hover .social-icon .social-svg{filter:drop-shadow(0 0 5px white)}.social-box4{width:10%;height:10%;bottom:-10%;left:-10%;transition-delay:.6s}.social-card:hover .social-box{bottom:-1px;left:-1px}.social-card:hover .social-logo{transform:translate(75px,-65px);letter-spacing:0}