html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;line-height:1.15;scroll-behavior:smooth}ol,ul{list-style:none;padding:0;margin:0}main{display:block}h1{font-size:2em;margin:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button{padding:0;border:0;cursor:pointer;background:0 0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}.hidden,[hidden],template{display:none}*,:after,:before{-ms-box-sizing:border-box;box-sizing:border-box}:root{--clr-primary-1:#f3f1f8;--clr-primary-2:#e4dcef;--clr-primary-3:#a469f7;--clr-primary-4:#e2d9f0;--clr-primary-5:#9651f7;--alert-success-color:#155724;--alert-success-background:#d4edda;--alert-success-border-color:#c3e6cb;--alert-danger-color:#721c24;--alert-danger-background:#f8d7da;--alert-danger-border-color:#f5c6cb;--todo-edit-btn-color:#fff;--todo-submit-text:#fff;--placeholder-color:#666;--check-icon:#fff;--black:#000;--black-light:#333;--grey:#979797;--white:#fff;--red-light:#eb4f4f;--green-light:#6ee978;--transition:all 0.3s;--transition-fast:all 0.1s;--radius:0.25rem}:root,[data-theme=dark]{--light-shadow:0 5px 15px rgba(0,0,0,0.1)}[data-theme=dark]{--clr-primary-1:#231b36;--clr-primary-2:#9373bf;--clr-primary-3:#410891;--clr-primary-4:#8f6dc5;--clr-primary-5:#4a08a6;--alert-success-color:#0b2d13;--alert-success-background:#68c07c;--alert-success-border-color:#56b86d;--alert-danger-color:#4a1218;--alert-danger-background:#e15662;--alert-danger-border-color:#de4554;--placeholder-color:#fff;--black:#fff;--black-light:#fff;--grey:#bbb;--white:#333;--red-light:#c11515;--green-light:#1fd12e}body{color:#333;color:var(--black-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f3f1f8;background-color:var(--clr-primary-1);margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.app{display:flex;align-items:center;justify-items:center;min-height:100vh;color:#333;color:var(--black-light);background-color:#f3f1f8;background-color:var(--clr-primary-1)}.app,.content{width:100%}.todo-wrapper{position:relative;width:100%;max-width:580px;padding:3.13rem 1.25rem;margin:0 auto}.todo-container{background-color:#fff;background-color:var(--white);border-radius:.25rem;border-radius:var(--radius);box-shadow:0 5px 15px rgba(0,0,0,.1);box-shadow:var(--light-shadow);padding:2rem;transition:all .3s;transition:var(--transition)}.todo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.todo-title{color:#333;color:var(--black-light);font-size:1.7rem}.todo-count{color:#979797;color:var(--grey);font-weight:700}.todo-form{display:flex}.todo-form-input{flex:1 1 100%}.todo-form input{width:100%;height:2.5rem;color:#666;color:var(--placeholder-color);background:#f3f1f8;background:var(--clr-primary-1);border:none;border-radius:.25rem 0 0 .25rem;border-radius:var(--radius) 0 0 var(--radius);outline:none;padding:.25rem .25rem .25rem 1rem}.todo-form input:focus{box-shadow:inset 0 0 0 2px #000}.todo-form ::-webkit-input-placeholder{color:#666;color:var(--placeholder-color)}.todo-form :-ms-input-placeholder{color:#666;color:var(--placeholder-color)}.todo-form ::placeholder{color:#666;color:var(--placeholder-color)}.todo-form button{flex:0 0 5rem;color:#fff;color:var(--todo-submit-text);background:#a469f7;background:var(--clr-primary-3);border:none;border-radius:0 .25rem .25rem 0;border-radius:0 var(--radius) var(--radius) 0;padding:.5rem;transition:all .3s;transition:var(--transition)}.todo-form button:hover{background:#9651f7;background:var(--clr-primary-5)}.todo-list{margin:2rem 0}.todo-list.edit-mode-on .todo-item:not(.editing-item){pointer-events:none;-webkit-filter:blur(2px) opacity(.5);filter:blur(2px) opacity(.5)}.todo-item{display:flex;align-items:center;justify-content:space-between;grid-gap:1rem;gap:1rem;width:100%;border-radius:.25rem;border-radius:var(--radius);padding:.25rem .7rem;margin-bottom:.5rem;transition:all .1s;transition:var(--transition-fast)}.todo-item:hover{background:#f3f1f8;background:var(--clr-primary-1);box-shadow:0 5px 15px rgba(0,0,0,.1);box-shadow:var(--light-shadow);-webkit-transform:scale(1.05);transform:scale(1.05)}.todo-item-title{flex:1 1 auto;line-height:1.5;min-width:0}.todo-item-title>div{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.checked .todo-item-title{text-decoration:line-through;-webkit-filter:opacity(.5) grayscale(1);filter:opacity(.5) grayscale(1)}.todo-edit-input{flex:1 1 100%}.todo-edit-input input{width:100%;height:1.56rem;color:#333;color:var(--black-light);background:#e2d9f0;background:var(--clr-primary-4);border:none;border-radius:.25rem 0 0 .25rem;border-radius:var(--radius) 0 0 var(--radius);outline:none;padding:0 .5rem}.todo-item-buttons{flex:0 0 auto;display:flex;align-items:center;font-size:.9rem}.todo-item-delete,.todo-item-edit{background:none;border-radius:.25rem;border-radius:var(--radius);border:1px solid transparent;outline:none;padding:.25rem;transition:all .3s;transition:var(--transition)}.todo-item-edit{color:#6ee978;color:var(--green-light)}.todo-item-delete{color:#eb4f4f;color:var(--red-light)}.todo-item-edit:hover{border-color:#6ee978;border-color:var(--green-light)}.todo-item-delete:hover{border-color:#eb4f4f;border-color:var(--red-light)}.todo-item-check-btn{display:flex;flex:0 0 18px;align-items:center;justify-content:center;font-size:.7rem;color:#fff;color:var(--check-icon);height:18px;border:1px solid #979797;border:1px solid var(--grey);border-radius:.25rem;border-radius:var(--radius);background:none}.todo-item-check-btn,.todo-item-check-btn svg{transition:all .1s;transition:var(--transition-fast)}.todo-item-check-btn svg{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}.checked .todo-item-check-btn{border-color:#9651f7;border-color:var(--clr-primary-5);background:#9651f7;background:var(--clr-primary-5)}.checked .todo-item-check-btn svg{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.todo-item-cancel-edit,.todo-item-submit{line-height:1;font-weight:700;height:1.5rem;padding:0 .5rem}.todo-item-submit{background:#6ee978;background:var(--green-light)}.todo-item-cancel-edit,.todo-item-submit{color:#fff;color:var(--todo-edit-btn-color)}.todo-item-cancel-edit{font-size:1.2rem;background:#eb4f4f;background:var(--red-light);padding-bottom:.25rem;margin-left:.25rem}.todo-button-group{display:flex;align-items:center;justify-content:center;grid-gap:15px;gap:15px}.todo-button-group button{background:none;border:1px solid transparent;border-radius:.25rem;border-radius:var(--radius);padding:.5rem;transition:all .3s;transition:var(--transition)}.todo-button-group button:hover{color:#fff;color:var(--white)}.remove-btn{color:#eb4f4f;color:var(--red-light)}.remove-btn:hover{border:1px solid #eb4f4f;border:1px solid var(--red-light);background:#eb4f4f;background:var(--red-light)}.alert{position:absolute;top:0;left:1.25rem;right:1.25rem;text-align:center;border:1px solid transparent;border-radius:.25rem;border-radius:var(--radius);padding:.5rem;margin-bottom:1rem}.alert-success{color:#155724;color:var(--alert-success-color);background:#d4edda;background:var(--alert-success-background);border-color:#c3e6cb;border-color:var(--alert-success-border-color)}.alert-danger{color:#721c24;color:var(--alert-danger-color);background:#f8d7da;background:var(--alert-danger-background);border-color:#f5c6cb;border-color:var(--alert-danger-border-color)}.theme-toggle{position:relative;width:200px;margin:0 auto 2rem}#switch{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;cursor:pointer}.names,.toggle,label{height:2.8rem;border-radius:6.25rem}label{display:flex;width:200px;background-color:rgba(0,0,0,.1);position:relative;cursor:pointer;margin:0 auto}.toggle{width:50%;background-color:#fff;background-color:var(--white);box-shadow:0 2px 15px rgba(0,0,0,.15);transition:-webkit-transform .3s cubic-bezier(.25,.46,.45,.94);transition:transform .3s cubic-bezier(.25,.46,.45,.94);transition:transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94)}.names,.toggle{position:absolute}.names{display:flex;align-items:center;font-weight:700;width:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none}.dark,.light{width:50%;text-align:center}.dark{opacity:.5}#switch:checked~label .toggle{-webkit-transform:translateX(100%);transform:translateX(100%);background-color:#34323d}#switch:checked~label .names .light{opacity:.5}#switch:checked~label .names .dark{opacity:1}
/*# sourceMappingURL=main.e6429a30.chunk.css.map */