.header{background-color:transparent;color:#333;padding:10px;text-align:center;width:100%;font-weight:500}.task-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #eee;transition:background-color .3s}.task-item:hover{background-color:#f9f9f9}.task-item button{background-color:#ff4d4d;color:#fff;border:none;padding:5px 10px;cursor:pointer;border-radius:4px;transition:background-color .3s}.task-item button:hover{background-color:#ff1a1a}.add-task-form{display:flex;justify-content:space-between;margin-bottom:20px}.add-task-form input{width:calc(100% - 50px);padding:10px;border:1px solid #ddd;border-radius:4px;outline:none;transition:border-color .3s}.add-task-form input:focus{border-color:#333}.add-task-form button{background-color:#4caf50;border:none;padding:10px;cursor:pointer;border-radius:4px;transition:background-color .3s}.add-task-form button img{width:20px;height:20px}.add-task-form button:hover{background-color:#45a049}.task-list{width:100%}.app{display:flex;flex-direction:column;align-items:center;background:#ffffffe6;padding:20px;border-radius:12px;box-shadow:0 4px 8px #0000001a;max-width:600px;width:100%;margin:20px}@media (max-width: 768px){.app{padding:10px;margin:10px}}body{font-family:Roboto,sans-serif;background:linear-gradient(to bottom,#f2f2f2,#d9d9d9);background-size:cover;margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100vh}#root{display:flex;justify-content:center;align-items:center;width:100%}