.animatedButton{--main-size:1.3em;--color-text:#f4f1de;--color-background:#4f649b;--color-background-hover:#dbc6ce;--color-outline:#d4c1c68e;--color-shadow:#00000040;cursor:pointer;border-radius:calc(var(--main-size)*100);font-weight:600;font-size:var(--main-size);color:var(--color-text);background:var(--color-background);box-shadow:0 0 .2em 0 var(--color-background);border:2px solid #f4f1de;justify-content:center;align-items:center;padding:.33em 0 .33em .66em;transition:all 1s;display:flex}.animatedButton:active{transform:scale(.95)}.animatedButton:hover{outline-offset:.2em;box-shadow:0 0 1em 0 var(--color-background);outline:.1em solid #0000;animation:1s linear infinite ripple,1s infinite colorize}.animatedButton span{margin-right:.3em;transition:all .5s}.animatedButton:hover span{text-shadow:5px 5px 5px var(--color-shadow)}.animatedButton svg{height:.8em;fill:var(--color-text);margin-right:-.16em;transition:all .5s;position:relative}.animatedButton:hover svg{filter:drop-shadow(5px 5px 2.5px var(--color-shadow));margin-right:.66em}.animatedButton svg polygon:first-child{transition:all .4s;transform:translate(-60%)}.animatedButton svg polygon:nth-child(2){transition:all .5s;transform:translate(-30%)}.animatedButton:hover svg polygon:first-child{animation:1s .6s infinite opacity;transform:translate(0%)}.animatedButton:hover svg polygon:nth-child(2){animation:1s .4s infinite opacity;transform:translate(0%)}.animatedButton:hover svg polygon:nth-child(3){animation:1s .2s infinite opacity}@keyframes opacity{0%{opacity:1}50%{opacity:0}to{opacity:1}}@keyframes colorize{0%{background:var(--color-background)}50%{background:var(--color-background-hover)}to{background:var(--color-background)}}@keyframes ripple{0%{outline-offset:-.1em;outline:0 solid #0000}50%{outline:.2em solid var(--color-outline);outline-offset:.2em}to{outline-offset:.4em;outline:.4em solid #0000}}
