@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Handjet:wght@400;700&display=swap";*{box-sizing:border-box}#content{background:radial-gradient(#0b201d,#021619);border-radius:16px;max-width:60rem;margin:2rem auto;padding:2rem;box-shadow:0 2px 8px #000c}h1{text-align:center;text-transform:uppercase;color:#c1e2dd;text-shadow:0 0 4px #23222266;margin:0;font-family:Handjet,monospace;font-size:3.5rem}h1 em{color:#0ef;font-style:normal}header p{text-align:center;color:#c6f4f2;margin:0;font-size:1.2rem}#player{text-align:center}#player h2{color:#54a399}#player p{justify-content:center;align-items:center;display:flex}#player input{font:inherit;color:#d1f0ec;background-color:#192f2b;border:1px solid #54a399;border-radius:4px 0 0 4px;padding:.25rem}#player button{cursor:pointer;color:#061e1a;background-color:#54a399;border:1px solid #54a399;border-top-right-radius:4px;border-bottom-right-radius:4px;padding:.4rem 1rem}#player button:hover{background-color:#3c8379;border-color:#3c8379}#challenges{flex-wrap:wrap;gap:2rem;max-width:50rem;margin:3rem auto;display:flex}.challenge{color:#221c18;background:linear-gradient(#4df8df,#4df0f8);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;width:22rem;margin:2rem auto;padding:2rem;display:flex;box-shadow:0 2px 8px #23222299}.challenge button{color:#edfcfa;cursor:pointer;background:#12352f;border:none;border-radius:4px;margin-top:1rem;padding:.5rem 1rem;font-size:1.2rem}.challenge button:hover{background:#051715}.challenge h2{letter-spacing:.1em;text-align:center;text-transform:uppercase;color:#221c18;margin:0;font-size:1.5rem}.challenge-time{border:1px solid #46cebe;border-radius:4px;margin:.5rem;padding:.25rem .5rem}.challenge .active{animation:1s infinite flash}.result-modal{background-color:#d7fcf8;border:none;border-radius:8px;padding:2rem}.result-modal[open]{animation:.35s ease-out slide-in-from-top}.result-modal::backdrop{background:#000000e6}.result-modal h2{text-transform:uppercase;margin:0 0 .25rem;font-family:Handjet,monospace;font-size:3rem}.result-modal progress{accent-color:#46cebe;width:100%;height:1.5rem;margin:0}.result-modal p{margin:.5rem 0;font-size:1.2rem}.result-modal p strong{color:#10655b}.result-modal form{text-align:right}.result-modal button{color:#edfcfa;cursor:pointer;background:#12352f;border:none;border-radius:4px;margin-top:1rem;padding:.5rem 1rem;font-size:1.2rem}.result-modal button:hover{background:#051715}@keyframes slide-in-from-top{0%{opacity:0;transform:translateY(-15%)}to{opacity:1;transform:translateY(0)}}@keyframes flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}