.footer{text-align:center;font-size:.75rem;margin-block-start:1rem}.heart{animation:1.5s heartbeat ease-in-out infinite;display:inline-block}@keyframes heartbeat{0%,30%,60%{transform:scale(1)}15%,45%{transform:scale(1.1)}}.loader{display:inline-block;width:2rem;height:2rem;border:.25rem solid white;border-radius:50%;position:relative;animation:spin 2s linear infinite}.loader:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1.5rem;height:1.5rem;border-radius:50%;border:.25rem solid transparent;border-bottom-color:#add8e6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main{animation:.5s fadeIn;flex-grow:1;display:flex;flex-direction:column;justify-content:center}.main .loading-wrapper{text-align:center}.main .question{font-size:clamp(1rem,1rem + 8vw,4rem);margin-block-end:1rem;text-align:center}.main .answer{font-size:clamp(1rem,1rem + 4vw,2rem);font-weight:700;margin-block-end:1rem;text-align:center}.main .answer .win,.main .answer .lose{display:flex;justify-content:space-between;align-items:center}.main .answer .win{animation:win 1s linear both;animation:starburst 3s infinite}.main .answer .lose{animation:1s lose;text-shadow:0 0 2rem red}.main form{display:block}.main .actions input{width:100%;border-radius:.5rem;border:solid #cccccc;font-size:1rem;padding-inline:1rem;padding-block:.5rem;outline:none;text-align:center;box-sizing:border-box;margin-block-end:1rem;autocomplete:off}.main .actions button{width:100%;background-color:var(--background);color:#fff;font-size:1rem;cursor:pointer;border-radius:.5rem;padding-inline:1rem;padding-block:.5rem;border:solid #cccccc}.main .actions button:hover{background-color:#0006}.main .actions button:active{transform:translateY(.25rem)}.main .guesses{margin-inline-end:10rem}.main .guesses .guess{animation:vibrate .5s linear both;text-decoration:line-through}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes vibrate{0%{transform:translate(0)}10%,50%,80%{transform:translate(-2px,-2px)}20%,60%,90%{transform:translate(2px,-2px)}30%,70%{transform:translate(-2px,2px)}40%{transform:translate(2px,2px)}to{transform:translate(0)}}@keyframes win{0%{transform:scaleZ(1)}10%,20%{transform:scale3d(.8,.8,.8) rotate3d(0,0,1,-10deg)}30%,50%,70%,90%{transform:scale3d(1.3,1.3,1.3) rotate3d(0,0,1,10deg)}40%,60%,80%{transform:scale3d(1.3,1.3,1.3) rotate3d(0,0,1,-10deg)}to{transform:scaleZ(1)}}@keyframes lose{0%{filter:blur(4rem);opacity:0}}@keyframes starburst{0%{background-image:repeating-conic-gradient(rgba(0,255,0,.5) 0deg 4deg,transparent 4deg 8deg)}25%{background-image:repeating-conic-gradient(rgba(0,255,0,.5) 2deg 6deg,transparent 6deg 10deg)}50%{background-image:repeating-conic-gradient(rgba(0,255,0,.5) 4deg 8deg,transparent 8deg 12deg)}75%{background-image:repeating-conic-gradient(rgba(0,255,0,.5) 6deg 10deg,transparent 10deg 14deg)}to{background-image:repeating-conic-gradient(rgba(0,255,0,.5) 8deg 12deg,transparent 12deg 16deg)}}.app{display:flex;flex-direction:column;align-items:center;padding:2rem;height:100%;width:100%}:root{--background: #4682b4}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;border:0;margin:0}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;background-color:var(--background);user-select:none}