*{font-family:Poppins,sans-serif;box-sizing:border-box}body{margin:0;padding:0;display:flex;width:100vw;height:100vh;align-items:center;justify-content:center;background-color:#f4f8f9}h1,h2{text-align:center;margin:0;padding:0}h1{font-size:45px}h2{font-size:20px;font-weight:100;width:min-content;margin:0 auto;padding:0 10px;border-radius:14px;background-color:#fff3cd;visibility:hidden}.container{margin:12px}input{background-color:#fff;width:100%;border:none;border-radius:12px;padding:14px 16px;margin:7px 0;font-size:16px}input[type=button]{background-color:#fff;color:#000}.footer{font-family:Roboto Mono,monospace;text-align:center;margin:24px;color:#aaa;font-size:12px}.error{animation:shake 1s linear;border:2px solid transparent;padding:12px 14px}@keyframes shake{0%{transform:translate(0);border:2px solid red}5%{transform:translate(-4px)}15%{transform:translate(4px)}25%{transform:translate(-4px)}35%{transform:translate(4px)}45%{transform:translate(0)}to{border:2px solid transparent}}.loading-spinner{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center}.loader{width:48px;height:48px;border-radius:50%;position:relative;animation:rotate 1s linear infinite}.loader:before{content:"";box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:5px solid #000;animation:prixClipFix 2s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes prixClipFix{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}.callback{line-height:40px}
