:root{--clr-blue: hsl(220, 98%, 61%);--bg-mobile-light: url(/images/bg-mobile-light.jpg);--bg-desktop-light: url(/images/bg-desktop-light.jpg);--clr-gray-400: #484b6a;--clr-gray-300: #9393a5;--clr-gray-200: #d2d3db;--clr-gray-100: #e4e5f1;--clr-gray-50: #fafafa;--bg-mobile-dark: url(/images/bg-mobile-dark.jpg);--bg-desktop-dark: url(/images/bg-desktop-dark.jpg);--clr-blue-900: #161722;--clr-blue-800: #25273c;--clr-blue-700: #393a4c;--clr-blue-600: #4d5066;--clr-blue-500: #777a92;--clr-blue-200: #cacde8;--clr-blue-100: #e4e5f1;--bg-mobile: var(--bg-mobile-light);--bg-desktop: var(--bg-desktop-light);--color-background: var(--clr-gray-50);--color-todo-background: white;--color-text: var(--clr-gray-400);--color-text-hover: var(--clr-gray-400);--color-strikethrough: var(--clr-gray-200);--color-border: #e3e4f1;--color-delete: var(--clr-gray-400);--color-filter-text: #9495a5;--color-filter-hover: #494c6b}[data-theme=dark]{--bg-mobile: var(--bg-mobile-dark);--bg-desktop: var(--bg-desktop-dark);--color-background: var(--clr-blue-900);--color-todo-background: var(--clr-blue-800);--color-text: var(--clr-blue-200);--color-strikethrough: var(--clr-blue-600);--color-border: var(--clr-blue-700);--color-delete: #707394;--color-filter-text: #5b5e7e;--color-filter-hover: var(--clr-gray-100)}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{font-family:Josefin Sans,sans-serif;color:var(--color-text);background-color:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-size:18px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:Josefin Sans,sans-serif}button[data-v-8e73d248]{background-color:transparent;border:none;cursor:pointer}.form-item[data-v-24483038]{box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;display:grid;grid-template-columns:.1fr 1.2fr;padding-inline:1.4rem;padding-block:14px;background-color:var(--color-todo-background);border-radius:8px;transition:background-color .5s}.form-item input[data-v-24483038]{border:none;width:100%;color:var(--color-text);background-color:var(--color-todo-background);transition:color .5s,background-color .5s}.form-item input[data-v-24483038]:focus{outline:none;caret-color:var(--clr-blue)}.form-item [data-v-24483038]::placeholder{font-family:Josefin Sans,sans-serif}.form-item .circle[data-v-24483038]{width:25px;height:25px;border:1.3px solid var(--color-border);border-radius:100%;transition:border .5s}.filter-list[data-v-5b7967df]{box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;display:grid;grid-template-columns:1fr 1fr 1fr;font-size:14px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;color:var(--color-filter-text);background-color:var(--color-todo-background);padding-block:1rem;padding-inline:1.4rem;transition:background-color .5s,color .5s}.filter-list>button[data-v-5b7967df]{font-weight:400;justify-self:end}.filter-group[data-v-5b7967df]{display:flex;gap:1rem}button.active[data-v-5b7967df]{color:var(--clr-blue)}button[data-v-5b7967df]{font-weight:700;color:var(--color-filter-text);cursor:pointer;border:none;background-color:transparent}button[data-v-5b7967df]:hover{color:var(--color-filter-hover)}ul{color:var(--color-text);background-color:var(--color-todo-background);list-style:none;padding:0;border-top-left-radius:8px;border-top-right-radius:8px;transition:color .5s,background-color .5s;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;margin-top:1.5rem}ul .checkbox-wrapper{cursor:pointer;display:flex;align-items:center;gap:1rem}ul .checkbox-input-hidden{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ul .checkbox-gradient{width:25px;height:25px;border-radius:50%;border:1.2px solid var(--color-border);background-color:var(--color-todo-background);cursor:pointer;display:inline-block;transition:background .5s,border .5s}ul .checkbox-input-hidden:checked+.checkbox-gradient,ul .todo-item.completed .checkbox-gradient{border:none;background:url(/images/icon-check.svg),linear-gradient(to right,#57ddff,#c058f3);background-repeat:no-repeat;background-position:center}ul .checkbox-input-hidden:checked~.todo,ul .todo-item.completed .todo{text-decoration:line-through;color:var(--color-strikethrough)}ul .todo-item{cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:1rem;padding-inline:1.3rem;border-bottom:1.4px solid var(--color-border);transition:border .5s;position:relative}ul .todo-item:hover .checkbox-gradient{border:1.2px solid var(--clr-blue);border-radius:50%;display:inline-block}ul .todo-item:hover .checkbox-input-hidden:checked+.checkbox-gradient{border:none}ul .todo-item:hover .todo-delete{display:block}ul .todo{color:var(--color-text);transition:color .5s}ul .todo-delete{display:none;padding-right:1rem;cursor:pointer;color:var(--color-delete);width:18px;height:18px;border:none;background-color:transparent;align-self:center;justify-self:end}.helper-text{font-size:14px;color:#9495a5;margin-top:50px;text-align:center}.main-bg{height:12.5rem;background:var(--bg-mobile) no-repeat;background-position:top;background-size:cover;padding-top:2rem;padding-bottom:4rem}.main-wrapper{width:100%;max-width:33.813rem;margin:0 auto;padding:0 1.5rem}.main-wrapper header{margin-bottom:2rem;display:flex;justify-content:space-between;align-items:center}.main-wrapper header h1{font-weight:700;color:#fff;letter-spacing:15px;font-size:2.5rem}@media (min-width: 43.75rem){.main-bg{background:var(--bg-desktop) no-repeat;background-position:center;background-size:cover;height:18.75rem}.main-wrapper{padding:4rem 0}}