*{box-sizing:border-box;margin:0;padding:0}html{background:rgb(39,39,39)}#root{display:flex;flex-direction:column;min-height:100vh;position:relative;margin:0 24px}button{--button_radius: .75em;--button_color: #e8e8e8;--button_outline_color: #000000;font-size:17px;font-weight:700;border:none;border-radius:var(--button_radius);background:var(--button_outline_color);transition:.2s}.flex{display:flex}.gap{gap:1em}::-webkit-scrollbar{width:10px;background-color:#696969}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:rgb(60,60,60)}::-webkit-scrollbar-thumb:hover{background:#151515}.Form-Container{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;margin:0}.TaskForm{background:rgb(64,64,64);display:flex;flex-direction:column;align-items:center;padding:1em;max-width:400px;width:90%;border-radius:4px;border:1px solid white}.TaskForm label{color:#fff;padding:20px;font-size:20px;font-weight:700}.TaskForm textarea{width:calc(100% - 15px);height:96px;padding:10px;border:1px solid black;color:#373737}.TaskForm textarea::placeholder{font-family:monospace}.TaskForm textarea:focus{outline-color:gray}.TaskForm-button{color:#000;background-color:#fff;border:none;padding:10px;cursor:pointer}.TaskForm .TaskForm-button-container{display:flex;justify-content:space-evenly;gap:1em;padding:1em;width:100%}.TaskForm-button{border-radius:0;height:45px;width:40%;font-size:1em;padding:1%}.TaskForm-button--add{font-weight:700;border:1px solid black;color:#1f1f1f;box-shadow:0 0 4px #d3d3d3;background:greenyellow}.TaskForm-button--add:hover{background:rgb(96,255,33);color:#000;box-shadow:0 0 5px #d3d3d3}.TaskForm-button--cancel{background:transparent;color:#fff;border:1px solid white}.TaskForm-button--cancel:hover{background:rgb(30,30,30)}.Nav-Container{display:flex;justify-content:space-around;width:100%;padding:1em 3em;color:#fff}.Nav-Container h1{font-size:3em}.Nav-Container li{list-style:none}.Nav-Container li a{text-decoration:none;color:#fff;font-size:40px}.Nav-Container li a:hover{color:#bfbfbf}.ChangeAlert{font-family:Ubuntu,sans-serif;font-size:12px;padding:7px;text-align:center;color:#000;background-color:#e0e031;width:auto;margin:auto;cursor:pointer;display:flex;justify-content:space-around;align-items:center;gap:5px}html{font-family:Ubuntu,sans-serif}.TaskCounter{font-family:Ubuntu,sans-serif;font-size:24px;max-width:90%;margin:15px auto;padding:5px;text-align:center;color:#fff}.TaskCounter-span{color:#adff2f;padding:0 5px;font-size:30px}.TaskCounter--loading{opacity:.5;background-color:#141414}.TaskSearch{padding:5px;width:300px;max-width:90%;align-self:center;text-align:center;height:40px;border-radius:3px;font-family:Ubuntu,sans-serif;border:none}.TaskSearch:focus{outline:1px solid greenyellow}.TaskSearch:disabled{opacity:.5}.TasksContainer{background-color:#1f1f1f;width:90%;max-width:500px;align-self:center;margin-top:30px;padding:10px;max-height:60vh;height:60vh;overflow:auto;font-family:Ubuntu,sans-serif;font-size:15px;border:1px solid black;color:#fff}.TaskContainer-Empty-Title{color:gray;text-align:center;line-height:55vh}.loader{--dim: 3rem;width:var(--dim);height:var(--dim);position:relative;animation:spin988 2s linear infinite;margin:100px auto}.loader .circle{--color: #797979;--dim: 1.2rem;width:var(--dim);height:var(--dim);background-color:var(--color);border-radius:50%;position:absolute}.loader .circle:nth-child(1){top:0;left:0}.loader .circle:nth-child(2){top:0;right:0}.loader .circle:nth-child(3){bottom:0;left:0}.loader .circle:nth-child(4){bottom:0;right:0}@keyframes spin988{0%{transform:scale(1) rotate(0)}20%,25%{transform:scale(1.3) rotate(90deg)}45%,50%{transform:scale(1) rotate(180deg)}70%,75%{transform:scale(1.3) rotate(270deg)}95%,to{transform:scale(1) rotate(360deg)}}.TaskItem{display:flex;align-items:center;border:1px solid rgb(145,145,145);padding:1em;background:rgb(43,43,43)}.TaskItem:not(:first-child){border-top:none}.TaskItem-Task{flex:1;padding:12px 9px;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c3c3c3}.TaskItem-Task--complete{font-weight:700;color:#fff}.Icon{cursor:pointer}.Icon-svg{width:12px;height:12px}.Icon-check{cursor:pointer}.Icon-check:hover .Icon-svg,.Icon-close:hover .Icon-svg{fill:#fff}.Icon-delete:hover .Icon-svg{fill:#ff2032}.Icon-edit:hover .Icon-svg{fill:#6e46ff}.ButtonAddTask{display:block;box-sizing:border-box;border:2px solid var(--button_outline_color);border-radius:var(--button_radius);background:var(--button_color);color:var(--button_outline_color);transform:translateY(-.2em);transition:transform .1s ease;width:60px;font-size:20px;padding:10px;position:fixed;left:75%;top:80%;border-bottom:5px solid black}button:hover .ButtonAddTask{transform:translateY(-.03em)}button:active .ButtonAddTask{transform:translateY(0)}