@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}ul{list-style:none}button{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none}img{max-width:100%;display:block}input{font:inherit;background:0 0;border:none;outline:none}body{background-color:var(--color-bg-page);min-height:100vh}:root{--color-blue:#3a7bfd;--gradient-check:linear-gradient(135deg, #57ddff, #c058f3);--color-gray-600:#9394a5;--color-purple-300:#cacde8}[data-theme=light]{--color-bg-page:#fafafa;--color-bg-card:#fff;--color-border:#d2d3db;--color-text-main:#484b6a;--color-text-muted:#9394a5;--color-text-done:#d2d3db;--bg-image-desktop:url(/Todo-App-Frontend-Mentor/assets/bg-desktop-light-BIdKokTn.jpg);--bg-image-mobile:url(/Todo-App-Frontend-Mentor/assets/bg-mobile-light-eXTHhUPU.jpg)}[data-theme=dark]{--color-bg-page:#161722;--color-bg-card:#25273c;--color-border:#393a4c;--color-text-main:#cacde8;--color-text-muted:#5c5f7f;--color-text-done:#4d5066;--color-hover:#e4e5f1;--bg-image-desktop:url(/Todo-App-Frontend-Mentor/assets/bg-desktop-dark-DzAvO98h.jpg);--bg-image-mobile:url(/Todo-App-Frontend-Mentor/assets/bg-mobile-dark-DBhZPurk.jpg)}body{color:var(--color-text-main);font-family:Josefin Sans,sans-serif;font-size:18px}.header{height:300px;position:relative}.header__bg{background-image:var(--bg-image-mobile);background-position:50%;background-size:cover;position:absolute;inset:0}@media (width>=768px){.header__bg{background-image:var(--bg-image-desktop)}}.header__content{z-index:1;justify-content:space-between;align-items:center;padding-top:84px;display:flex;position:relative}@media (width<=767px){.header__content{padding-top:60px}}.header__title{color:#fff;text-transform:uppercase;font-size:48px;font-weight:600}@media (width<=767px){.header__title{font-size:28px}}.header__theme-toggle{width:26px;height:26px;padding:0}.header__theme-toggle img{width:100%;height:100%}@media (width<=767px){.header{height:250px}}.container{width:90%;max-width:540px;margin-inline:auto}.main{flex-direction:column;justify-content:center;align-items:stretch;display:flex;transform:translateY(-130px)}@media (width<=767px){.main{transform:translateY(-120px)}}.input-row{background-color:var(--color-bg-card);border-radius:5px;justify-content:flex-start;align-items:center;gap:20px;margin-bottom:20px;padding:20px;display:flex}.input-row__circle{border:1px solid var(--color-border);aspect-ratio:1;border-radius:50%;width:25px;display:inline-block}.input-row__field{color:var(--color-text-muted)}.todo-card{box-shadow:0px 52px 37px 0px var(--color-border);border-radius:5px;flex-direction:column;justify-content:center;align-items:stretch;display:flex;overflow:hidden}.todo-list{flex-direction:column;justify-content:center;align-items:stretch;display:flex}.todo-list .todo-item{background-color:var(--color-bg-card);border-bottom:1px solid var(--color-border);cursor:grab;justify-content:flex-start;align-items:center;gap:20px;padding:20px;display:flex}.todo-list .todo-item__check{border:1px solid var(--color-border);aspect-ratio:1;background:var(--color-bg-card);border-radius:50%;justify-content:center;align-items:center;width:25px;display:flex;position:relative}.todo-list .todo-item__check:before{content:"";background:var(--gradient-check);opacity:0;z-index:0;border-radius:50%;transition:opacity .3s;position:absolute;inset:-1px}.todo-list .todo-item__check:after{content:"";background:var(--color-bg-card);z-index:1;border-radius:50%;position:absolute;inset:1px}.todo-list .todo-item__check:hover:before{opacity:1}.todo-list .todo-item__check--image{z-index:2;max-width:100%;display:none;position:relative}.todo-list .todo-item__check.todoIsDone{background:var(--gradient-check);border:none}.todo-list .todo-item__check.todoIsDone:after{display:none}.todo-list .todo-item__check.todoIsDone .todo-item__check--image{display:block}.todo-list .todo-item__text{color:var(--color-text-main)}.todo-list .todo-item__delete{opacity:0;margin-left:auto;transition:opacity .3s}.todo-list .todo-item:hover .todo-item__delete{opacity:1}.todo-list .todo-item__text--done{color:var(--color-text-done);text-decoration:line-through}.footer{text-align:center;color:var(--color-text-muted);margin-top:40px;font-size:14px}.todo-footer{background-color:var(--color-bg-card);border-top:1px solid var(--color-border);flex-direction:row;justify-content:space-between;align-items:center;padding:20px;display:flex}.todo-footer__count{color:var(--color-text-muted);font-size:14px}.todo-footer__clear{color:var(--color-text-muted);font-size:14px;transition:color .3s}.todo-footer__clear:hover{color:var(--color-text-main)}.filter-tabs{color:var(--color-text-muted);gap:20px;font-size:14px;font-weight:600;display:flex}.filter-tabs__btn{transition:color .3s}.filter-tabs__btn:hover{color:var(--color-text-main)}.filter-tabs__btn--active,.filter-tabs__btn--active:hover{color:var(--color-blue)}.filter-tabs--mobile{background-color:var(--color-bg-card);border-top:1px solid var(--color-border);border-radius:5px;flex-direction:row;justify-content:center;align-items:center;margin-top:20px;padding:20px;display:flex}@media (width<=767px){.filter-tabs--desktop{display:none}}@media (width>=768px){.filter-tabs--mobile{display:none}}