.container{display:flex;justify-content:center;align-items:center;width:600px;color:#fff;margin:0 auto;padding:20px;background-color:#333;border-radius:10px;font-family:reem kufi,sans-serif}.to-do-list{text-align:center}h1{color:#fff}.input-field{display:flex;justify-content:space-between;margin-bottom:20px}.input-field input{width:400px;border:none;padding:10px;outline:none;border-radius:10px}.input-field button{padding:8px;background-color:#4caf50;color:#fff;border:none;cursor:pointer;border-radius:10px;margin-left:10px}.input-field button:hover{background-color:#45a049}ul{list-style-type:none;padding:0}.task-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.task-item input{width:70%;padding:8px;border:none;outline:none;margin-right:10px;border-radius:10px}.task-item button{background-color:#f44336;color:#fff;cursor:pointer;padding:10px 20px;border:none;border-radius:5px}.task-item button:hover{background-color:#e53935}button{margin-left:10px;padding:5px 10px;cursor:pointer;border-radius:5px}button:hover{opacity:.8}.task-text{background-color:#fff;padding:10px;border-radius:10px;width:100%;color:#000;display:flex;justify-content:space-between;align-items:center}.task-text span{font-size:20px}.edit-task,.edit-buttons{display:flex;justify-content:space-between;width:100%}@media (max-width: 720px){.container{width:100%;padding:10px}.input-field{flex-direction:column}.input-field input{width:100%;margin-bottom:10px}.task-item{flex-direction:column;align-items:flex-start}.task-item input{width:100%;margin-right:0;margin-bottom:10px}.task-item button{width:100%;margin-top:10px}h1{font-size:24px}.task-text{flex-direction:column;align-items:flex-start;padding:10px;width:100%}.task-text span{font-size:18px}.task-item button{padding:10px;width:100%;text-align:center}}@media (max-width: 480px){.container{width:90%;padding:20px;box-sizing:border-box;display:flex;justify-content:center}.input-field input{padding:8px;font-size:16px;margin-bottom:10px}.input-field button{width:100%;margin-top:10px;padding:10px;font-size:16px}.task-item input{width:100%;font-size:16px}.task-item button{width:100%;padding:10px;font-size:16px;margin-top:5px}.task-text{padding:10px}.task-text span{font-size:16px}h1{font-size:20px}.edit-task{flex-direction:row;justify-content:space-between;width:100%}.edit-buttons{flex-direction:row;width:auto;justify-content:space-between}.task-item button{padding:10px;width:auto}}