*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#141e30,#243b55);justify-content:center;align-items:center;min-height:100vh;font-family:Arial,Helvetica,sans-serif;display:flex}#root{width:100%}.hero{text-align:center;margin-bottom:25px}.h1{color:#fff;letter-spacing:2px;font-size:3rem}.ticks{gap:12px;width:90%;max-width:650px;margin:auto auto 25px;display:flex}.todoInput{background:#fff;border:none;border-radius:12px;outline:none;flex:1;padding:15px;font-size:1rem}.todoAdd{cursor:pointer;color:#fff;background:#00c853;border:none;border-radius:12px;padding:15px 25px;font-size:1rem;font-weight:700;transition:all .3s}.todoAdd:hover{background:#00b248;transform:scale(1.05)}.list{width:90%;max-width:650px;margin:auto}.list ul{list-style:none}.list li{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#ffffff1f;border-radius:15px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px;padding:18px;transition:all .3s;display:flex}.list li:hover{transform:translateY(-3px)}.todoText{word-break:break-word;flex:1;font-size:1.1rem}.todoComplete{cursor:pointer;color:#fff;background:#2962ff;border:none;border-radius:10px;padding:10px 15px;font-weight:700;transition:all .3s}.todoComplete:hover{background:#0039cb}.todoDelete{cursor:pointer;color:#fff;background:#ff1744;border:none;border-radius:10px;padding:10px 15px;font-weight:700;transition:all .3s}.todoDelete:hover{background:#d5002f}.completed{opacity:.7}.completed .todoText{color:#d3d3d3;text-decoration:line-through}@media (width<=600px){.ticks{flex-direction:column}.list li{flex-direction:column;align-items:stretch}.todoComplete,.todoDelete{width:100%}}