@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";.nav-container{display:flex;justify-content:space-between;padding:10px;max-width:640px;margin:0 auto}.nav-container>a{cursor:pointer;padding:10px;color:#fff}.nav-container>a:hover{background-color:#444;border-radius:4px}@media (max-width: 900px){.nav-container{padding-bottom:25px}.nav-container>a{padding:0;font-size:12px}}html,body,#root{margin:0;padding:0;min-height:100vh;font-family:Montserrat,sans-serif}body:after{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,#000000b3,#000c);z-index:-1}.todos-list{padding:20px;max-width:1080px;min-height:500px;border-radius:24px;margin:0 auto;text-align:center;background-color:#f8f8f8}.form-container{display:flex;justify-content:space-between;width:100%;margin:0 auto 20px}.input-field{flex:1;padding:8px;margin-right:10px;border-radius:32px;border:none;font-size:12px;background-color:#f1f1f1;color:#999}.add-button{padding:16px;border-radius:32px;border:none;background:#6d4cfe;color:#fff;cursor:pointer}.title{font-size:26px;color:#444;font-weight:400;text-align:left}.empty{color:#2e2e2e}.ul-todo{list-style:none;width:100%;display:flex;flex-direction:column;align-items:center;padding:0;margin:0 auto}.todo-item{position:relative;font-size:14px;margin-bottom:10px;width:100%;box-sizing:border-box;text-align:left;color:#000;display:flex;align-items:center;border-radius:4px;height:32px}.todo-text{position:absolute;left:75px}.button-container{display:flex;border-radius:32px;border:none;padding:10px;position:absolute;right:0;background-color:#c3f3ef;height:16px}.delete-button,.edit-button{border:none;color:#fff;border-radius:4px;cursor:pointer;background-color:transparent}.save-button{padding:5px;border:none;color:#fff;border-radius:4px;cursor:pointer}.category-tag{color:#444;font-size:12px;position:absolute;left:0}.category-button{border:none;border-radius:4px;background-color:transparent}.side-buttons:hover{padding:2px;border-radius:4px}.menu{background-color:#d8d8d8;padding:10px 15px;height:100px;border-radius:4px;display:flex;flex-direction:column;gap:15px;text-align:center;box-shadow:3px 3px 3px #0000004d;z-index:9999}.menu-p{color:#444;font-size:12px;cursor:pointer;margin:0;padding:4px;border-radius:4px}.menu-p:hover{background-color:#444;color:#fff}.filter-container{margin:0 auto 15px;width:100%;display:flex;gap:10px;flex-direction:wrap}.filter-container>button{border:none;background-color:transparent;color:#444;border-radius:4px;padding:5px}.filter-container>button:hover{background-color:#444;color:#fff}.undo-container{background:#444;box-shadow:3px 3px 3px #0000004d;color:#fff;padding:8px 12px;margin-top:10px;margin-bottom:10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.undo-container button{background:transparent;border:none;padding:5px;cursor:pointer;border-radius:4px;color:#e26a6a;font-size:14px}@media (max-width: 900px){.title{text-align:center}.filter-container{display:flex;justify-content:space-between}.todo-text{font-size:12px;max-width:105px}.category-tag{font-size:10px}.button-container{padding:5px}.add-button{padding:10px}.filter-container>button{font-size:12px}}.main-header{background-color:transparent;position:relative;padding:10px 20px;height:50px}.main-header-menu{position:absolute;right:20px;display:flex;gap:5px;top:50%;transform:translateY(-50%)}.main-header-menu button{border:none;background-color:#444;color:#fff;border-radius:4px;font-weight:700;cursor:pointer;position:relative;width:180px;padding-right:30px;text-indent:5px;padding-top:10px;padding-bottom:10px}.main-header-menu>button:after{content:"";background-image:url("data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20stroke='%23ffffff'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cpath%20d='M14.2639%2015.9375L12.5958%2014.2834C11.7909%2013.4851%2011.3884%2013.086%2010.9266%2012.9401C10.5204%2012.8118%2010.0838%2012.8165%209.68048%2012.9536C9.22188%2013.1095%208.82814%2013.5172%208.04068%2014.3326L4.04409%2018.2801M14.2639%2015.9375L14.6053%2015.599C15.4112%2014.7998%2015.8141%2014.4002%2016.2765%2014.2543C16.6831%2014.126%2017.12%2014.1311%2017.5236%2014.2687C17.9824%2014.4251%2018.3761%2014.8339%2019.1634%2015.6514L20%2016.4934M14.2639%2015.9375L18.275%2019.9565M18.275%2019.9565C17.9176%2020%2017.4543%2020%2016.8%2020H7.2C6.07989%2020%205.51984%2020%205.09202%2019.782C4.71569%2019.5903%204.40973%2019.2843%204.21799%2018.908C4.12796%2018.7313%204.07512%2018.5321%204.04409%2018.2801M18.275%2019.9565C18.5293%2019.9256%2018.7301%2019.8727%2018.908%2019.782C19.2843%2019.5903%2019.5903%2019.2843%2019.782%2018.908C20%2018.4802%2020%2017.9201%2020%2016.8V16.4934M4.04409%2018.2801C4%2017.9221%204%2017.4575%204%2016.8V7.2C4%206.0799%204%205.51984%204.21799%205.09202C4.40973%204.71569%204.71569%204.40973%205.09202%204.21799C5.51984%204%206.07989%204%207.2%204H16.8C17.9201%204%2018.4802%204%2018.908%204.21799C19.2843%204.40973%2019.5903%204.71569%2019.782%205.09202C20%205.51984%2020%206.0799%2020%207.2V16.4934M17%208.99989C17%2010.1045%2016.1046%2010.9999%2015%2010.9999C13.8954%2010.9999%2013%2010.1045%2013%208.99989C13%207.89532%2013.8954%206.99989%2015%206.99989C16.1046%206.99989%2017%207.89532%2017%208.99989Z'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");background-position:center;background-size:100%;background-repeat:no-repeat;width:20px;position:absolute;right:3px;top:50%;transform:translateY(-50%);height:20px}.logo{font-family:Montserrat,sans-serif;font-optical-sizing:auto;font-style:normal;position:absolute;right:50%;transform:translate(50%,-50%);top:50%;font-size:40px;color:#fff}@media (max-width: 900px){.logo{text-align:center;font-size:32px;width:100%}.main-header-menu button{background-color:transparent;color:#fff;width:20px;text-indent:-99999px;display:none}.extra-options>button{display:none}}