*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}a{display:inline-block;width:fit-content;color:inherit;text-decoration:none}ul{list-style:none}button,label,input,textarea{display:inline-block;width:fit-content;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:0;outline:0}button{cursor:pointer}img{max-width:100%}p{line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--Bright-Blue: hsl(220, 98%, 61%);--Check-Background-gradient-first: hsl(192, 100%, 67%);--Check-Background-gradient-second: hsl(280, 87%, 65%);--Very-Light-Gray: hsl(0, 0%, 98%);--Very-Light-Grayish-Blue: hsl(236, 33%, 92%);--Light-Grayish-Blue-first: hsl(233, 11%, 84%);--Dark-Grayish-Blue-first: hsl(236, 9%, 61%);--Very-Dark-Grayish-Blue-first: hsl(235, 19%, 35%);--Very-Dark-Blue: hsl(235, 21%, 11%);--Very-Dark-Desaturated-Blue: hsl(235, 24%, 19%);--Light-Grayish-Blue: hsl(234, 39%, 85%);--Light-Grayish-Blue-hover: hsl(236, 33%, 92%);--Dark-Grayish-Blue: hsl(234, 11%, 52%);--Very-Dark-Grayish-Blue: hsl(233, 14%, 35%);--Very-Dark-Grayish-Blue-second: hsl(237, 14%, 26%);--sm: .5rem;--md: .75rem;--la: 1rem;--xl: 1.25rem;--2xl: 1.5rem;--3xl: 2.5rem;--4xl: 3rem;--5xl: 5rem;--6xl: 6rem;--font-normal: 400;--font-bold: 700}html{font-family:Josefin Sans;font-size:16px;-webkit-user-select:none;user-select:none}.main{width:100%;min-height:100vh;background-repeat:no-repeat;background-size:100% 30%}.main.light{background-color:var(--Very-Light-Grayish-Blue);background-image:url(../images/bg-mobile-light.jpg)}.main.dark{background-color:var(--Very-Dark-Blue);background-image:url(../images/bg-mobile-dark.jpg)}.container{width:min(90%,750px);margin:0 auto;padding-top:var(--5xl)}.container__header{display:flex;justify-content:space-between;align-items:center}.header__logo{color:var(--Very-Light-Gray);letter-spacing:4px}.light img[alt="Light Mode"],.dark img[alt="Dark Mode"]{display:none}.container__body{margin:var(--2xl) 0}.body__input,.list__item{display:flex;justify-content:flex-start;align-items:center;gap:var(--la);padding:var(--xl) var(--2xl);background-color:var(--Very-Light-Gray);border-radius:var(--sm);overflow:hidden}.light .body__input{background-color:var(--Very-Light-Gray)}.dark .body__input{background-color:var(--Very-Dark-Desaturated-Blue)}.input__icon{display:inline-block;width:var(--2xl);height:var(--2xl);background-color:transparent;border:1px solid var(--Light-Grayish-Blue);border-radius:50%}.input__form,.form__text{width:100%}.light .form__text::placeholder{color:var(--Dark-Grayish-Blue)}.dark .form__text{color:var(--Light-Grayish-Blue)}.form__submit{visibility:hidden}.body__todos{margin:var(--xl) 0;border-radius:var(--sm);overflow:hidden;position:relative}.todos__list{color:var(--Very-Dark-Blue)}.list__item{gap:0;border-bottom:1px solid var(--Light-Grayish-Blue-first);cursor:grab}.list__item .wrapper{display:flex;justify-content:flex-start;align-items:center;gap:var(--la);width:100%}input[type=checkbox]{display:none}label.item__title{position:relative;padding-left:var(--3xl);cursor:pointer}label.item__title:before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);display:inline-block;width:var(--2xl);height:var(--2xl);background-color:transparent;border:1px solid var(--Light-Grayish-Blue);border-radius:50%}label.item__title:after{content:url(/images/icon-check.svg);position:absolute;top:50%;left:0;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;width:var(--2xl);height:var(--2xl);opacity:0;transition:.15s}.light input[type=checkbox]:checked+label.item__title{color:var(--Light-Grayish-Blue);text-decoration:line-through}.dark input[type=checkbox]:checked+label.item__title{color:var(--Dark-Grayish-Blue);text-decoration:line-through}input[type=checkbox]:checked+label.item__title:before{background-image:linear-gradient(135deg,var(--Check-Background-gradient-first),var(--Check-Background-gradient-second))}input[type=checkbox]:checked+label.item__title:after{opacity:1}.todos__info{display:flex;justify-content:space-between;align-items:center;padding:var(--xl) var(--2xl)}.todos__sort{display:flex;justify-content:center;align-items:center;gap:var(--2xl);margin:var(--xl) 0;padding:var(--xl) var(--2xl);border-radius:var(--sm)}.todos__sort button{text-transform:capitalize}.todos__sort button.active{border-bottom:1px solid var(--Bright-Blue)}.light .todos__list,.light .list__item,.light .todos__info,.light .todos__sort{background-color:var(--Very-Light-Gray);color:var(--Dark-Grayish-Blue)}.light .todos__info{box-shadow:0 20px 20px var(--Light-Grayish-Blue-first)}.dark .todos__list,.dark .list__item,.dark .todos__info,.dark .todos__sort{background-color:var(--Very-Dark-Desaturated-Blue);color:var(--Light-Grayish-Blue)}.light .container__footer{text-align:center;color:var(--Dark-Grayish-Blue)}.dark .container__footer{text-align:center;color:var(--Light-Grayish-Blue)}@media (min-width: 768px){html{font-size:18px}.main.light{background-image:url(../images/bg-desktop-light.jpg)}.main.dark{background-image:url(../images/bg-desktop-dark.jpg)}.todos__sort{margin:0 auto;position:absolute;bottom:0;left:50%;transform:translate(-50%)}}