.wrapper{width:700px;max-width:100%;display:flex;flex-direction:column;gap:10px}#login-register{display:none;flex-direction:column;gap:10px;margin-bottom:20px}#username-input,#password-input{box-sizing:border-box;padding:12px 20px;width:100%;background:none;border:2px solid var(--secondary-color);border-radius:1000px;font:inherit;color:var(--text-color)}#username-input::placeholder,#password-input::placeholder{color:var(--secondary-color)}#username-input:focus,#password-input:focus{outline:none}#login-button,#register-button{background-color:var(--accent-color);padding:15px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer}#login-button:hover,#register-button:hover{background-color:var(--accent-color-dark)}#logout-button{background-color:var(--accent-color);padding:15px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer}#logout-button:hover{background-color:var(--accent-color-dark)}#todo-form{display:grid}#todo-input{box-sizing:border-box;padding:12px 20px;width:100%;background:none;border:2px solid var(--secondary-color);border-radius:1000px;font:inherit;color:var(--text-color);caret-color:var(--accent-color)}#add-button{position:absolute;top:0;right:0;background-color:var(--accent-color);height:100%;padding:0 30px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out}.todo .todo-text{padding:15px 0 15px 15px;flex-grow:1;transition:200mx ease;cursor:pointer}.login-register{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.username-input,.password-input{box-sizing:border-box;padding:12px 20px;width:100%;background:none;border:2px solid var(--secondary-color);border-radius:1000px;font:inherit;color:var(--text-color)}.username-input::placeholder,.password-input::placeholder{color:var(--secondary-color)}.username-input:focus,.password-input:focus{outline:none}.login-button,.register-button{background-color:var(--accent-color);padding:15px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer}.login-button:hover,.register-button:hover{background-color:var(--accent-color-dark)}.logout-button{background-color:var(--accent-color);padding:15px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer}.logout-button:hover{background-color:var(--accent-color-dark)}.Link{color:var(--accent-color);text-decoration:none}.Link:hover{color:var(--accent-color-dark);text-decoration:underline}*{margin:0;padding:0;box-sizing:border-box}.header{display:flex;justify-content:space-between;align-items:center;padding:0;margin:0;width:100%}.siteName{font-size:1.75rem;font-weight:700;color:var(--accent-color);padding-left:20px;padding-top:10px}.navLinks{display:flex;gap:20px;font-size:1rem;font-weight:700;color:var(--accent-color)}.userInfo{display:flex;align-items:center;gap:10px;color:var(--text-color)}.userInfo:hover{color:var(--accent-color);cursor:pointer}.userWelcome{padding-right:20px;cursor:pointer;position:relative}.userAccountMenu{position:absolute;right:0;top:calc(100% + 8px);background:var(--background);border:1px solid rgba(0,0,0,.08);padding:8px 0;min-width:140px;border-radius:6px;box-shadow:0 6px 18px #00000014;z-index:50}.accountOption{padding:8px 14px;cursor:pointer;color:var(--accent-color);display:block}.accountOption:hover{color:var(--accent-color-dark);text-decoration:underline}:root{--background: #101114;--primary-color: #1c1d20;--secondary-color: #4a4d57;--accent-color: #00ff22;--accent-color-dark: #00670e;--text-color: #f9f9f9}*{margin:0;padding:0}html{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:16pt;color:var(--text-color)}body{min-height:100vh;padding:10px;background-color:var(--background);display:flex;flex-direction:column;align-items:center}h1{margin-top:100px;margin-bottom:20px;font-size:3rem;font-weight:800;text-align:center;color:var(--accent-color)}.wrapper{width:100svw;max-width:700px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;gap:10px}#todo-form{display:grid;width:100%;max-width:700px;margin-left:auto;margin-right:auto;padding:0 25px}#todo-input{box-sizing:border-box;padding:12px 125px 12px 20px;width:100%;background:none;border:2px solid var(--secondary-color);border-radius:1000px;font:inherit;color:var(--text-color);caret-color:var(--accent-color)}#todo-input::placeholder{color:var(--secondary-color)}#todo-input:focus{outline:none}form{position:relative}#add-button{position:absolute;top:0;right:25px;background-color:var(--accent-color);height:100%;padding:0 30px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out}#add-button:hover{color:var(--text-color);background-color:var(--accent-color-dark)}#todo-list{width:100%;max-width:700px;margin-left:auto;margin-right:auto;padding:15px 25px;display:flex;flex-direction:column;gap:10px}.todo{margin-bottom:10px;padding:0 16px;background-color:var(--primary-color);border-radius:15px;display:flex;align-items:center}.todo .todo-text{padding:15px 0 15px 15px;flex-grow:1;transition:.2s ease;cursor:pointer}.delete-button,.edit-button{padding:3px;background:none;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.delete-button svg,.edit-button svg{transition:.2s ease}.delete-button:hover svg{fill:#f03}.edit-button:hover svg{fill:var(--accent-color)}.custom-checkbox{border:2px solid var(--accent-color);border-radius:50%;min-height:20px;min-width:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0;transition:.2s ease;cursor:pointer}input[type=checkbox]:checked~.custom-checkbox{background-color:var(--accent-color)}input[type=checkbox]:checked~.custom-checkbox svg{fill:var(--primary-color)}input[type=checkbox]:checked~.todo-text{text-decoration:line-through;color:var(--secondary-color)}input[type=checkbox]{display:none}@media (max-width: 500px){html{font-size:12pt}#add-button{position:unset;width:100%;margin-top:10px;padding:15px;height:auto}h1{margin-top:50px;font-size:15vw}}