*{box-sizing:border-box;margin:0;padding:0}body{background:#cff;font-family:Arial,Helvetica,sans-serif}.container{background:#cccc;border-radius:10px;width:500px;margin:60px auto;padding:25px;box-shadow:0 0 10px}h1{text-align:center;margin-bottom:20px}.input-group{gap:10px;display:flex}.input-group input{flex:1;padding:10px;font-size:16px}.input-group button{color:#faebd7;cursor:pointer;background:#000;border:none;border-radius:5px;padding:10px 20px}.input-group button:hover{background:#006400}h2{text-align:center;margin-top:25px;margin-bottom:10px}ul{padding:0;list-style:none}li{background:#f5f5f5;border-radius:6px;margin-bottom:20px;padding:12px;font-size:18px}.todo-item{justify-content:space-between;align-items:center;display:flex}.todo-item button{color:#faebd7;cursor:pointer;background:#000;border:none;border-radius:5px;padding:8px 12px}.todo-item button:hover{background:#8b0000}.todo-content{align-items:center;gap:10px;display:flex}.todo-content input{width:18px;height:18px}.todo-content span{font-size:18px}.counter{justify-content:space-between;margin:20px 0;font-weight:700;display:flex}.counter span{background:#f1f1f1;border-radius:5px;padding:8px 12px}.clear-btn{cursor:pointer;background:#77899e;border:none;border-radius:6px;width:100%;margin-top:20px;padding:12px;font-size:16px}.clear-btn:hover{background:#8b0000}completed span{font-weight:700;text-decoration:line-through}.completed{background-color:#90ee90;border-left:5px solid green}