:root{color-scheme:light dark;--text-color: #343434;--html-background: #f3f3f3;--block-background: #fff;--accent-color: #007dbf;--slider-track-h: .5rem;--slider-thumb-size: 1rem}@media(prefers-color-scheme:dark){:root{--text-color: #dfdfdf;--html-background: #1f2a37;--block-background: #07121f;--accent-color: #30adef}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}img{display:block;max-width:100%;height:auto}button{cursor:pointer;background:none;border:none}body{min-height:100vh;display:grid;align-items:center;background-color:var(--html-background);font-family:system-ui,-apple-system,sans-serif;color:var(--text-color);font-weight:500;line-height:1}main{width:48rem;margin:0 auto;padding:3rem;background-color:var(--block-background);border-radius:1rem}@media(max-width:51rem){main{width:90%;padding:1.5rem}}header{display:flex;align-items:center;padding-bottom:3rem;gap:.5rem}@media(max-width:51rem){header{flex-direction:column}}header h1{font-weight:700;margin-bottom:.3rem}header span{font-size:1rem;font-weight:300;border-left:1px solid var(--text-color);margin-top:.5rem;padding-left:.5rem;padding-bottom:.3rem;line-height:.7rem}@media(max-width:51rem){header span{display:none}}header div{margin-top:.5rem;margin-left:auto;display:flex;align-items:center}@media(max-width:51rem){header div{margin:0}}header time{color:var(--accent-color);text-transform:uppercase}form{display:flex;flex-direction:column;gap:3rem;margin-bottom:4rem}form div{display:flex;align-items:center;gap:1rem}label{width:55%}@media(max-width:51rem){label{width:40%}}select{font-family:inherit;padding:.6rem;border:1px solid #999;border-radius:5px}section{display:flex;align-items:center;justify-content:center}section div{display:flex}section div button{padding-top:.5rem}p{font-weight:700;font-size:clamp(3rem,15vw,6rem);text-align:center;color:var(--accent-color);line-height:1;margin-inline:1rem}button{cursor:pointer;background:none;border:none;height:3rem;width:3rem;color:var(--accent-color);font-size:xx-large;display:flex;align-items:center;justify-content:center;transition:opacity .2s}button:hover{opacity:.8}footer{color:#999;font-size:small;font-weight:400;line-height:1.5;text-align:center;justify-self:center;margin:1.5rem}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}@media(max-width:51rem){input[type=range]{width:5.8rem}}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--accent-color);height:var(--slider-track-h);border-radius:.5rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--slider-thumb-size);width:var(--slider-thumb-size);background:var(--text-color);border-radius:50%;margin-top:-4px}input[type=range]:focus::-webkit-slider-thumb{outline:3px solid var(--text-color);outline-offset:.125rem}input[type=range]::-moz-range-track{background:var(--accent-color);height:var(--slider-track-h);border-radius:.5rem}input[type=range]::-moz-range-thumb{height:var(--slider-thumb-size);width:var(--slider-thumb-size);background:var(--text-color);border:none;border-radius:50%}input[type=range]:focus::-moz-range-thumb{outline:3px solid var(--text-color);outline-offset:.125rem}.underline{color:#999}