body{height:90vh;background:linear-gradient(160deg,#292828,#000);background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;color:#fff;display:flex;justify-content:center;align-items:center}#clock{max-width:400px;text-align:center;font-family:monospace;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.6rem}#clock h1{font-size:2rem;font-weight:900}.circle{width:100%;height:auto;aspect-ratio:1;background:linear-gradient(160deg,#292828,#000);border:5px solid rgb(23,12,29);box-shadow:0 0 0 10px #111,0 0 15px 18px #0000001a;border-radius:50%;padding:1rem}#break-label,#session-label{font-size:.7rem;font-weight:100;line-height:.4rem}#break-length,#session-length{font-size:1.5rem;margin:0 .4rem}#break-decrement,#break-increment,#session-decrement,#session-increment{color:#fff;border:none;background:none;font-size:1.4rem;cursor:pointer}#break-decrement:hover,#break-increment:hover,#session-decrement:hover,#session-increment:hover{opacity:.5}#timer{padding:1rem 0}#timer-label{font-size:.8rem;line-height:.6rem}#time-left{font-size:2rem;line-height:1.2rem}.start-stop,#reset{color:#e9e9e9;font-size:.9rem;margin:1rem;padding:.5rem 1rem;border:rgb(83,0,128) 1px solid;background:#000;border-radius:.4rem;cursor:pointer}.start-stop:hover,#reset:hover{opacity:.5}