:root{--primary-400:#0167f4;--gradient-color-1:#635bff;--gradient-color-2:#e5174d;--gradient-color-3:#ff916a;--gradient-color-4:#ffc712;--gradient-color-5:#33ddb3;--button-background-blue:#0167f4;--gradient-background:linear-gradient(217deg,#463cff,rgba(72,0,8,.26) 70.71%),linear-gradient(145deg,var(--gradient-color-2),rgba(99,219,91,.726) 70.71%),linear-gradient(73deg,var(--gradient-color-3),rgba(255,145,106,0) 70.71%),linear-gradient(1deg,var(--gradient-color-4),#ddcf33 70.71%),linear-gradient(289deg,var(--gradient-color-5),rgba(99,219,91,.726) 70.71%)}.gradient-div{border:none;position:relative;transform-style:preserve-3d;width:100%;height:100%}.gradient-div:before{background:var(--gradient-background);background-size:200% 100%;background-position:50%;animation:morphGradient 5s linear infinite;top:0;left:0;content:"";position:absolute;inset:15px;filter:blur(60px);transform:translateZ(0)}.gradient-div:after{background:var(--gradient-background);background-size:100% 100%;aspect-ratio:1/1;top:50%;left:0;content:"";position:absolute;filter:blur(100px);border-radius:50%;transform:translate(-50%,-50%) rotate(0deg)}.hover-bento-gradient-div{vertical-align:middle;line-height:50px;border:none;position:relative;transform-style:preserve-3d;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:10}.hover-bento-gradient-div:before{background:var(--gradient-background);background-size:300% 100%;background-position:50%;animation:morphGradient 5s linear infinite;filter:blur(20px);content:"";position:absolute;margin:0;opacity:0;scale:.9}.hover-bento-gradient-div:before,.hover-bento-gradient-div:hover:before{transition:opacity .5s ease-out,scale .5s ease-out;left:0;top:0;width:100%;height:100%}.hover-bento-gradient-div:hover:before{opacity:1;scale:1}.hover-bento-gradient-div:hover:after{background:var(--gradient-background);background-size:100% 100%;aspect-ratio:1/1;content:"";position:absolute;filter:blur(70px);border-radius:50%;transform:translate(-50%,-50%) rotate(0deg);scale:1;opacity:1}.size-105:before,.size-105:hover:before{scale:1;filter:blur(60px)}.size-103:before,.size-103:hover:before{scale:1;filter:blur(30px)}.gradient-animation-horizontal:after{width:auto;height:60%;animation:rotateAndSlideHorizontal 25s linear infinite;transform:translate(-50%,-50%) rotate(180deg)}.gradient-animation-vertical:after{width:60%;height:auto;animation:rotateAndSlideVertical 10s linear infinite;left:50%}v

.button-gradient-div{color:#fff;text-align:center;border:none;transform-style:preserve-3d;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;background-color:var(--primary-400);border-radius:2rem;position:relative!important}.button-gradient-div.gradient-animation-horizontal:after{animation:rotateAndSlideHorizontal 5s linear infinite;height:45%}.button-gradient-div:hover{position:relative}.button-gradient-div:before{border-radius:2rem;transform:scale(1);opacity:0;filter:blur(5px)}.button-gradient-div:before,.button-gradient-div:hover:before{background:var(--gradient-background);background-size:200% 100%;background-position:50%;content:"";position:absolute;margin:0;inset:0;transition:opacity .5s ease-out,transform .5s ease-out;left:0;top:0;width:100%;height:100%}.button-gradient-div:hover:before{animation:morphGradient 5s linear infinite;transform:scale(1.05,1.2);opacity:1}.button-gradient-div .button-animated{border-radius:2rem;background:var(--primary-400);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);flex-wrap:nowrap;display:flex;align-items:center;justify-content:center;gap:7px}.button-gradient-div:hover .button-animated{border-radius:2rem;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background:#ffffff1f;position:relative;z-index:10;box-shadow:10px #fff}.button-gradient-div:hover:after{background:var(--gradient-background);background-size:100% 100%;aspect-ratio:1/1;top:50%;left:50%;content:"";position:absolute;filter:blur(15px);border-radius:50%;scale:1}@keyframes morphGradient{0%{background-position:0 50%}25%{background-position:50% 50%}50%{background-position:100% 100%}75%{background-position:50% 50%}to{background-position:0 50%}}@keyframes rotateAndSlideHorizontal{0%{left:0;transform:translateY(-50%) rotate(0deg)}50%{left:100%;transform:translateX(-100%) translateY(-50%) rotate(180deg)}to{left:0;transform:translateY(-50%) rotate(359deg)}}@keyframes rotateAndSlideVertical{0%{top:0;transform:translateX(-50%) rotate(0deg)}50%{top:100%;transform:translate(-50%,-100%) rotate(180deg)}to{top:0;transform:translateX(-50%) rotate(359deg)}}