.button{--main-size:1.2em;--color-text:#0f0f0f;--color-background:#f9d500;--color-background-hover:#ffd300;--color-outline:#ffd30066;--color-shadow:#0005;cursor:pointer;border-radius:calc(var(--main-size)*100);font-family:Kanit,sans-serif;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:none;justify-content:center;align-items:center;gap:.2em;padding:.5em .5em .5em 1em;text-decoration:none;transition:all 1s;display:flex}.button:active{transform:scale(.95)}.button:hover{outline-offset:.2em;box-shadow:0 0 1em 0 var(--color-background);outline:.1em solid #0000;transition:all .5s;animation:1s linear infinite ripple,1s infinite colorize}.button span{margin-right:.3em;transition:all .5s}.button:hover span{text-shadow:5px 5px 5px var(--color-shadow)}.button:active span{text-shadow:none}.button svg{height:.8em;fill:var(--color-text);margin-right:-.16em;transition:all .5s;position:relative}.button:hover svg{filter:drop-shadow(5px 5px 2.5px var(--color-shadow));margin-right:.66em;transition:all .5s}.button:active svg{filter:none}.button svg polygon:first-child{transition:all .4s;transform:translate(-60%)}.button svg polygon:nth-child(2){transition:all .5s;transform:translate(-30%)}.button:hover svg polygon:first-child{animation:1s .6s infinite opacity;transform:translate(0%)}.button:hover svg polygon:nth-child(2){animation:1s .4s infinite opacity;transform:translate(0%)}.button: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}}