@font-face{font-family:Satoshi Medium;font-family:sans-serif;src:url(/assets/Satoshi-Medium.93330866.otf)}*:focus{outline:none}html{height:100%}body{background:url(/assets/bg.ec602496.png) no-repeat center center fixed;background-size:cover;font-family:Satoshi Medium,sans-serif;margin:0;background-position:center;overflow:overlay}#root{height:calc(100% - 64px);padding:32px 0}.main{display:flex;flex-direction:column;max-width:800px;justify-content:center;align-items:center;margin:auto;height:100%}h2{margin-bottom:0;margin-right:auto}p.empty-state{color:#616895;width:fit-content}ul{display:flex;gap:6px;flex-direction:column;width:100%;padding:0}.todo-item{text-decoration:none;list-style-type:none;display:flex;gap:8px;align-items:center;background:rgba(256 256 256 / 40%);border-radius:8px;padding:12px 8px;transition:.3s;position:relative;border:2px solid transparent}.todo-item:hover{background:rgba(256 256 256 / 50%)}.todo-item.completed{background:rgba(256 256 256 / 20%)}.todo-item.is-editing{border:2px solid #1E212F}p{margin:0}.todo-text{transition:.3s;word-break:break-all}.todo-item.completed .todo-text{text-decoration:line-through;color:#616895}.complete-button,.check-icon-wrapper{border-radius:50%;border:1px solid #616895;background:none;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:4px;width:24px;min-width:24px;height:24px;min-height:24px;transition:.3s;animation:task-complete-animation .5s ease-in-out;box-shadow:0 4px 8px #0000001a}.top{display:flex;gap:8px;align-items:center}.done{display:flex;flex-direction:column;gap:16px;align-items:center;margin:0 auto}.check-icon-wrapper{background:#1E212F;fill:#fff;animation:task-completed-animation .8s ease-in-out;cursor:auto;width:40px;min-width:40px;height:40px;min-height:40px}.check-icon-wrapper:hover{transform:scale(1.1)}.check-icon-wrapper svg{width:20px;height:20px}@keyframes task-complete-animation{0%{transform:rotate(0) scale(1)}50%{transform:rotate(30deg) scale(.8)}to{transform:rotate(0) scale(1)}}.complete-button:hover,.complete-button:focus-visible{background:rgba(0 0 0 / 10%);border-color:#51567b}.todo-item .complete-button:hover svg{fill:#51567b}.todo-item.completed .complete-button{background:#1E212F;border-color:#1e212f;animation:task-completed-animation .8s ease-in-out}@keyframes task-completed-animation{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-20deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}.todo-item .complete-button svg{fill:#616895;width:24px;height:24px}.todo-item.completed .complete-button svg path{fill:#fff}input[type=text]{background:rgba(256 256 256 / 40%);padding:12px 16px;border:none;width:100%;height:20px;font-size:16px;border:2px solid transparent;transition:.3s;resize:none;font-family:Satoshi Medium,sans-serif}input[type=text]::placeholder{color:#616895666;font-size:16px}input[type=text]:focus{border:2px solid #1E212F}input[type=text].add-input{border-radius:8px 0 0 8px}input[type=text].edit-input{padding:0;background:transparent;border:none!important}button{margin:0;padding:0;border:none;background:none;font-family:Satoshi Medium,sans-serif}button{display:flex;justify-content:center;align-items:center;padding:8px 16px;gap:8px;background:#1E212F;border-radius:8px;border:none;color:#fff;font-size:16px;cursor:pointer;transition:.3s;border:2px solid transparent}button:active{transform:scale(.95)}button:focus-visible{outline:2px solid #1E212F;outline-offset:3px}button.add-button{border-radius:0 8px 8px 0}button.add-button:hover{filter:brightness(150%);animation:pulse-button 1.5s infinite}button.add-button:active{filter:brightness(120%)}.edit-form{width:100%;display:flex;gap:8px;align-items:center}.dropdown{margin-left:auto;position:relative}.no-fill-icon-button{background:none;padding:4px;width:28px;height:28px}.no-fill-icon-button:focus-visible{background:#66666630}.no-fill-icon-button:focus-visible svg{color:#1e212f;fill:#1e212f}.no-fill-icon-button svg{width:20px;height:20px;fill:#666;transition:.3s}.no-fill-icon-button:hover{background:#66666620}.no-fill-icon-button:active{background:#66666630}.no-fill-icon-button:hover svg{fill:#1e212f}.no-fill-svg{fill:none!important}.tooltip-wrapper{position:relative}.tooltip{opacity:0;position:absolute;z-index:-3;right:50%;top:54px;background:#1E212F;color:#fff;border-radius:8px;padding:8px;transform:translate(50%,-50%) translateY(4px);transition:all .3s cubic-bezier(.175,.885,.32,1.275),width .3s;box-shadow:0 8px 16px #1e212f29}.tooltip span{white-space:nowrap}button:hover+.tooltip,button:focus-visible+.tooltip{opacity:1;z-index:4;transform:translate(50%,-50%) translateY(0)}.dropdown-content{display:flex;z-index:-3;padding:4px;opacity:0;flex-direction:column;gap:4px;border-radius:8px;background:rgba(256 256 256 / 40%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:187px;box-shadow:0 8px 16px #1e212f29;top:36px;right:0;position:absolute;transform:translateY(10px);transition:all .3s cubic-bezier(.175,.885,.32,1.275),width .3s}.todo-item.completed .dropdown-content{width:214px}.dropdown-content.show{transform:translateY(0);z-index:2;opacity:1}.dropdown-content.important{width:193px}.dropdown-content .dropdown-item{background:none;justify-content:flex-start;align-items:center;padding:8px}.dropdown-content:not(.show) .dropdown-item{z-index:-1}.dropdown-content .dropdown-item:focus-visible{background:#66666630}.dropdown-content .dropdown-item:active{transform:scale(.97)}.dropdown-content .dropdown-item.danger svg,.dropdown-content .dropdown-item.danger span{color:#a80000;fill:#a80000!important}.dropdown-content .dropdown-item:hover{background:#66666620}.dropdown-content .dropdown-item.danger:hover,.dropdown-content .dropdown-item.danger:focus-visible{background:#a8000020}.dropdown-content .dropdown-item:active{background:#66666630}.dropdown-content .dropdown-item.danger:active{background:#a8000030}.dropdown-content .dropdown-item svg{color:#666;fill:#666;width:20px;height:20px;transition:.3s}.dropdown-content .dropdown-item:hover svg{color:#1e212f;fill:#1e212f}.dropdown-content .dropdown-item span{color:#1e212f;position:relative;top:1px}.add-todo-container{display:flex;width:100%;border-radius:8px;position:fixed;width:800px;bottom:32px}.add-todo-container>*:not(.no-fill-icon-button){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 16px 0 #1E212F00029}.mobile-toggle-drawer{bottom:-80px;border-radius:50%;padding:16px;position:fixed;transition:.5s cubic-bezier(.175,.885,.32,1.275)}.mobile-toggle-drawer:hover{box-shadow:0 0 #3d407f;animation:pulse-button 1.5s infinite}.right{display:flex;gap:8px;margin-left:auto}.star-button svg{color:#666}.star-button:hover svg{color:#1e212f}.star-button .important-star{fill:#e4b355}@keyframes pulse-button{0%{transform:scale(1);box-shadow:0 0 #3d407f85}70%{transform:scale(1.05);box-shadow:0 0 0 10px #3d407f00}to{transform:scale(1);box-shadow:0 0 #3d407f00}}.mobile-toggle-drawer svg{width:32px;height:32px}.add-todo-container .no-fill-icon-button{display:none}@media (max-width: 900px){.main{padding:0 16px}.tooltip.more-options{right:55px}.tooltip.mark-complete{right:0;left:-75px;width:fit-content}.tooltip.mark-uncompleted{right:0;left:-85px;width:fit-content}.add-todo-container{width:calc(100% - 32px);margin:0 16px}}@media (max-width: 400px){.add-todo-container{transition:.4s ease-in-out;bottom:-220px}.add-todo-container.show{display:flex;margin:0;padding:16px 16px 32px;background:rgba(256 256 256 / 40%);bottom:0;border-radius:16px 16px 0 0;box-shadow:none;flex-direction:column;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.add-todo-container.show .no-fill-icon-button{display:flex;width:fit-content;height:32px;margin-left:auto;margin-bottom:24px;color:#666}.add-todo-container.show input{width:calc(100% - 36px);border-radius:8px 8px 0 0;padding:16px;background:rgb(255 255 255 / 60%);border:2px solid transparent}.add-todo-container.show input:focus{border:2px solid #1E212F}.add-todo-container.show button.add-button{width:100%;border-radius:0 0 8px 8px;padding:16px}.add-todo-container.show+.mobile-toggle-drawer{bottom:-80px}.mobile-toggle-drawer{bottom:32px}}::selection{background:#616895;color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1E212F;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#2F3245}