*{box-sizing:border-box;margin:0;padding:0}body{font-family:Josefin Sans;font-size:1.8rem;font-weight:400}html{font-size:62.5%}.wrapper.light{background-color:#fafafa;background-image:url(/bg-desktop-light.jpg);color:#9394a5}.wrapper.dark{background-color:#161722;background-image:url(/bg-desktop-dark.jpg);color:#777a92}.wrapper{width:100%;padding-top:5rem;padding-bottom:5rem;background-repeat:no-repeat;background-position-x:center;background-position-y:top;background-size:contain}.container{max-width:54rem;margin:0 auto}header{color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:4.8rem}h1{font-size:3.6rem;font-weight:700}button{color:#9394a5;font-family:Josefin Sans;font-size:1.8rem;font-weight:400}.btn{border:none;background:transparent;cursor:pointer}.btn:focus{outline:none}.btn.active{font-weight:700}.wrapper.dark .btn.active{color:#57ddff}.input-control{background-color:#fff;width:100%;height:6.4rem;display:flex;justify-content:stretch;align-items:center;padding:2.4rem;border-radius:1rem;margin-bottom:2.4rem}.wrapper.dark .input-control{background-color:#25273c}.todo-input{width:100%;font-family:Josefin Sans;font-size:1.8rem;font-weight:400;border:none;outline:none}.wrapper.dark .todo-input{background-color:#25273c}.todo-list-section{background-color:#fff;border-radius:1rem;margin-bottom:4.8rem;box-shadow:-1px 5px 20px 10px #9da2eb4d}.wrapper.dark .todo-list-section{background-color:#25273c;box-shadow:-1px 5px 20px 10px #25273c33}.todo-list li{display:flex;flex-direction:row;height:6.4rem;justify-content:flex-start;align-items:center;padding-left:2.4rem;padding-right:2.4rem;border-bottom:.1rem solid hsl(236,33%,92%);row-gap:2.4rem;column-gap:2.4rem}.todo-list{list-style:none}.todo-list li:last-child{border-bottom:none}.wrapper.dark li{border-bottom-color:#393a4c}.todo-list p.completed{color:#d2d3db;text-decoration-line:line-through}.wrapper.dark .todo-list p.completed{color:#4d5066}.checkbox-border-wrap{padding:.1rem}.wrapper.dark .checkbox-border-wrap{background:#4d5066}.checkbox{display:flex;width:2.4rem;height:2.4rem;background-color:#fff;justify-content:center;align-items:center;cursor:pointer}.wrapper.dark .checkbox{background-color:#25273c}.todo-filter-control{display:flex;justify-content:space-between;align-items:center;padding:2.4rem;border-top:.1rem solid hsl(236,33%,92%)}.wrapper.dark .todo-filter-control{border-top-color:#393a4c}.control-btn.group{display:flex;row-gap:.5rem;column-gap:.5rem}