.main-body{background:linear-gradient(135deg,#667eea,#764ba2 110%);height:100vh;position:relative}.main-body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="1.5" fill="white" opacity="0.08"/><circle cx="40" cy="80" r="1" fill="white" opacity="0.06"/></svg>');background-size:100px 100px;animation:float 20s infinite linear}@keyframes float{0%{transform:translateY(0) translate(0)}50%{transform:translateY(-20px) translate(10px)}to{transform:translateY(0) translate(0)}}.todo-list-maindiv{background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);width:405px;height:584px;border-radius:20px;box-shadow:0 8px 32px #1f26875e;position:relative;z-index:1}.todo-list-maindiv h2{text-align:center;color:#fff;font-weight:600;font-size:28px;margin:30px 0;text-shadow:0 2px 4px rgba(0,0,0,.1)}.to-do-task-input-div{display:flex;justify-content:center;align-items:center;column-gap:15px;padding:20px}.form-control{background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3);border-radius:15px;color:#fff;padding:12px 18px}.form-control::placeholder{color:#ffffffb3}.form-control:focus{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 0 20px #fff3;color:#fff;outline:none}.form-floating label{color:#fffc;padding-left:18px}#add-button{width:55px;height:55px;border-radius:50%;background:#ffffff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:24px;font-weight:700;transition:all .3s ease}#add-button:hover{background:#fff6;transform:translateY(-2px);box-shadow:0 10px 20px #fff3}.todo-list-maindiv h6{color:#000;font-weight:600;margin:25px 0 15px 25px;font-size:14px;text-transform:uppercase;letter-spacing:1px}.tasks-list{width:90%;margin:auto;list-style:none;padding:0;display:flex;flex-direction:column;row-gap:10px;max-height:140px;overflow-y:auto}.tasks-list::-webkit-scrollbar{width:6px}.tasks-list::-webkit-scrollbar-track{background:#ffffff1a;border-radius:10px}.tasks-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:10px}.task{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:15px 20px;border-radius:15px;transition:all .3s ease;font-weight:500}.task:hover{background:#ffffff4d;border-color:#fff6;transform:translate(5px)}.tasks-button{column-gap:8px;display:flex}.btn-success{background:#28a745cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 12px;font-size:12px;color:#fff;font-weight:500;transition:all .3s ease}.btn-success:hover{background:#28a745;transform:scale(1.05)}.btn-danger{background:#dc3545cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 12px;font-size:12px;color:#fff;font-weight:500;transition:all .3s ease}.btn-danger:hover{background:#dc3545;transform:scale(1.05)}
