@import "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap";
.btn{z-index:0;color:#fff;will-change:box-shadow,color,transform,opacity,background;background:#386bd8;border-radius:.2rem;flex-wrap:wrap;justify-content:center;align-items:center;min-width:13ch;padding:.5rem 1.15rem;font-size:1rem;text-decoration:none;transition:opacity .3s cubic-bezier(.2,0,.1,1),transform .3s cubic-bezier(.2,0,.1,1),box-shadow .5s,color .5s,background .5s;display:inline-flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .1em #3883d8,0 0 #7138e200}.btn.outlined{color:#141b77;background:0 0;display:inline-flex}.btn:before,.btn:after{content:"";z-index:-1;pointer-events:none;opacity:0;border-radius:39%;height:0;padding-bottom:200%;transition:transform 0s cubic-bezier(.2,0,.1,1) .5s,opacity .5s cubic-bezier(.2,0,.1,1);position:absolute;top:0;left:-50%;right:-50%}.btn:before{background:linear-gradient(25deg,#405de0,#6740e000);transform:translate(-10%,4.8em)rotate(330deg)}.btn:after{background:linear-gradient(70deg,#4078e080,#6034d600);transform:translate(10%,4.8em)rotate(0)}.btn:hover,.btn:focus{background:#4080e0;transition:opacity .3s cubic-bezier(.2,0,.1,1),transform .3s cubic-bezier(.2,0,.1,1),box-shadow 2s,color 1.5s,background 1s .75s;box-shadow:inset 0 0 0 .1em #3870d8,0 0 1.75em #406be080}.btn:hover.outlined,.btn:focus.outlined{color:#fff}.btn:hover:before,.btn:focus:before,.btn:hover:after,.btn:focus:after{opacity:1;transition:transform 2s,opacity .2s}.btn:hover:before,.btn:focus:before{transform:translate(-10%,-1em)rotate(100deg)}.btn:hover:after,.btn:focus:after{transform:translate(10%,-1em)rotate(180deg)}@media (max-width:768px){.btn{font-size:.7rem}}