:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--transition:.3s ease;background-color:#f5f5f5;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}input{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}#root{min-height:100vh}header{background-color:#f5f5f5;justify-content:space-between;align-items:center;width:100%;max-width:960px;margin:auto;padding:1rem;display:flex}header h1{text-align:center;color:#1f618d;font-size:1.5rem;font-weight:700}.todo-title{justify-content:center;align-items:center;gap:1rem;display:flex}.todo-logo{width:40px}nav{justify-content:center;align-items:center;display:flex}nav ul{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;list-style:none;display:flex}.user{color:#1f618d;justify-content:center;align-items:center;gap:5px;display:flex}main{justify-content:center;align-items:flex-start;width:100%;max-width:960px;height:100%;margin:auto;padding:0 1rem;display:flex}.tasks-container{width:100%;height:100%}.tasks-container .tasks-info{flex-direction:column;justify-content:center;align-items:center;width:100%;margin-bottom:1rem;display:flex}.tasks-container .tasks-info .info-text{color:#437d80;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:.5rem;width:100%;font-weight:600;display:flex}.tasks-container .tasks-info progress{width:100%}.tasks-container form{background-color:#fff;border-radius:1rem;justify-content:center;align-items:center;gap:10px;width:100%;margin-bottom:1rem;padding-left:1rem;display:flex;box-shadow:0 .3rem .5rem #7773}.tasks-container form input{background-color:#0000;border:none;outline:none;flex:1;width:100%}.task-item{border-bottom:1px solid #cacaca;align-items:center;gap:.5rem;padding:.5rem;display:flex}.task-item:hover{background-color:#e6e6e6}.task-input{background-color:#0000;border:none;outline:none;flex:1;padding:.25rem .5rem}.task-delete,.task-toggle{cursor:pointer;color:#312525;background-color:#0000;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:8px;display:flex}.task-delete:hover,.task-toggle:hover{transform:scale(1.1)}.task-span{cursor:pointer;flex:1;padding:.25rem .5rem}.task-complete{color:#777;text-decoration:line-through}footer{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem;padding:1rem;font-size:.9rem;display:flex}.loader{color:#00f;opacity:.95;background-color:#ebebf5;border-left:3px solid #00f;border-radius:5px;padding:.5rem 1rem;font-size:.9rem;animation:.3s ease-out slideIn;position:fixed;top:1rem;right:1rem;box-shadow:0 .3rem .5rem #7773}.error{color:red;opacity:.95;background-color:#f1e6e6;border-left:3px solid red;border-radius:5px;padding:.5rem 1rem;font-size:.9rem;animation:.3s ease-out slideIn;position:fixed;top:1rem;right:1rem;box-shadow:0 .3rem .5rem #7773}.message{color:green;opacity:.95;background-color:#edf3ed;border-left:3px solid green;border-radius:5px;padding:.5rem 1rem;font-size:.9rem;animation:.3s ease-out slideIn;position:fixed;top:1rem;right:1rem;box-shadow:0 .3rem .5rem #7773}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:.95;transform:translate(0)}}.primary-btn{cursor:pointer;color:#fff;transition:var(--transition);background-color:#8a2be2;border:none;border-radius:.5rem;outline:none;justify-content:center;align-items:center;gap:5px;padding:.5rem 1rem;display:flex}.primary-btn:hover{background-color:#8400ff;transform:scale(1.1)}.primary-btn:disabled{cursor:not-allowed}.add-btn{background-color:#2ecc71;border-radius:1rem;padding:1rem}.add-btn:hover{background-color:#27ae60}.add-btn:active{background-color:#1e8449}.add-btn:disabled{background-color:#a9dfbf}.auth-form{flex-direction:column;gap:1rem;width:100%;max-width:600px;display:flex}.auth-form h1{text-align:center;color:#1d4ed8;font-size:1.8rem;font-weight:800}.auth-form input{border:none;border-radius:.5rem;outline:none;padding:.5rem 1rem;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.auth-form button{color:#fff;cursor:pointer;background-color:#4747fc;border:none;border-radius:.5rem;outline:none;padding:.5rem 1rem;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5}.auth-form button:hover{background-color:#2323ff}a{color:#3838bd;text-decoration:none}a:hover{text-decoration:underline}.no-task-msg{text-align:center;font-size:1.5rem;line-height:1.5}.loading-overlay{z-index:9999;background-color:#fffc;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-container{gap:10px;display:flex}.loading-sqaure{background-color:#007bff;width:20px;height:20px;animation:.6s infinite alternate bounce}.loading-sqaure:nth-child(2){animation-delay:.2s}.loading-sqaure:nth-child(3){animation-delay:.4s}@keyframes bounce{0%{opacity:1;transform:scaleY(1)}to{opacity:.5;transform:scaleY(1.5)}}@media (width<=400px){header{flex-direction:column;justify-content:center;align-items:center;gap:.5rem}}