@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(var(--bounce-height, -20px))}}@keyframes fade{0%,to{opacity:1}50%{opacity:var(--fade-opacity, 0)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(var(--shake-distance, -10px))}20%,40%,60%,80%{transform:translate(var(--shake-distance, 10px))}}@keyframes scale{0%,to{transform:scale(1)}50%{transform:scale(var(--scale-factor, 1.5))}}@keyframes slide{0%{transform:translate(var(--slide-start, -100%))}to{transform:translate(var(--slide-end, 100%))}}@keyframes rotate3D{0%{transform:rotate3d(1,1,1,0)}to{transform:rotate3d(1,1,1,360deg)}}@keyframes flipX{0%,to{transform:rotateX(0)}50%{transform:rotateX(var(--flip-angle, 180deg))}}@keyframes flipY{0%,to{transform:rotateY(0)}50%{transform:rotateY(var(--flip-angle, 180deg))}}@keyframes wobble{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-25%) rotate(-5deg)}30%{transform:translate(20%) rotate(3deg)}45%{transform:translate(-15%) rotate(-3deg)}60%{transform:translate(10%) rotate(2deg)}75%{transform:translate(-5%) rotate(-1deg)}}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{transform:skew(6.25deg) skewY(6.25deg)}44.4%{transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{transform:skew(.390625deg) skewY(.390625deg)}88.8%{transform:skew(-.1953125deg) skewY(-.1953125deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(var(--pulse-scale, 1.1))}}@keyframes heartbeat{0%,28%,70%,to{transform:scale(1)}14%,42%{transform:scale(1.3)}}.animated{animation-duration:var(--duration, 1s);animation-timing-function:var(--timing-function, ease);animation-iteration-count:var(--iteration-count, infinite);animation-direction:var(--direction, normal)}.spin{animation-name:spin}.bounce{animation-name:bounce}.fade{animation-name:fade}.shake{animation-name:shake}.scale{animation-name:scale}.slide{animation-name:slide}.rotate3D{animation-name:rotate3D}.flipX{animation-name:flipX}.flipY{animation-name:flipY}.wobble{animation-name:wobble}.jello{animation-name:jello}.pulse{animation-name:pulse}.heartbeat{animation-name:heartbeat}body,html{margin:0;padding:0;overflow:hidden;width:100%;height:100%}main{width:100vw;height:100vh;overflow:hidden;position:relative}h1{color:#335d92;text-transform:uppercase;font-size:4rem;font-weight:100;line-height:1.1;margin:4rem auto;max-width:14rem}p{max-width:14rem;margin:2rem auto;line-height:1.35}@media (min-width: 480px){h1,p{max-width:none}}.increment{font-family:inherit;font-size:inherit;padding:1em 2em;color:#335d92;background-color:#446b9e1a;border-radius:2em;border:2px solid rgba(68,107,158,0);outline:none;width:200px;font-variant-numeric:tabular-nums}.increment:focus{border:2px solid #335d92}.increment:active{background-color:#446b9e33}body{font-family:Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,Marker Felt,sans-serif}
