*{box-sizing:border-box;margin:0}html{font-size:10vw}#app{height:100vh;display:flex}.clock{display:flex;align-items:center;justify-content:center;background:#222222;width:100%}.clock div{margin:0 10px}.separator{align-items:center;color:#ffab11;font-size:2rem}body{background-color:#fff}.color{background:radial-gradient(circle at center,#fce91f 0%,#ffe645 4%,#faf369 12.25%,#faf5bf 31.25%,#fefbe6 50%) top right/200% 200%;animation:vary 10s infinite alternate;width:100%}@keyframes vary{0%{background-position:top left}25%{background-position:center right}75%{background-position:bottom left}to{background-position:top right}}.joke{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10vw;color:#e3dda3;font:100 5vw sans-serif}body{background-color:#456375}.display{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 10vw;color:#e3dda3;font:100 5vw sans-serif}.author{margin:1em 0;color:#edaa2f;width:100%;text-align:end;font:italic 100 4vw sans-serif}.author:before{content:"- "}.player{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;font:100 8vw sans-serif;background-color:#e2a92b}.title{color:#fff}.timer{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#222222;width:100%;font:100 5vw sans-serif;color:#ffab11}.timer div{margin:0 10px}.controls{display:flex;align-items:center;justify-content:center;margin-top:20px}.controls input{width:10vw;height:10vh;font:100 7vh sans-serif;text-align:center;color:#f6c15d;background:#222222;border:2px solid #ffab11;border-radius:5px}.timer button{margin:30px;padding:5px 30px;font:100 5vw sans-serif;color:#fff2da;background:#ffab11;border:2px solid #9c6600}.separator{align-items:center;color:#ffab11;font: 1.5em sans-serif}.number{display:flex;width:1rem}.number-part{fill:#eccc22;opacity:.05;transition:opacity .75s ease}.is-active{opacity:1}.countdown{display:flex;align-items:center;justify-content:center;width:100%}.countdown div{margin:0 10px}canvas{position:absolute;overflow-y:hidden;overflow-x:hidden;width:100%;margin:0}.countdown-separator{align-items:center;color:#ffab11;font-size:2rem}@keyframes flash{0%{background-color:#222}10%{background-color:#fff}40%{background-color:#222}to{background-color:#222}}.timer-flash{animation:flash 1s infinite}.timer-expired{background-color:#fff}