#root{max-width:100vw;width:100vw;margin:0 auto;padding:0;text-align:center;height:100vh;max-height:100vh}@font-face{font-family:Montaga,serif;src:url(https://fonts.googleapis.com/css2?family=Montaga&display=swap)}body{font-family:Montaga,serif}.logo{font-family:Henny Penny,cursive;font-size:4rem;height:10rem;line-height:10rem;padding:2rem;margin:0 auto}@media screen and (min-width: 425px){.logo{font-size:6rem;height:12rem;line-height:12rem}}@media screen and (min-width: 768px){.logo{font-size:8rem;height:11rem;line-height:11rem;padding:4rem 2rem 2rem}}.wrapper{height:calc(100vh - 180px);display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap}.instruction{width:100%;padding:1rem 3rem;font-size:1.8rem;line-height:2.6rem}.reset-instruction{width:100%;font-size:1.6rem;padding:1rem 3rem;height:4.4rem}@media screen and (min-width: 375px){.reset-instruction{height:2.4rem}}.ball{--extraSmall: 28rem;--small: 32rem;--medium: 38rem;--big: 45rem;position:relative;background:radial-gradient(circle at 65% 15%,rgb(141,141,141) 1px,rgb(83,83,83) 3%,rgb(41,41,41) 60%,rgb(83,83,83) 100%);color:#fff;height:var(--extraSmall);width:var(--extraSmall);border-radius:50%;font-size:3rem;cursor:pointer;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent;-webkit-box-shadow:0px 0px 55px 0px #813ddaa8;-moz-box-shadow:0px 0px 55px 0px rgba(129,61,218,.66);box-shadow:0 0 55px #813ddaa8;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}.backdrop{position:absolute;top:0;left:0;background:transparent;height:100%;width:95vw}.eight{font-family:Tektur,cursive;display:inline-block;height:25%;width:25%;background:white;border-radius:50%;color:#000;font-size:6rem;padding:2rem;line-height:7.5rem}.answer-wrap{filter:drop-shadow(0 0 1rem rgba(129,61,218,.66))}.answer{color:#fff;max-width:80%;font-family:Tektur,cursive;background-color:#813ddaa8;padding:2rem;margin:1rem;width:10rem;height:8rem;clip-path:polygon(100% 0,0 0,50% 100%);font-size:1.5rem;border-radius:.5rem;display:flex;justify-content:center;align-items:center;animation:fadeIn .5s ease-in}.fadeOut{animation:fadeOut .75s linear}.fadeIn{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}50%{opacity:.5}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}75%{opacity:0}to{opacity:0}}.answer div{width:8ch;height:10rem}@media screen and (min-width: var()){.wrapper{height:calc(100vh - 200px)}.instruction{height:5rem}.ball{height:var(--small);width:var(--small)}.eight{font-size:7rem;line-height:9rem}.answer{font-size:1.6rem;width:12rem;height:10rem}}@media screen and (min-width: 768px){.wrapper{height:calc(100vh - 210px)}.instruction{height:3rem}.ball{height:var(--medium);width:var(--medium)}.eight{line-height:10.5rem}.answer{width:17rem;height:13rem}.answer-border{padding:8rem 6rem}}@media screen and (min-width: 1440){.wrapper{height:calc(100vh - 210px)}.instruction{height:3rem}.ball{height:var(--big);width:var(--big)}.eight{line-height:11.5rem}.answer{width:17rem;height:13rem}.answer-border{padding:8rem 6rem}}.ball-shake{animation:shake 1s ease-in-out infinite}@keyframes shake{0%,to{transform:translate(0) rotate(0)}5%,95%{transform:translate(4px,-2px) rotate(2.5deg)}10%,90%{transform:translateY(-6px) rotate(4deg)}15%,85%{transform:translate(2px,-2px) rotate(-1deg)}20%,80%{transform:translate(-2px,2px) rotate(-4deg)}25%,75%{transform:translate(-6px,-2px) rotate(2deg)}30%,70%{transform:translate(-2px,2px) rotate(5deg)}35%,65%{transform:translate(4px,4px) rotate(-3deg)}40%,60%{transform:translate(0) rotate(-6deg)}45%,55%{transform:translate(-4px,4px) rotate(-2deg)}50%{transform:translate(2px,-2px) rotate(2deg)}}.footer{height:2rem;text-align:center;font-family:Montaga,serif;padding:1rem}a{text-decoration:none;color:inherit}.installPrompt{color:var(--light);background-color:var(--dark);width:100vw;position:absolute;left:50%;top:-25%;transform:translate(-50%,-25%);z-index:1;font-size:16px;filter:drop-shadow(0 0 1rem rgba(129,61,218,.418))}.installPrompt--visible{animation:show .5s ease-in-out;top:0%;transform:translate(-50%)}.installPrompt--hidden{animation:hide .5s ease-in-out;top:-25%;transform:translate(-50%,-25%)}@keyframes show{0%{top:-25%;transform:translate(-50%,-25%)}to{top:0%;transform:translate(-50%)}}@keyframes hide{0%{top:0%;transform:translate(-50%)}to{top:-25%;transform:translate(-50%,-25%)}}.promoText{margin:12px 18px;line-height:24px}.buttons{display:flex;gap:16px;margin:16px auto;width:fit-content}button{padding:8px;font-family:Montaga,serif;font-size:14px;border-radius:5px;outline:none;width:80px;cursor:pointer;transition:transform .1s ease-in-out,outline .1s ease-in-out;border:1px var(--light) solid}button:hover{transform:scale(1.1);outline:3px var(--purple) solid}button.dark{background-color:var(--dark)}button.install{background-color:var(--purple)}*{-webkit-tap-highlight-color:transparent}body{margin:0;padding:0}:root{--dark: #242424;--light: #ededed;--purple: rgb(129, 61, 218);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:10px;color-scheme:light dark;color:var(--light);background-color:var(--dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
