:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;flex-direction:column;justify-content:center;min-width:320px;min-height:100vh}h1{line-height:1.1}button:hover{border-color:#646cff}.dark-mode{background-color:#242424;color:#fff;transition:ease-in-out .5s}.light-mode{background-color:#fff;color:#242424;transition:ease-in-out .5s}.btn-dark-mode-dark{margin:10px;padding:.5em 1em;border-radius:8px;border:1px solid #1a1a1a;background:#1a1a1a;color:#fff;cursor:pointer;font-weight:700;position:absolute;width:40px;top:10px;right:10px}.btn-dark-mode-light{margin:10px;padding:.5em 1em;border-radius:8px;border:1px solid #1a1a1a;background:#f0f0f0;color:#242424;cursor:pointer;font-weight:700;position:absolute;width:40px;top:10px;right:10px}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.container-todo{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;border-radius:4px;border:#1a1a1a solid 1px;padding:5px;box-shadow:0 0 10px #00000080;min-width:300px}.container-todo .title-light{font-size:2em;width:100%;text-align:center;margin:0;padding:10px 0;color:#fff;border-bottom:1px solid #1a1a1a;transition:ease-in-out .8s}.container-todo .title-dark{color:#242424;font-size:2em;width:100%;text-align:center;margin:0;padding:10px 0;border-bottom:1px solid #1a1a1a;transition:ease-in-out .4s}.container-todo .task-dark{color:#fff;transition:ease-in-out .5s}.container-todo .task-light{color:#242424;transition:ease-in-out .5s}.container-todo ul{list-style:none;padding:0 10px 10px;margin:0;gap:10px;width:100%}.container-todo ul .todo-item{display:flex;justify-content:space-between;padding:10px;transition:ease-in-out .5s;border-bottom:1px solid #121111;max-height:100%;max-width:100%}.container-todo ul .todo-item-completed{display:flex;justify-content:space-between;padding:10px;background-color:#545252;transition:ease-in-out .5s;border-radius:2px;border-bottom:1px solid #121111}.container-todo input{display:flex;justify-content:space-around;background-color:#292929;color:#fff}.container-todo input:focus{outline:none;border:1px solid #1a1a1a;border-radius:4px;padding:10px}.input-task{max-width:100%;width:100%}.btn-add{border-radius:8px;border:1px solid transparent;padding:.3em 1em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .25s;width:100%}.btn-delete-dark{background:none;border:none;cursor:pointer;padding-left:20px;color:#fff}.btn-delete-light{background:none;border:none;cursor:pointer;padding-left:20px;color:#242424}.btn-delete-dark:hover,.btn-delete-light:hover{color:red}.check-task{background:none;border:none;cursor:pointer;border-radius:999px}.btn-delete-dark,.btn-delete-light,.check-task{visibility:hidden}.container-todo li:hover .btn-delete-dark,li:hover .check-task,li:hover .btn-delete-light{visibility:visible;transition:ease-in-out .5s}.task-title{font-size:1em;color:#fff;font-weight:500;flex-grow:1;margin:0;padding:0 10px;transition:opacity .2s,color .2s;opacity:1}.task-title.editing{opacity:0}.input-task-editing{animation:fadeInInput .2s ease}@keyframes fadeInInput{0%{opacity:0;transform:scaleX(.95)}to{opacity:1;transform:scaleX(1)}}.task-completed{transition:ease-in-out .5s;color:#aaa}.new-task-expand{overflow:hidden;animation:expandTask .4s cubic-bezier(.4,0,.2,1)}@keyframes expandTask{0%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}to{max-height:50px;opacity:1;padding-top:10px;padding-bottom:10px}}.task-collapse{overflow:hidden;animation:collapseTask .4s cubic-bezier(.4,0,.2,1)}@keyframes collapseTask{0%{max-height:100px;opacity:1;padding-top:10px;padding-bottom:10px}to{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}