*{box-sizing:border-box;margin:0;padding:0;font-family:Arial}body{background:linear-gradient(135deg,#667eea,#764ba2)}.navbar{color:#fff;background:#4b5bdc;justify-content:space-between;padding:15px 30px;display:flex}.navbar ul{gap:20px;list-style:none;display:flex}.header{text-align:center;color:#fff;margin:30px 0}.todo-box{background:#fff;border-radius:15px;width:90%;max-width:700px;margin:auto;padding:20px}.input-section{gap:10px;display:flex}.input-section input{border:2px solid #ddd;border-radius:10px;outline:none;flex:1;padding:15px}.input-section input:focus{border-color:#667eea}.input-section button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:10px;padding:15px}.todo-item{background:#f5f5f5;border-radius:10px;justify-content:space-between;margin-top:15px;padding:15px;display:flex}.completed{color:gray;text-decoration:line-through}.green{color:green}.orange{color:orange}.btns{gap:10px;display:flex}.complete-btn,.delete-btn{cursor:pointer;border:none;border-radius:50%;padding:12px}.complete-btn{color:#fff;background:green}.delete-btn{color:#fff;background:#dc143c}.footer{text-align:center;color:#fff;margin-top:30px;padding:20px}@media (width<=768px){.navbar{text-align:center;flex-direction:column;gap:10px}.input-section{flex-direction:column}}body{margin:0}