.header{min-height:clamp(108px,10vw,158px);justify-content:space-between}.header,.header h1{display:flex;align-items:center}.header h1{font-size:clamp(1.688rem,5vw,2.5rem);letter-spacing:.938rem;margin:0;padding:0;line-height:1;color:#fff}.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.5rem}form{margin-bottom:clamp(.938rem,5vw,1.5rem)}.input-wrapper{width:100%;border-radius:var(--b-rad);display:flex;align-items:center;font-size:var(--font);padding:var(--pad);gap:var(--gap);transition:background-color var(--anim),color var(--anim),box-shadow var(--anim)}.input-wrapper .faux-checkbox{--size:20px;width:var(--size);height:var(--size);border-radius:50%;flex-shrink:0;transition:box-shadow var(--anim)}@media(min-width:768.001){.input-wrapper .faux-checkbox{--size:24px}}.todo-input{background:rgba(0,0,0,0);transition:background-color var(--anim),color var(--anim),box-shadow var(--anim);width:100%;border:none;font-family:inherit;font-size:inherit;z-index:1}.todo-input:focus{outline:none}[data-theme=dark] .input-wrapper{background-color:var(--bg-todo-dark);color:var(--text-primary-dark);box-shadow:var(--shadow-dark)}[data-theme=dark] .input-wrapper .faux-checkbox{box-shadow:inset 0 0 0 1px var(--border-dark)}[data-theme=dark] .input-wrapper .todo-input,[data-theme=dark] .input-wrapper::placeholder{color:var(--text-secondary-dark);transition:color var(--anim)}[data-theme=dark] .input-wrapper:focus::placeholder{color:rgba(0,0,0,0)}[data-theme=light] .input-wrapper{background-color:var(--bg-todo-light);color:var(--text-primary-light);box-shadow:var(--shadow-light)}[data-theme=light] .input-wrapper .faux-checkbox{box-shadow:inset 0 0 0 1px var(--border-light)}[data-theme=light] .input-wrapper .todo-input,[data-theme=light] .input-wrapper::placeholder{color:var(--text-secondary-light)}.filters{display:grid;grid-row-gap:1rem;row-gap:1rem;grid-template-areas:"items items clear" "filter-buttons filter-buttons filter-buttons"}@media screen and (min-width:768px){.filters{grid-template-columns:repeat(3,1fr);grid-template-areas:"items filter-buttons clear"}}.filters:not(.has-todos) .items{border-top-left-radius:var(--b-rad)}.filters:not(.has-todos) .clear{border-top-right-radius:var(--b-rad)}.filters .clear,.filters .items{width:100%;padding:1.5rem;font-family:Josefin Sans,sans-serif;transition:color var(--anim)}.filters .items{grid-area:items;border-bottom-left-radius:var(--b-rad);font-weight:400}.filters .clear{grid-area:clear;justify-self:end;text-align:right;border-bottom-right-radius:var(--b-rad);font-weight:400}.filters .filter-buttons{grid-area:filter-buttons;display:flex;gap:1.25rem;justify-content:center;padding:1rem;border-radius:var(--b-rad)}.filters .filter-buttons button{font-family:Josefin Sans,sans-serif;font-weight:600}@media screen and (min-width:768px){.filters .filter-buttons{border-radius:0}}.filters .clear,.filters .filter-buttons button,.filters .items{font-size:1.125rem}@media screen and (min-width:768px){.filters .clear,.filters .filter-buttons button,.filters .items{font-size:.875rem}}.filters button{background:none;border:none;cursor:pointer;transition:color var(--anim)}[data-theme=dark] .filters .filter-buttons button.active,[data-theme=light] .filters .filter-buttons button.active{color:var(--primary-color)}.filters .items{transition:background-color var(--anim)}.filters .clear,.filters .filter-buttons{transition:background-color var(--anim),color var(--anim)}[data-theme=dark] .filters .clear,[data-theme=dark] .filters .items{background-color:var(--bg-todo-dark);color:var(--text-secondary-dark)}[data-theme=dark] .filters .filter-buttons{background-color:var(--bg-todo-dark)}[data-theme=dark] .filters button{color:var(--text-secondary-dark)}[data-theme=dark] .filters button:hover{color:var(--border-light)}[data-theme=light] .filters .clear,[data-theme=light] .filters .items{background-color:var(--bg-todo-light);color:var(--text-secondary-light)}[data-theme=light] .filters .filter-buttons{background-color:var(--bg-todo-light)}[data-theme=light] .filters button{color:var(--text-secondary-light)}[data-theme=light] .filters button:hover{color:var(--text-todo-light)}.todo-list{border-radius:var(--b-rad);border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;transition:background-color var(--anim),box-shadow var(--anim)}.todo-list .todo-item{display:flex;align-items:center;transition:background-color var(--anim),box-shadow var(--anim),color var(--anim);font-size:var(--font);padding:var(--pad);gap:var(--gap);gap:clamp(.75rem,4vw,1.5rem)}.todo-list .todo-item.completed{text-decoration:line-through}.todo-list .todo-item .checkbox{--size:20px;width:var(--size);height:var(--size);border-radius:50%;background:var(--gradient2);cursor:pointer;display:grid;place-content:center;position:relative;flex-shrink:0;transition:box-shadow var(--anim)}@media(min-width:768.001){.todo-list .todo-item .checkbox{--size:24px}}.todo-list .todo-item .checkbox:after{content:"";position:absolute;width:calc(100% - 2px);height:calc(100% - 2px);top:50%;left:50%;border-radius:50%;transform-origin:center;transform:translate(-50%,-50%) scale(1);transition:transform var(--anim),background-color var(--anim)}.todo-list .todo-item .checkbox .checkmark{width:8px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg);margin-bottom:3px}@media(min-width:768.001){.todo-list .todo-item .checkbox .checkmark{width:12px;height:6px}}.todo-list .todo-item .checkbox.checked,.todo-list .todo-item .checkbox:hover{box-shadow:inset 0 0 0 var(--border-dark)}.todo-list .todo-item .checkbox.checked:after{transform:translate(-50%,-50%) scale(0)}.todo-list .todo-item:hover .delete-btn{opacity:1}.todo-list .todo-item .delete-btn{margin-left:auto;background:none;border:none;cursor:pointer;opacity:1;transition:opacity var(--anim);position:relative;width:24px;height:24px;display:grid;place-items:center}@media(min-width:769px){.todo-list .todo-item .delete-btn{opacity:0}}.todo-list .todo-item .delete-btn:after,.todo-list .todo-item .delete-btn:before{content:"";position:absolute;width:1px;height:24px;background:var(--border-dark);transition:all var(--anim)}.todo-list .todo-item .delete-btn:before{transform:rotate(45deg)}.todo-list .todo-item .delete-btn:after{transform:rotate(-45deg)}.todo-list .todo-item .delete-btn:hover:after,.todo-list .todo-item .delete-btn:hover:before{background:var(--text-primary-dark)}[data-theme=dark] .todo-item{background-color:var(--bg-todo-dark);box-shadow:inset 0 -1px 0 var(--border-dark);color:var(--text-todo-dark)}[data-theme=dark] .todo-item span{position:relative;max-width:-moz-fit-content;max-width:fit-content;cursor:pointer}[data-theme=dark] .todo-item span:after{background:var(--text-primary-dark)}[data-theme=dark] .todo-item.completed{color:var(--text-todo-dark-checked)}[data-theme=dark] .todo-list{background-color:var(--bg-todo-dark);box-shadow:var(--shadow-dark)}[data-theme=dark] .checkbox{box-shadow:inset 0 0 0 2px var(--border-dark)}[data-theme=dark] .checkbox:after{background-color:var(--bg-todo-dark)}[data-theme=light] .todo-item{background-color:var(--bg-todo-light);box-shadow:inset 0 -1px 0 var(--border-light);color:var(--text-todo-light)}[data-theme=light] .todo-item span{position:relative;max-width:-moz-fit-content;max-width:fit-content}[data-theme=light] .todo-item span:after{background:var(--text-primary-light)}[data-theme=light] .todo-item.completed{color:var(--text-todo-light-checked)}[data-theme=light] .todo-list{background-color:var(--bg-todo-light);box-shadow:var(--shadow-light)}[data-theme=light] .checkbox{box-shadow:inset 0 0 0 2px var(--border-light)}[data-theme=light] .checkbox:after{background-color:var(--bg-todo-light)}