*{margin:0;padding:0;box-sizing:border-box}main{width:350px;margin:50px auto;background:#f9f9f9;padding:20px;border-radius:12px;box-shadow:0 4px 10px #0000001a;font-family:Poppins,sans-serif;transition:all .3s ease}.top{display:flex;gap:10px;margin-bottom:20px;margin-left:30px}.top input{padding:10px;border:2px solid #ddd;border-radius:8px;font-size:15px;outline:none;flex:1}.top input:focus{border-color:#6a5acd}.top button{background:#6a5acd;color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:15px;transition:.2s}.top button:hover{background:#5a4acb}.task-item{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:10px 12px;margin-bottom:10px;border-radius:8px;border:1px solid #eee;transition:.2s}.task-item span{font-size:16px;color:#333;word-break:break-word}.task-item button{background:#ff4d4d;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:.2s}.task-item button:hover{background:#e63636}@media(max-width:480px){main{width:90%;padding:20px 30px}.top input,.top button{font-size:13px;padding:8px}.task-item span{font-size:14px}}