@import"https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Nunito+Sans:wght@400;600;700;900&family=Roboto:wght@400;500;700&display=swap";.container{border:1px solid transparent}.TodoApp{margin:4rem auto;padding:2rem 3rem 3rem;max-width:600px;background:#ff6666;color:#fff;box-shadow:-10px -10px 20px #64646480;overflow:hidden;border-radius:6px}.TodoApp ul{margin-top:2.6rem;list-style:none}.TodoApp h1{font-weight:400;font-size:2.6rem;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.3)}.TodoApp h1 span{display:block;font-size:.9rem;margin-bottom:.7rem;margin-left:3px;margin-top:.2rem}@media (max-width: 414px){.TodoApp{width:414px}.TodoApp h1{font-weight:400;font-size:2.4rem;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.3)}.TodoApp h1 span{display:block;font-size:1rem;margin-bottom:.7rem;margin-left:3px;margin-top:.2rem}}.AddTodoForm{margin-top:3rem;display:flex;flex-wrap:wrap}.AddTodoForm label{min-width:100%;margin-bottom:.5rem;font-size:1.3rem}.AddTodoForm input{flex-grow:1;border:none;background:#f7f1f1;padding:0 1.5em;font-size:initial;outline:none;border-radius:5px}.AddTodoForm button{padding:0 1.3rem;border:none;background:rgba(255,255,255,.2);color:#fff;text-transform:uppercase;font-weight:700;margin-left:5px;cursor:pointer;transition:background .4s ease-out;border-radius:5px;font-size:1.2rem}.AddTodoForm button:hover,.AddTodoForm button:focus{background:rgba(0,0,0,.1);background:#fd4747}.AddTodoForm input,.AddTodoForm button{font-family:Roboto,sans-serif;height:3rem}.Todo{display:flex;margin:0 -3rem 4px;padding:1.1rem 3rem;height:77px;align-items:center;background:rgba(255,255,255,.2);position:relative;transition:opacity .5s ease-in-out}.completed{text-decoration:line-through;opacity:.6}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.2rem;height:1.2rem;margin-right:1rem;background-color:#fff;border-radius:5px;cursor:pointer}input[type=checkbox]:checked{background:#fff}input[type=checkbox]:checked:after{display:block;position:relative;content:"\2713";color:#fff;font-size:1rem;left:4px}input[type=checkbox]:checked:after{color:#fd4747}.Todo-buttons{flex-shrink:0;padding-left:.7em;margin-left:auto}.Todo-buttons button{border:none;padding:.5rem;font-size:1em;margin-left:.8em;background:none;cursor:pointer;color:#fff}.Todo-buttons button:hover,.Todo-buttons button:focus{color:#fd4747}.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:initial;border-radius:5px}.Todo-edit-form button{border-radius:5px;padding:0 1.3rem;border:none;background:#ff6666;color:#fff;text-transform:uppercase;font-weight:700;margin-left:6px;cursor:pointer;transition:background .2s ease-out;font-size:.8rem}.Todo-edit-form button:hover{background:#fd4747}.Todo-edit-form input,.Todo-edit-form button{font-family:Roboto,sans-serif;height:3rem}@media (max-width: 414px){.Todo{padding:1.1rem 1rem}}*{margin:0;padding:0;box-sizing:border-box}html,body{background:linear-gradient(180deg,#60b7eb,#b3dbd3,#f4d6db);font-size:1.2rem;font-family:Roboto,sans-serif;height:100%;overflow-y:scroll}@media (max-width: 414px){html,body{background:#60b7eb}}