* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f9f9f9; color: #333; } .app { max-width: 500px; margin: auto; padding: 15px; } header { display: flex; justify-content: space-between; align-items: center; } header h1 { font-size: 22px; } button { padding: 8px 12px; border: none; border-radius: 6px; background: #007bff; color: #fff; cursor: pointer; transition: 0.2s; } button:hover { background: #0056b3; } ul#taskList { margin-top: 20px; list-style: none; } .task-item { background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; animation: fadeIn 0.3s ease-in-out; } .task-item p { margin-bottom: 4px; } .task-item small { color: gray; font-size: 12px; } .task-item.done { text-decoration: line-through; opacity: 0.6; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .modal.hidden { display: none; } .modal-content { background: #fff; padding: 20px; border-radius: 10px; width: 90%; max-width: 400px; animation: slideDown 0.4s ease; } .modal-content input, .modal-content textarea { width: 100%; margin: 8px 0; padding: 8px; border: 1px solid #ddd; border-radius: 6px; } @keyframes fadeIn { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} } @keyframes slideDown { from {transform: translateY(-50px); opacity: 0;} to {transform: translateY(0); opacity: 1;} }