:root{--background: #000100;--background-card: #0a0b0b;--tomato-red: #f70d1a;--tomato-green: #006400;--fluid-size: clamp(.5rem, 1vw + .75rem, 2rem)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;text-align:center}body *{margin:0;padding:0;text-align:center}html{font-family:system-ui,sans-serif}body{background-color:var(--background);color:#fff;overflow:hidden}main{background-color:var(--background-card);width:100dvw;height:100dvh;margin:0 auto;padding:1em;box-sizing:border-box;overflow-y:scroll;overflow-x:hidden;font-size:var(--fluid-size);scrollbar-width:none;-ms-overflow-style:none}main::-webkit-scrollbar{display:none}header{display:flex;flex-direction:column;width:100%;margin:0 auto}h1{font-size:2em}h2{font-size:1.25em;margin:0 0 10px}.input{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;gap:10px;font-size:1em;margin-top:1rem}.unfold-additional-options{flex-direction:column;justify-content:center;align-items:center;gap:10px}button{background:none;border:1px solid white;border-radius:30px;padding:1rem 3rem;color:#fff;cursor:pointer;font-size:1em;font-weight:700}button:hover{transform:scale(1.03)}.checkbox-container{font-family:system-ui,sans-serif;font-size:1em;line-height:1.1;display:grid;grid-template-columns:auto 1em;gap:.5em}.checkbox-container+.checkbox-container{margin-top:1em}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background);margin:0;font:inherit;color:currentColor;width:1.15em;height:1.15em;border:.15em solid currentColor;border-radius:.15em;transform:translateY(-.075em);display:grid;place-content:center}input[type=checkbox]:before{content:"";width:.65em;height:.65em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transform-origin:bottom left;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--tomato-green)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:focus{outline:max(2px,.15em) solid currentColor;outline-offset:max(2px,.15em)}.slider-container{display:grid;grid-template-areas:". label ." "input input output";grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:center;gap:10px;width:70dvw}.slider-container>label{grid-area:label;grid-column:1 / -1}.slider-container>input{grid-area:input;font-size:.8em}.slider-container>output{grid-area:output}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border-radius:1em;background:#ccc;outline:none;opacity:.7}input[type=range]:hover{opacity:.9}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:1.2em;height:1.2em;border:none;border-radius:1em;background-color:var(--tomato-green);transition:.2s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:1.3em;height:1.3em;border:none;border-radius:1em;background-color:var(--tomato-green);transition:.2s ease-in-out}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.5)}input[type=range]:active::-moz-range-thumb{transform:scale(1.5)}#pomodoro-amount-slider::-webkit-slider-thumb{background-color:var(--tomato-red)}#pomodoro-amount-slider::-moz-range-thumb{background-color:var(--tomato-red)}.chart-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;height:fit-content;margin:3rem auto 0;overflow:hidden}.chart-container{flex:1;aspect-ratio:3 / 4;width:100%;height:100%}.chart{width:50%;height:100%;display:block;padding:0 10px}@media (orientation: landscape) or (min-width: 768px){main{width:max-content;border-radius:30px}.checkbox-container{margin:10px 0}.unfold-additional-options{margin-bottom:10px}.slider-container{display:flex;flex-direction:row;justify-content:center;align-items:center}.chart-section{flex-direction:row;width:100%}.chart-container{aspect-ratio:1 / 1}}
