:root{--glitter:url(https://dominicnikolai.github.io/project-421/assets/image.webp);--clr:var(--clr,blue)}.sparkles{--shadows:0%;--shadowl:0%;--clr:180;letter-spacing:.1vmax;background:linear-gradient(0deg,hsla(var(--clr),100%,70%)0%,hsla(var(--clr),100%,65%)5%,hsla(var(--clr),80%,35%)15%,hsla(var(--clr),70%,30%)25%,hsla(var(--clr),25%,0%)50%,hsla(var(--clr),25%,12%)90%);box-shadow:inset 0 0 .3vmax hsla(var(--clr),30%,20%);box-shadow:0 -.52vmax .52vmax transparent,0 .52vmax .52vmax transparent,0 .52vmax .52vmax transparent,0 .52vmax .52vmax transparent,0 .26vmax .31vmax -.13vmax hsla(var(--clr),0%,0%,.5),0 .36vmax .49vmax hsla(var(--clr),0%,0%,.75);text-transform:capitalize;background-position:0 0;background-size:200% 300%;border-radius:8vmax;grid-template-rows:1fr;grid-template-columns:1fr;place-items:center;padding:0;font-size:1.5vmax;font-weight:700;text-decoration:none;transition-property:background-position,box-shadow,transform,filter,opacity;transition-duration:.5s,.5s,.5s,.5s,.5s;transition-timing-function:cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1);display:grid;position:relative;overflow:hidden;transform:translate(0)}.sparkles:before,.sparkles:after{--gradientPos:50% 100%;content:" ";border-radius:8vmax;grid-area:1/1;width:100%;height:100%;transition:inherit}.sparkles:before{background-size:19.53vmax 11.08vmax,18.23vmax 8.47vmax,200% 200%;background-position:0 0,0 0,var(--gradientPos);border-radius:inherit;background-image:var(--glitter),var(--glitter),linear-gradient(180deg,black 0%,white 80%);background-blend-mode:multiply,multiply,overlay;mix-blend-mode:color-dodge;filter:brightness(2)contrast(.75);opacity:.5;box-shadow:inset 0 -.52vmax .65vmax -.46vmax hsla(var(--clr),70%,80%,.75);background-repeat:repeat;animation:20s linear infinite paused bubble;position:absolute;inset:0;transform:translateZ(.00065vmax)}.sparkles:after{background-image:radial-gradient(ellipse at center 70%,hsla(var(--clr),100%,99%,.8)5%,hsla(var(--clr),90%,80%,1)20%,transparent 50%,transparent 200%),linear-gradient(90deg,hsla(var(--clr),80%,10%,1)-10%,transparent 25%,transparent 75%,hsla(var(--clr),80%,10%,1)110%);box-shadow:inset 0 .26vmax .78vmax #000,inset 0 -.05vmax .21vmax #fff6,inset 0 -.07vmax .2vmax hsla(var(--clr),80%,50%,.75);filter:blur(.33vmax);background-blend-mode:darken;mix-blend-mode:hard-light;opacity:0;background-position:50% 220%;background-repeat:no-repeat;background-size:180% 80%,cover}.sparkles:hover,.sparkles.over{--shadows:90%;--shadowl:80%;box-shadow:0 -.21vmax 1.56vmax hsla(var(--clr),90%,50%,.3),0 .52vmax 2.08vmax hsla(var(--clr),90%,70%,.55),0 .26vmax .31vmax -.21vmax hsla(var(--clr),0%,0%,1),0 .36vmax .78vmax hsla(var(--clr),0%,0%,1),0 .26vmax .52vmax -.31vmax hsl(var(--clr),30%,99%,1),0 .26vmax .52vmax hsla(var(--clr),20%,30%,.35),inset 0 -.13vmax .33vmax -.13vmax #ffffff80;background-position:100% 100%;transition-property:background-position,box-shadow,transform,filter,opacity;transition-duration:.5s,.5s,.5s,.5s,.5s;transition-timing-function:cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1),cubic-bezier(.77,0,.18,1)}.sparkles.over{transition-duration:2s}.sparkles:hover:before,.sparkles.over:before{--gradientPos:50% 50%;filter:brightness(2)contrast();box-shadow:inset 0 -.33vmax .65vmax -.26vmax hsla(var(--clr),70%,80%,.3);opacity:.8;animation-play-state:running}.sparkles:hover:after,.sparkles.over:after{opacity:.8;transform:translateY(0)scale(3)}.sparkles span{background-image:linear-gradient(hsl(calc(var(--clr) - 43),27%,85%)0%,hsl(calc(var(--clr) - 60),22%,80%)19%,hsl(calc(var(--clr) - 50),20%,75%)30%,hsl(calc(var(--clr) - 52),36%,98%)43%,hsl(var(--clr),70%,70%,1)51%,hsl(var(--clr),50%,85%,1)52%,#fff 100%);filter:drop-shadow(0 0 .05vmax #00000080)drop-shadow(0 .05vmax .05vmax #00000080);color:#d6dee2;-webkit-text-fill-color:transparent;transition-timing-function:inherit;transition-duration:inherit;z-index:10;background-size:1.04vmax 3.59vmax;-webkit-background-clip:text;background-clip:text;grid-area:1/1;padding:.78vmax 1.56vmax;transition-delay:0s;transform:translateY(0)}.sparkles:hover span,.sparkles:active span,.sparkles.over span{background-position-y:-100%}.sparkles:active{box-shadow:0 -.21vmax 1.56vmax hsla(var(--clr),90%,50%,.4),0 .52vmax 2.08vmax hsla(var(--clr),90%,70%,.65),0 .16vmax .31vmax -.21vmax hsla(var(--clr),0%,0%,1),0 .26vmax .78vmax hsla(var(--clr),0%,0%,1),0 .26vmax .52vmax -.31vmax hsl(var(--clr),30%,99%,1),0 .26vmax .52vmax hsla(var(--clr),20%,30%,.45),inset 0 -.13vmax .33vmax -.13vmax #ffffffa6;transition-duration:.1s;transform:translateY(.08vmax)}.sparkles:active:before,.sparkles:active:after{opacity:1;filter:brightness(3)contrast(.75);animation-duration:8s}.sparkles:active:after{filter:brightness(1.35)contrast(.8)blur(.2vmax)}@keyframes bubble{0%{background-position:0 22.14vmax,0 8.47vmax,var(--gradientPos)}to{background-position:0 0,0 0,var(--gradientPos)}}:root{--canvas:220;--bg:hsl(var(--canvas),15%,22%);--fg:hsl(var(--canvas),39%,95%);--link:hsl(var(--canvas),90%,80%);--linkh:#6afbb3;--wgt:200}.sparkles{color:inherit;background:var(--bg);font-weight:var(--wgt);background:hsl(var(--canvas),10%,10%);border:none;border-radius:.52vmax;padding:.26vmax .52vmax;font-family:inherit;font-size:1.3vmax}.container-button-ej{width:fit-content;position:absolute;bottom:2vmax;right:3vmax}
