@import "https://fonts.googleapis.com/css2?family=Shadows+Into+Light&family=Amatic+SC:wght@700&display=swap";
.messy-btn{cursor:pointer;text-transform:uppercase;background-color:#0000;border:0 solid #000;border-radius:12px;padding:18px 36px;font-family:Shadows Into Light,Amatic SC,cursive;font-size:4rem;font-weight:700;line-height:1;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:3px 3px #000}.messy-btn.yellow{color:gold;border-color:gold}.messy-btn.blue{color:#0066fc;border-color:#0066fc}.messy-btn:before,.messy-btn:after{content:"";border-radius:12px;width:100%;height:100%;transition:all .2s;position:absolute;top:0;left:0}.messy-btn:before{border-top:0 solid #000;border-left:0 solid #000;transform:rotate(-1deg)skew(1deg,2deg)}.messy-btn:after{z-index:-1;content:"";color:#000;background:currentColor;border-bottom:0 solid #000;border-right:0 solid #000;width:100%;height:100%;transition:all .4s;position:absolute;top:0;left:-120%;transform:skew(-20deg)}.messy-btn:hover:after{left:0}.messy-btn:hover{color:gold;transform:translate(-2px,-2px)rotate(-1deg);box-shadow:5px 5px #000}@keyframes glitch-shift{0%{opacity:1;transform:translate(0)}20%{opacity:.4;transform:translate(-1px,1px)}40%{opacity:.2;transform:translate(1px,-1px)}60%{opacity:.4;transform:translate(-1px,1px)}80%{opacity:.2;transform:translate(1px,-1px)}to{opacity:1;transform:translate(0)}}@media (max-width:1024px){.glitch-btn,.glitch-btn-cta{color:gold;position:relative}.glitch-btn:before,.glitch-btn:after,.glitch-btn-cta:before,.glitch-btn-cta:after{content:attr(data-text);opacity:.8;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.glitch-btn:before,.glitch-btn-cta:before{color:#0066fc;animation:2.5s infinite glitch-shift}.glitch-btn:after,.glitch-btn-cta:after{color:gold;animation:2.7s infinite reverse glitch-shift;transform:translate(2px,2px)}}