body{user-select:none;height:100vh;margin:0;font-family:Gill Sans MT,Calibri,Trebuchet MS,sans-serif;overflow:hidden}main{justify-content:center;align-items:center;height:100%;display:flex;overflow:hidden}#toggleSoundBtn{cursor:pointer;backdrop-filter:blur(5px);background-color:#8881;border:none;border-bottom-left-radius:10px;margin:0;font-size:2rem;transition:all .5s ease-in-out;position:fixed;top:0;right:0}#toggleSoundBtn:hover{backdrop-filter:blur(5px)contrast(.5)}#toggleSoundBtn img{width:2rem;height:2rem}#container{backdrop-filter:blur(5px);border-radius:.5em;flex-direction:column;align-items:center;display:flex;position:relative}#counterButton{cursor:pointer;background:#8882 url(/storage/experiments/pictures/paw_counter/paw.png) 50%/95% no-repeat;border:2px solid #8880;border-radius:100%;margin:1em;padding:1em;transition:border 1s;animation:2s cubic-bezier(.65,.05,.36,1) forwards notworking;position:relative}#counterButton.milestone1000{border:2px solid gold}#counterButton.milestone2000{border:10px solid gold}#counterButton.milestone10000{border:4px dotted gold}@keyframes notworking{0%{scale:0;box-shadow:0 0 #8880}50%{scale:1}70%{box-shadow:0 0 0 1em #8882}to{box-shadow:0 0 0 2em #8880}}#counterButton:hover{box-shadow:none;outline:2px solid #888;transform:none}#counterButton:active,#counterButton:focus{background-color:#8884}#counterButton.working{animation:2s ease-out forwards working}@keyframes working{0%{scale:1}to{scale:0}}.rhythmRing{z-index:-1;opacity:0;pointer-events:none;border:solid #55b59288;border-radius:100%;width:6em;height:6em;animation:5s ease-in forwards rhythmShrink;position:absolute;top:1rem;left:50%;translate:-50%}@keyframes rhythmShrink{0%{opacity:0;transform:scale(4)}60%,85%{box-shadow:0 0 .5em #55b59200}80%{opacity:1;transform:scale(1.6);box-shadow:0 0 1em #55b592}to{opacity:0;transform:scale(.5)}}#container.rhythmSuccess #counterButton{animation:.5s ease-in-out succesBlink}@keyframes succesBlink{0%{border-color:gold}30%,90%{transform:scale(1)rotate(0)}35%{transform:scale(1.05)rotate(5deg)}50%{color:#55b592;border-color:#55b592;transform:scale(.98)rotate(-5deg)}65%{transform:scale(1.05)rotate(5deg)}to{border-color:gold}}#counter{flex-direction:row;margin-right:1ch;font-size:5em;display:flex}#container.rhythmSuccess .counterDigitsCont{animation:.5s ease-in-out succesBlink}.counterDigitsCont{width:1ch;height:1em;line-height:1em;position:relative;overflow:hidden}.counterDigits{transition:all 1s;position:absolute}.counterDigits[data-digit=""]{opacity:0}.counterDigits[data-digit="0"]{top:0}.counterDigits[data-digit="1"]{top:-1em}.counterDigits[data-digit="2"]{top:-2em}.counterDigits[data-digit="3"]{top:-3em}.counterDigits[data-digit="4"]{top:-4em}.counterDigits[data-digit="5"]{top:-5em}.counterDigits[data-digit="6"]{top:-6em}.counterDigits[data-digit="7"]{top:-7em}.counterDigits[data-digit="8"]{top:-8em}.counterDigits[data-digit="9"]{top:-9em}img{height:6em}#errorMsg{opacity:.5;color:red;font-size:1rem}#infos{opacity:.2;text-align:center;font-size:1rem;font-style:italic;position:fixed;top:.5em}#lastTime{opacity:.2;font-size:1rem;font-style:italic;position:fixed;bottom:.5em}#lastTime.fade{animation:2s cubic-bezier(.65,.05,.36,1) forwards fade}@keyframes fade{0%{opacity:.2}to{opacity:0}}#grid{z-index:-2;grid-template-rows:repeat(auto-fill,20px);grid-template-columns:repeat(auto-fill,20px);grid-auto-flow:dense;justify-content:space-between;gap:2px;max-width:100vw;max-height:100vh;display:grid;position:absolute;inset:0;overflow:hidden}.cell{background-color:#888;animation:1s forwards cellAppear}.cell[data-size="2"]{grid-area:span 2/span 2;animation:1s forwards cellAppear,2s forwards cell2Appear}@keyframes cellAppear{0%{opacity:0;transform:rotate(360deg)scale(0)}}@keyframes cell2Appear{50%{translate:-25% -25%;scale:.5}}