body{font-family:Arial,sans-serif;background-color:#f4f4f4;margin:0;padding:20px}header{background:#007bff;color:#fff;padding:20px;border-radius:10px;display:flex;align-items:center;justify-content:space-between}header h1{margin:0}header input{padding:10px;border:none;border-radius:5px;width:70%;margin-right:10px;font-size:16px}header button{padding:10px 15px;background:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}header button:hover{background:#218838}ul{list-style-type:none;padding:0}.todo-item{background:#fff;margin:10px 0;padding:15px;border-radius:5px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 5px #0000001a}.todo-item .content{display:flex;align-items:center;flex:1}.text{cursor:pointer;font-size:18px;flex-grow:1}.text:hover{text-decoration:underline}.button-group{display:flex;gap:10px}button{padding:8px 12px;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.edit,.delete{background-color:#6495ed;color:#fff}.edit:hover{background-color:#90ee90}.delete:hover{background-color:red}@media (max-width: 600px){.todo-item{flex-direction:column;align-items:flex-start}.button-group{margin-top:10px;width:100%;justify-content:space-between}}input[type=text]{padding:8px;border:1px solid #ccc;border-radius:5px;width:60%;margin-right:10px}input[type=text]:focus{outline:none;border-color:#007bff}input[type=checkbox]{transform:scale(1.5);cursor:pointer}