body{font-family:Arial,sans-serif;background-color:#f4f4f4;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh}.container{width:100%;max-width:500px;background:#fff;padding:20px;border-radius:10px;box-shadow:0 0 10px #0000001a}h1{text-align:center;margin-bottom:20px;color:#333}.task-form{display:flex;flex-direction:column;gap:10px}.task-form input,.task-form select{padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px}.add-btn{background-color:#007bff;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.add-btn:hover{background-color:#0056b3}.task-list{margin-top:20px;list-style:none;padding:0}.task-item{background:#fff;padding:15px;border:1px solid #ddd;border-radius:5px;margin-bottom:10px;box-shadow:0 2px 4px #0000001a}.task-actions{display:flex;justify-content:space-between;margin-top:10px}.toggle-btn{background-color:#28a745;color:#fff;padding:5px 10px;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.toggle-btn:hover{background-color:#218838}.delete-btn{background-color:#dc3545;color:#fff;padding:5px 10px;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.delete-btn:hover{background-color:#c82333}@media (max-width: 600px){.container{max-width:90%;padding:15px}.task-form input,.task-form select{font-size:14px}.add-btn{padding:8px}.toggle-btn,.delete-btn{padding:5px 8px}}