.Todo{display:flex;margin:0 -3rem 4px;padding:1.1rem 3rem;height:77px;justify-content:space-between;align-items:center;background:hsla(0,0%,100%,.2);overflow:hidden;transition:opacity .5s ease-in-out}.Todo,.Todo-task{position:relative}.Todo-task{transition:opacity .4s linear}.Todo.completed{transition:opacity .3s ease-in-out;transition-delay:.2s;opacity:.5}.Todo.completed .Todo-task:before{content:"";position:absolute;top:50%;left:-.5rem;display:block;width:0;height:4px;background:#fff;-webkit-animation:strikeitem .3s ease-in 0s forwards;animation:strikeitem .3s ease-in 0s forwards}@-webkit-keyframes strikeitem{to{width:calc(100% + 1rem)}}@keyframes strikeitem{to{width:calc(100% + 1rem)}}.Todo-buttons{flex-shrink:0;padding-left:.7em;margin-left:auto}.Todo-buttons button{border:none;font-size:1em;margin:.4em;background:none;-webkit-appearance:none;cursor:pointer;color:#fff;outline:none}.Todo-edit-form{display:flex;flex-wrap:wrap}.Todo-edit-form label{min-width:100%;margin-bottom:.5rem;font-size:1.3rem}.Todo-edit-form input{flex-grow:1;border:none;background:#f7f1f1;padding:0 1.5em;font-size:medium}.Todo-edit-form button{padding:0 1.3rem;border:none;background:#68b8c1;color:#fff;text-transform:uppercase;font-weight:700;border:1px solid hsla(0,0%,100%,.3);margin-left:5px;cursor:pointer;transition:background .2s ease-out;outline:none}.Todo-edit-form button:hover{background:#7bc1c9}.Todo-edit-form button,.Todo-edit-form input{font-family:"Roboto",sans-serif;height:3rem}.Todo-edit-form input{background-color:#d9edf0}@media screen and (max-width:768px){.Todo-task{font-size:1rem}.Todo-buttons button{font-size:.6em}.Todo-edit-form button,.Todo-edit-form input{height:1.2rem}.Todo-edit-form input{font-size:.6em}.Todo-edit-form button{padding:5px 10px;font-size:.6rem}.alert{font-size:.5em;padding:5px}.closebtn{font-size:10px}.Todo.completed .Todo-task:before{height:2px}}@media screen and (max-width:450px){.Todo-task{font-size:.6rem}.Todo-buttons button{font-size:.6em}.Todo-edit-form button,.Todo-edit-form input{height:1.2rem}.Todo-edit-form input{font-size:.6em}.Todo-edit-form button{padding:5px 10px;font-size:.6rem}.alert{font-size:.5em;padding:5px}.closebtn{font-size:10px}}.TodoList{margin:4rem auto;padding:2rem 3rem 3rem;max-width:600px;background:#2a8a92;color:#fff;box-shadow:-10px -10px 0 0 hsla(0,0%,39.2%,.1);border-radius:5px;overflow:hidden}.TodoList ul{margin-top:2.6rem;list-style:none}.TodoList h1{font-weight:400;font-size:2.6rem;letter-spacing:.05em;border-bottom:1px solid hsla(0,0%,100%,.3)}.TodoList h1 span{display:block;font-size:.8rem;margin-bottom:.7rem;margin-left:3px;margin-top:.2rem}.Todo .Todo-buttons i{display:inline-block}@media screen and (max-width:768px){.TodoList{width:500px}.TodoList h1{font-size:2rem}.TodoList h1 span{font-size:.6rem}}@media screen and (max-width:450px){.TodoList{width:350px}.TodoList h1{font-size:1.3rem}.TodoList h1 span{font-size:.45rem}}@media screen and (max-width:320px){.TodoList{width:300px}.TodoList h1{font-size:1.1rem}.TodoList h1 span{font-size:.3rem}}.NewTodoForm{margin-top:3rem;display:flex;flex-wrap:wrap}.NewTodoForm label{min-width:100%;margin-bottom:.5rem;font-size:1.3rem}.NewTodoForm input{flex-grow:1;border:none;background:#d9edf0;padding:0 1.5em;font-size:.8rem;outline:none}.NewTodoForm button{padding:0 1.3rem;border:none;background:hsla(0,0%,100%,.2);color:#fff;text-transform:uppercase;font-weight:700;border:1px solid hsla(0,0%,100%,.3);margin-left:5px;cursor:pointer;transition:background .4s ease-out;outline:none}.NewTodoForm button:hover{background:rgba(0,0,0,.1)}.NewTodoForm button,.NewTodoForm input{font-family:"Roboto",sans-serif;height:3rem}.alert{font-size:.8em;margin:5px 0;padding:10px;background-color:#f44336;color:#fff}.closebtn{margin-left:15px;color:#fff;background-color:transparent;font-weight:700;float:right;font-size:16px;line-height:20px;cursor:pointer;border:none;outline:none;transition:.3s}.closebtn:hover{color:#000}@media screen and (max-width:768px){.NewTodoForm label{font-size:.9rem}.NewTodoForm button,.NewTodoForm input{font-size:.5rem;height:2rem}.closebtn{font-size:10px}.alert{font-size:.6rem}}@media screen and (max-width:450px){.NewTodoForm label{font-size:.8rem}.NewTodoForm button,.NewTodoForm input{font-size:.4rem;height:1.6rem}.closebtn{font-size:12px}.alert{font-size:.5rem}}@media screen and (max-width:320px){.NewTodoForm label{font-size:.75rem}.NewTodoForm button,.NewTodoForm input{font-size:.4rem;height:1.6rem}.closebtn{font-size:10px}.alert{font-size:.45rem}}*{margin:0;padding:0;box-sizing:border-box}body,html{background:#e7e4de;font-size:1.1rem;font-family:"Roboto",sans-serif;height:100%}@media screen and (max-width:450px){body{font-size:.75rem}}@media screen and (max-width:320px){body{font-size:.4rem}}
/*# sourceMappingURL=main.39c430e5.chunk.css.map */