@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Indie+Flower&family=Comic+Neue:wght@400;700&display=swap";
:root{--primary-color:#ffe600;--secondary-color:#ff3b3b;--bg-color:#87ceeb;--text-main:#2b2b2b;--text-muted:#555;--notebook-line:#b0d4ff;--notebook-margin:#ff8c8c}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);background-image:url(/bg.png);background-position:50%;background-size:cover;background-attachment:fixed;min-height:100vh;font-family:Comic Neue,cursive;position:relative;overflow-x:hidden}h1,h2,h3{letter-spacing:.05em;text-shadow:2px 2px #fff,4px 4px #000;color:var(--secondary-color);font-family:Fredoka One,cursive}.paper-panel{background-color:#fffdf5;background-image:linear-gradient(90deg, transparent 40px, var(--notebook-margin) 40px, var(--notebook-margin) 44px, transparent 44px), linear-gradient(transparent 1.8rem, var(--notebook-line) 1.8rem, var(--notebook-line) 1.9rem, transparent 1.9rem);background-size:100% 100%,100% 2rem;border:4px solid #000;border-radius:8px;padding:2rem 2rem 2rem 60px;position:relative;overflow:hidden;box-shadow:8px 8px #000c}.sticky-note{background-color:#fffb8f;border:3px solid #000;padding:1.5rem;position:relative;transform:rotate(-2deg);box-shadow:5px 5px #000c}.sticky-note:before{content:"";background:#fff9;border:2px solid #000;border-radius:2px;width:40px;height:15px;position:absolute;top:-15px;left:50%;transform:translate(-50%)}.comic-input{color:#000;background:0 0;border:none;border-bottom:3px dashed #000;outline:none;width:100%;padding:8px;font-family:Indie Flower,cursive;font-size:1.8rem;font-weight:700}.comic-input:focus{border-bottom:3px solid var(--secondary-color)}.comic-input::placeholder{color:#aaa;font-family:Comic Neue,cursive;font-size:1.2rem}.btn-primary{background-color:var(--primary-color);color:#000;cursor:pointer;text-transform:uppercase;border:4px solid #000;border-radius:12px;padding:14px 28px;font-family:Fredoka One,cursive;font-size:1.2rem;transition:transform .1s,box-shadow .1s;box-shadow:4px 4px #000}.btn-primary:hover{background-color:gold}.btn-primary:active{transform:translate(4px,4px);box-shadow:0 0 #000}.hr-button-container{justify-content:center;align-items:center;margin:30px 0;display:flex}.hr-button-chunky{background-color:var(--secondary-color);color:#fff;text-transform:uppercase;cursor:pointer;text-align:center;text-shadow:3px 3px #000;z-index:20;border:5px solid #000;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;font-family:Fredoka One,cursive;font-size:3rem;line-height:1.1;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:inset -10px -10px #0003,inset 10px 10px #fff6,0 12px #8b0000,0 20px #000}.hr-button-chunky:hover{transform:translateY(4px);box-shadow:inset -10px -10px #0003,inset 10px 10px #fff6,0 8px #8b0000,0 16px #000}.hr-button-chunky:active{transform:translateY(12px);box-shadow:inset -10px -10px #0003,inset 10px 10px #fff6,0 0 #8b0000,0 8px #000}.hr-button-chunky.disabled{opacity:.6;cursor:not-allowed;transform:translateY(12px);box-shadow:inset -10px -10px #0003,inset 10px 10px #fff6,0 0 #8b0000,0 8px #000}.floating-quote{color:#000;pointer-events:none;white-space:nowrap;z-index:100;background:#fff;border:3px solid #000;border-radius:20px;padding:15px 25px;font-family:Indie Flower,cursive;font-size:1.5rem;font-weight:700;animation:15s linear infinite floatUp;position:fixed;box-shadow:4px 4px #00000080}.floating-quote:after{content:"";border:15px solid #0000;border-top-color:#000;border-bottom-width:0;width:0;display:block;position:absolute;bottom:-15px;left:30px}.floating-quote:before{content:"";z-index:1;border:11px solid #0000;border-top-color:#fff;border-bottom-width:0;width:0;display:block;position:absolute;bottom:-10px;left:33px}@keyframes floatUp{0%{opacity:0;transform:translateY(110vh)scale(.8)rotate(-5deg)}10%{opacity:.85}90%{opacity:.85}to{opacity:0;transform:translateY(-20vh)scale(1.1)rotate(5deg)}}.container{z-index:2;max-width:1200px;margin:0 auto;padding:2rem;position:relative}.leaderboard{margin-top:2rem}.leaderboard-item{border-bottom:2px dashed #0003;justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.leaderboard-item:last-child{border-bottom:none}.rank{color:var(--secondary-color);width:30px;font-family:Fredoka One,cursive;font-size:1.2rem}.name{flex-grow:1;font-family:Indie Flower,cursive;font-size:1.5rem;font-weight:700}.tally{background:var(--secondary-color);color:#fff;text-align:center;border:2px solid #000;border-radius:20px;min-width:40px;padding:4px 12px;font-family:Fredoka One,cursive;box-shadow:2px 2px #000}
