:root{--color-background:hsl(0, 0%, 0%);--color-highlight:hsl(184, 83%, 57%);--color-dark:#353535;--color-red:hsl(0, 83%, 57%);--color-font:hsl(0, 0%, 50%);--font-size:36px;--progress:37}*{font:300 var(--font-size)/var(--font-size) "Agency Gothic CT",sans-serif}body,html{width:100%;height:100%;font:300 var(--font-size)/var(--font-size) "Agency Gothic CT",sans-serif}body{margin:0;background-color:var(--color-background)}content{min-height:100%;display:flex;flex-direction:column}main{margin:auto;align-items:center;text-align:center}footer{text-align:center;margin:1em;color:var(--color-font);font-family:Roboto,sans-serif}footer p{font-family:Roboto,sans-serif;font-size:.5em;margin:0}footer a{font-family:Roboto,sans-serif;font-size:1em}a:active,a:hover,a:link,a:visited{color:var(--color-font);text-decoration:none;font-weight:700}:focus{outline:.15em solid rgba(0,0,0,.1)}*,:after,:before{box-sizing:border-box}.red-bg{background-color:var(--color-red)!important}#countdown-container{display:flex;gap:1rem}.countdown{margin:2rem auto;display:flex;flex-direction:column;gap:1rem}.circle{position:relative;width:300px;height:300px;margin-inline:auto;outline:2px dotted var(--color-dark);border-radius:100%;outline-offset:-0.5rem}.number{position:absolute;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;color:#fff;font-weight:700}.text{color:#fff;text-transform:uppercase;font-size:1.5rem}.dots{position:absolute;width:100%;height:100%}.dot{background-color:var(--color-dark);border-radius:50%;position:absolute;transition:background-color .3s ease-in-out;transition:box-shadow .3s ease-in-out}.dot.active{background-color:var(--color-highlight)}.dot.recent{box-shadow:0 0 5px 2px var(--color-highlight)}.action{margin:auto;max-width:100%}.action #input-form{position:relative;width:12rem;margin:auto}.action #input-num{width:100%;border:none;padding:.5rem;border-radius:3rem;box-shadow:0 0 1rem rgba(0,0,0,.15);background-color:var(--color-dark);color:#fff}.action #input-btn{top:0;right:0;color:#fff;height:100%;border:none;padding:.75rem;position:absolute;border-radius:3rem;background-color:var(--color-highlight);text-transform:uppercase;line-height:0}.action #input-btn:focus{outline:.15em solid rgba(0,0,0,.15)}audio{color-scheme:dark}#audioplayer-alarmclock{margin:1em auto}