.formContainer{display:flex;margin-bottom:1rem}.input{flex:1;padding:.8rem;border:1px solid #d1d5db;border-radius:.375rem 0 0 .375rem;outline:none}.input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #bfdbfe}.input:hover{border-color:#3b82f6;scale:1.05;transition:all .3s ease-in-out}.button-add{background-color:#04f6de;color:#000;padding:.7rem;border:none;border-radius:0 .375rem .375rem 0;cursor:pointer}.button-add:hover{background-color:#0cf7a9;color:#fff}.listContainer{width:100%;max-width:500px;margin:0 auto;padding:1rem;border:1px solid #e5e7eb;border-radius:.375rem;background-color:#f3f4f6}.listItem{padding:.5rem;border:1px solid #e5e7eb;border-radius:.375rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff;margin-bottom:.5rem;gap:.9rem}.completed{background-color:#d1fae5;text-decoration:line-through}.button-completed{background-color:#3b82f6;color:#fff;padding:.5rem;border:none;border-radius:.375rem;cursor:pointer;margin-right:10px}.button-completed:hover{background-color:#93c5fd}.delete-button{background-color:#ef4444;color:#fff;padding:.5rem;border:none;border-radius:.375rem;cursor:pointer}.delete-button:hover{background-color:#f87171}.btns{display:flex;flex-direction:row;align-items:center}@media (max-width: 768px){.listContainer{width:100%;max-width:100%;margin:0 auto;padding:1rem;border:1px solid #e5e7eb;border-radius:.375rem;background-color:#f3f4f6}.listItem{padding:.5rem;border:1px solid #e5e7eb;border-radius:.375rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;background-color:#fff;margin-bottom:.5rem;gap:.9rem}.completed{background-color:#d1fae5;text-decoration:line-through}.button-completed{background-color:#3b82f6;color:#fff;padding:.5rem;border:none;border-radius:.375rem;cursor:pointer;margin-right:10px}.button-completed:hover{background-color:#93c5fd}}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{background-color:#f3f4f6}.appContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;background-color:#fff;box-shadow:0 10px 20px #0000001a;border-radius:1rem;width:100%;max-width:600px;padding:2rem;transition:transform .3s ease,box-shadow .3s ease;margin:40px auto 0;animation:fadeIn 1.5s ease}.appContainer:hover{box-shadow:0 15px 25px #0003}.header{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:1.5rem;color:#1f2937;position:relative}.title{font-size:1.5rem;font-weight:600;color:#1e24d3;margin-bottom:1rem}.taskList{width:100%;list-style:none;padding:0;margin:0}.taskItem{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;transition:background-color .3s ease,transform .3s ease}.taskItem:hover{background-color:#e5e7eb;transform:translate(5px)}.taskItem.completed{text-decoration:line-through;color:#9ca3af}.taskButton{background-color:#3b82f6;color:#fff;border:none;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .3s ease}.taskButton:hover{background-color:#2563eb}.addTaskForm{display:flex;width:100%;margin-top:1.5rem}.addTaskInput{flex:1;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem 0 0 .5rem;outline:none;transition:border-color .3s ease}.addTaskInput:focus{border-color:#3b82f6}.addTaskButton{background-color:#3b82f6;color:#fff;border:none;border-radius:0 .5rem .5rem 0;padding:.75rem 1rem;cursor:pointer;transition:background-color .3s ease}.addTaskButton:hover{background-color:#2563eb}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}