@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100..700&display=swap";:root{--blue-500: hsl(220, 98%, 61%);--check-bg-start: hsl(192, 100%, 67%);--check-bg-end: hsl(280, 87%, 65%);--light-gray-50: hsl(0, 0%, 98%);--light-purple-300: hsl(234, 39%, 85%);--light-gray-300: hsl(233, 11%, 84%);--light-gray-600: hsl(236, 9%, 61%);--light-navy-850: hsl(235, 19%, 35%);--dark-navy-950: hsl(235, 21%, 11%);--dark-navy-900: hsl(235, 24%, 19%);--dark-purple-300: hsl(234, 39%, 85%);--dark-purple-100: hsl(236, 33%, 92%);--dark-purple-600: hsl(235, 16%, 43%);--dark-purple-700: hsl(233, 14%, 35%);--dark-purple-800: hsl(237, 14%, 26%);--dark-gray-600: hsl(236, 9%, 61%);--hover-500: hsl(234, 66%, 40%);--font-family: "Josefin Sans", sans-serif;--checkbox-size: 1.5rem;--checkbox-icon-scale: .45;--checkbox-gap: 1rem;--checkbox-padding: .125rem;--hero-height: 18rem;--hero-overlap: 10rem}.light{--light-gray-50: hsl(235, 21%, 11%);--dark-navy-950: hsl(236, 33%, 92%);--hover-500: hsl(233, 40%, 75%);--light-gray-300: hsl(233, 11%, 84%);--light-gray-600: hsl(236, 9%, 61%);--light-navy-850: hsl(235, 19%, 35%);--dark-navy-900: hsl(235, 24%, 19%);--dark-purple-300: hsl(234, 39%, 85%);--dark-purple-100: ;--dark-purple-600: hsl(235, 16%, 43%);--dark-purple-700: hsl(233, 14%, 35%);--dark-purple-800: hsl(237, 14%, 26%);--dark-gray-600: hsl(236, 9%, 61%)}body{font-family:var(--font-family);background-color:var(--dark-navy-950);color:var(--light-gray-50);background-image:url(/todo-app/assets/bg-mobile-dark-DBhZPurk.jpg);background-size:contain;background-repeat:no-repeat}@media screen and (min-width: 768px){body{background-image:url(/todo-app/assets/bg-desktop-dark-DzAvO98h.jpg)}}body.light{background-image:url(/todo-app/assets/bg-mobile-light-eXTHhUPU.jpg)}@media screen and (min-width: 768px){body.light{background-image:url(/todo-app/assets/bg-desktop-light-BIdKokTn.jpg)}}h1,h2,h3,h4,h5,h6,p{margin:0}p:last-child{margin-bottom:0}ul{margin:0;padding:0;list-style:none}a{color:inherit;text-decoration:none}button{cursor:pointer;padding:0}img{display:block;max-width:100%;height:auto}ul,ol{list-style-type:none;margin:0;padding:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}#bg-img{width:100%;height:var(--hero-height);object-fit:cover;display:block}.page-header{padding:7.5rem 7.5rem 3rem;display:flex;justify-content:center;align-items:baseline;gap:1rem}@media screen and (min-width: 768px){.page-header{gap:2rem}}@media screen and (min-width: 1280px){.page-header{gap:7rem}}.theme-button{background-color:transparent;border:none;min-width:20px;min-height:20px;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3e%3cpath%20fill='%23FFF'%20fill-rule='evenodd'%20d='M13%200c.81%200%201.603.074%202.373.216C10.593%201.199%207%205.43%207%2010.5%207%2016.299%2011.701%2021%2017.5%2021c2.996%200%205.7-1.255%207.613-3.268C23.22%2022.572%2018.51%2026%2013%2026%205.82%2026%200%2020.18%200%2013S5.82%200%2013%200z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:contain}@media screen and (min-width: 768px) and (max-width: 1279px){.theme-button{min-width:25px;min-height:25px}}@media screen and (min-width: 1280px){.theme-button{min-width:30px;min-height:30px}}.theme-button.light{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3e%3cpath%20fill='%23FFF'%20fill-rule='evenodd'%20d='M13%2021a1%201%200%20011%201v3a1%201%200%2011-2%200v-3a1%201%200%20011-1zm-5.657-2.343a1%201%200%20010%201.414l-2.121%202.121a1%201%200%2001-1.414-1.414l2.12-2.121a1%201%200%20011.415%200zm12.728%200l2.121%202.121a1%201%200%2001-1.414%201.414l-2.121-2.12a1%201%200%20011.414-1.415zM13%208a5%205%200%20110%2010%205%205%200%20010-10zm12%204a1%201%200%20110%202h-3a1%201%200%20110-2h3zM4%2012a1%201%200%20110%202H1a1%201%200%20110-2h3zm18.192-8.192a1%201%200%20010%201.414l-2.12%202.121a1%201%200%2001-1.415-1.414l2.121-2.121a1%201%200%20011.414%200zm-16.97%200l2.121%202.12A1%201%200%20015.93%207.344L3.808%205.222a1%201%200%20011.414-1.414zM13%200a1%201%200%20011%201v3a1%201%200%2011-2%200V1a1%201%200%20011-1z'/%3e%3c/svg%3e")}.title{color:var(--light-grey-50);font-size:1.5rem;letter-spacing:.5rem;text-transform:uppercase}@media screen and (min-width: 768px) and (max-width: 1279px){.title{font-size:2rem}}@media screen and (min-width: 1280px){.title{font-size:2.5rem}}.creation-section{padding:.5rem}.creation-wrapper{display:flex;justify-content:center;align-items:center;gap:1rem;background-color:var(--dark-navy-900);border-radius:.5rem;margin:0 auto;width:320px;padding:1rem}@media screen and (min-width: 768px){.creation-wrapper{width:50%}}.creation-wrapper.light{background-color:var(--light-gray-300);color:var(--light-gray-50)}.todo-label{display:flex;align-items:center;padding:var(--checkbox-padding);cursor:pointer;gap:var(--checkbox-gap)}.todo-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;transition:background-color .25s linear box-shadow .25s linear transform .25s linear}.todo-input{padding:.5rem 1rem;background:none;border:none;font-size:1rem;outline:none;color:var(--dark-purple-100)}.custom-checkbox{width:var(--checkbox-size);height:var(--checkbox-size);border-radius:50%;background:var(--dark-navy-900);border:1px solid var(--dark-purple-600);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,opacity .2s ease,transform .2s ease}.custom-checkbox:checked{content:"";width:calc(var(--checkbox-size) * var(--checkbox-icon-scale));height:calc(var(--checkbox-size) * var(--checkbox-icon-scale));opacity:0;transform:scale(.8)}.todo-checkbox:checked+.custom-checkbox{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='9'%3e%3cpath%20fill='none'%20stroke='%23FFF'%20stroke-width='2'%20d='M1%204.304L3.696%207l6-6'/%3e%3c/svg%3e");background-size:2vh;background-repeat:no-repeat;background-position:center;border:none}.todo-checkbox:checked+.custom-checkbox:after{opacity:1;transform:scale(1)}.todo-wrapper{background-color:var(--dark-navy-900);border-radius:.5rem;overflow:hidden;margin:1rem 0}.todo-list{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--dark-purple-800)}.todo-text{flex:1;font-size:1rem;color:var(--dark-purple-100);word-break:break-word}.todo-text.completed{text-decoration:line-through;opacity:.5}.todo-delete-btn{border:none;background:none;cursor:pointer;color:var(--dark-gray-600);font-size:1rem}.todo-delete-btn:hover{color:var(--dark-purple-100)}.todo-footer{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:1rem;font-size:.9rem;color:var(--dark-gray-600)}.todo-list-button{border:none;background:none;cursor:pointer;color:var(--dark-gray-600)}.todo-list-button:hover{color:var(--dark-purple-100)}.todo-list-section{padding:.5rem}.todo-wrapper{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;padding:.5rem;background-color:var(--dark-navy-900);border-radius:.5rem;margin:0 auto;width:320px;padding:1rem}@media screen and (min-width: 768px){.todo-wrapper{width:50%}}.todo-wrapper.light{background-color:var(--light-gray-300);color:var(--light-gray-50)}.todo-counter-text{color:var(--dark-grey-600);font-size:.75rem}.todo-list-button{border:none;background-color:transparent;color:var(--dark-grey-600)}.todo-delete-btn{background-color:transparent;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%3e%3cpath%20fill='%23494C6B'%20fill-rule='evenodd'%20d='M16.97%200l.708.707L9.546%208.84l8.132%208.132-.707.707-8.132-8.132-8.132%208.132L0%2016.97l8.132-8.132L0%20.707.707%200%208.84%208.132%2016.971%200z'/%3e%3c/svg%3e");background-repeat:no-repeat;border:none;width:20px;height:20px}.todo-item{display:flex;gap:30px;align-items:center;justify-content:center}@media screen and (min-width: 768px){.todo-item{gap:15px}}.todo-text{color:var(--light-grey-50)}.section-filters{padding:.5rem}.filters-wrapper{display:flex;justify-content:center;margin:0 auto;width:320px;padding:.5rem;background-color:var(--dark-navy-900);border-radius:8px}@media screen and (min-width: 768px){.filters-wrapper{width:50%}}.filters-wrapper.light{background-color:var(--light-gray-300);color:var(--light-gray-50)}.filters-list{display:flex;gap:1rem}.filters-button{outline:none;border:none;background-color:transparent;color:var(--dark-grey-600);font-weight:700;transition:color .2s ease}@media screen and (max-width: 767px){.filters-button{font-size:.9rem}}.filters-button.active{color:var(--blue-500)}.filters-button:hover{color:var(--hover-500)}