button{padding:8px 12px;margin-right:5px;font:inherit;border:none;cursor:pointer}ul{list-style-type:none;padding:0}li{display:flex;align-items:center;margin-bottom:10px}li span{flex-grow:1;margin-right:10px}li button{margin-left:5px}@media (max-width: 600px){.container{max-width:300px}}.tasks{display:grid;list-style-type:none;gap:1.5em}.task{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:var(--_size);border:.2em solid hsl(var(--muted) / .8);padding:.6em;border-radius:calc(var(--_radius) * 2)}.task-group{display:flex;align-items:center;--taskgroup-gap: .5em;gap:var(--taskgroup-gap)}.filter-button{text-align:center}.button-f{margin-top:50px;margin-bottom:20px;max-width:fit-content;place-items:center;gap:.5em;background-color:hsl(var(--accent));color:#fff;padding:.5em;border-radius:var(--_radius);box-shadow:.05em .1em .9em hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish),background-color var(--_tspeed_fast) var(--_ttype_squish)}.checkbox{flex-shrink:0;width:1em;height:1em;background-color:hsl(var(--muted));border-radius:var(--_radius);box-shadow:0 0 .5em hsl(var(--accent) / .1),0 0 0 .05em hsl(var(--accent) / .5),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) ease-in-out;background-color:80ms ease-in-out}.checkbox:focus{outline:none}.checkbox:is(:focus-visible,:hover){box-shadow:0 0 0 hsl(var(--bg)),0 0 0 .05em hsl(var(--accent)),0 0 0 .225em hsl(var(--accent) / .3)}.wrapper{flex:1 1 100%;position:relative;display:grid;gap:.2em}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}input,label{font:inherit}:root{--_hue: 245;--_size: 1.8rem;--_radius: .2em;--_tspeed_fast: .18s;--_tspeed_slow: .3s;--_ttype_squish: cubic-bezier(.86, -.1, .27, 1.15);--bg--light: var(--_hue) 30% 94%;--txt--light: var(--_hue) 40% 5%;--accent--light: var(--_hue) 55% 50%;--accent1--light: 10 80% 60%;--muted--light: var(--_hue) 30% 99%;--bg--dark: var(--_hue) 15% 10%;--txt--dark: var(--_hue) 30% 88%;--accent--dark: var(--_hue) 50% 50%;--accent1--dark: 10 55% 50%;--muted--dark: var(--_hue) 20% 4%}@media (prefers-color-scheme: dark){:root{--bg: var(--bg--dark);--txt: var(--txt--dark);--accent: var(--accent--dark);--accent1: var(--accent1--dark);--muted: var(--muted--dark);color-scheme:dark}}@media (prefers-color-scheme: light){:root{--bg: var(--bg--light);--txt: var(--txt--light);--accent: var(--accent--light);--accent1: var(--accent1--light);--muted: var(--muted--light);color-scheme:light}}[color-scheme=dark]{--bg: var(--bg--dark);--txt: var(--txt--dark);--accent: var(--accent--dark);--accent1: var(--accent1--dark);--muted: var(--muted--dark);color-scheme:dark}[color-scheme=light]{--bg: var(--bg--light);--txt: var(--txt--light);--accent: var(--accent--light);--accent1: var(--accent1--light);--muted: var(--muted--light);color-scheme:light}@media screen and (max-width: 768px){:root{--_size: 1.3rem}}@media (prefers-reduced-motion: reduce){:root{--_tspeed_slow: 50ms;--_tspeed_fast: 50ms}}body{min-height:100vh;display:grid;justify-items:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:hsl(var(--bg));color:hsl(var(--txt))}::selection{background:hsl(var(--accent) / .8);color:hsl(var(--bg))}h1{font-size:calc(var(--_size) * 1.3);text-align:center}.container{margin:4vmax max(calc((100vw - 70rem)/2),1.5rem) 6em;display:grid;gap:clamp(2rem,3.5vmax,8rem);text-align:center}.button{max-width:fit-content;display:flex;place-items:center;gap:.5em;background-color:hsl(var(--accent));color:#fff;padding:.5em;border-radius:var(--_radius);box-shadow:.05em .1em .9em hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent));transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish),background-color var(--_tspeed_fast) var(--_ttype_squish)}.button:where(:active,:hover){background-color:hsl(var(--accent) / .7);box-shadow:0 0 0 hsl(var(--accent) / .3),0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent))}.button:focus{outline:none}.button:focus-visible{box-shadow:0 0 0 hsl(var(--accent) / .3),0 0 0 .2em hsl(var(--bg)),0 0 0 .4em hsl(var(--accent) / .7)}.input{margin-top:20px;margin-bottom:10px;border:none;border-radius:var(--_radius);padding:.35em .55em;width:100%;background-color:hsl(var(--muted));caret-color:hsl(var(--accent));box-shadow:0 0 0 -.1em hsl(var(--bg)),0 0 0 -.2em hsl(var(--accent) / .8);transition:box-shadow var(--_tspeed_fast) var(--_ttype_squish)}.input:focus{outline:none;box-shadow:0 0 0 .2em hsl(var(--bg)),0 0 0 .4em hsl(var(--accent) / .8)}.input::placeholder{opacity:100}[role=dialog]{position:fixed;z-index:100;inset:0;padding-inline:2vmax;display:grid;place-items:center;background-color:hsl(var(--bg) / .7)}[role=dialog] .todo{max-width:40ch;padding:2em 1.3em 1.3em;background-color:hsl(var(--bg));border-radius:var(--_radius);border:.1em solid hsl(var(--accent) / .3);box-shadow:0 -1em 3em hsl(var(--muted)),0 1em 3em hsl(var(--accent) / .2)}