@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";*,:before,:after{box-sizing:border-box;font-family:Josefin Sans,sans-serif}html,body,#root{margin:0;padding:0}.app{background:var(--bg-page);min-height:100vh;color:var(--text-primary);font-family:Josefin Sans,sans-serif;font-weight:400;transition:background-color .25s,color .25s}.app.dark{--bg-page:#161722;--bg-card:#25273c;--text-primary:#cacde8;--text-muted:#5c5f7f;--text-hover:#e4e5f1;--border-color:#393a4c;--filter-inactive:#4d5066;--accent:#3a7bfd;--check-bg:linear-gradient(#57ddff, #c058f3);--hero-bg:url(../images/bg-desktop-dark.jpg);--hero-bg-mobile:url(../images/bg-mobile-dark.jpg)}.app.light{--bg-page:#fafafa;--bg-card:#fff;--text-primary:#484b6a;--text-muted:#9394a5;--text-hover:#484b6a;--border-color:#d2d3db;--filter-inactive:#9394a5;--accent:#3a7bfd;--check-bg:linear-gradient(#57ddff, #c058f3);--hero-bg:url(../images/bg-desktop-light.jpg);--hero-bg-mobile:url(../images/bg-mobile-light.jpg)}.hero{background-image:var(--hero-bg);background-position:top;background-repeat:no-repeat;background-size:cover;height:20rem}.todo-wrapper{z-index:2;width:540px;max-width:100%;margin:-15rem auto 0;position:relative}.todo-header{justify-content:space-between;align-items:center;margin-bottom:2.5rem;display:flex}.todo-header h1{letter-spacing:15px;color:#fff;margin:0;font-size:40px;font-weight:700;line-height:1}.clear-btn,.filters button,.delete-btn,.check-btn,.theme-btn{cursor:pointer;font:inherit;color:inherit;background:0 0;border:0;padding:0}.todo-input,.todo-card{background:var(--bg-card);border-radius:5px}.todo-input{align-items:center;gap:24px;height:64px;margin-bottom:24px;padding:0 24px;display:flex}.todo-input .circle{border:1px solid var(--border-color);border-radius:50%;flex:0 0 24px;width:24px;height:24px}.todo-input input{width:100%;color:var(--text-primary);background:0 0;border:0;outline:none;font-family:Josefin Sans,sans-serif;font-size:18px;line-height:1}.todo-input input::placeholder{color:var(--text-muted)}.todo-card{overflow:hidden;box-shadow:0 35px 50px -15px #00000059}.todo-list{margin:0;padding:0;list-style:none}.todo-item{border-bottom:1px solid var(--border-color);align-items:center;gap:24px;height:64px;padding:0 24px;display:flex}.todo-item .todo-text{color:var(--text-primary);flex:1;font-size:18px;line-height:1}.todo-item.completed .todo-text{color:var(--text-muted);text-decoration:line-through}.todo-item:hover .delete-btn{opacity:1}.check-btn{border:1px solid var(--border-color);border-radius:50%;flex:0 0 24px;place-items:center;width:24px;height:24px;display:grid}.check-btn:hover{background:linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(#57ddff, #c058f3) border-box;border:1px solid #0000}.todo-item.completed .check-btn{background:var(--check-bg);border:0}.delete-btn{opacity:0;place-items:center;transition:opacity .2s;display:inline-grid}.todo-footer{height:50px;color:var(--text-muted);justify-content:space-between;align-items:center;padding:0 24px;font-size:14px;display:flex}.filters{align-items:center;gap:18px;display:flex}.filters button{color:var(--filter-inactive);font-size:14px;font-weight:700}.filters button:hover{color:var(--text-hover)}.filters button.active{color:var(--accent)}.clear-btn{color:var(--text-muted);font-size:14px}.clear-btn:hover{color:var(--text-hover)}.attribution{color:var(--text-primary);text-align:center;margin:2rem}.attribution a{opacity:.8;color:var(--accent);text-decoration:none}.attribution a:hover{opacity:1}@media (width<=768px){.hero{background-image:var(--hero-bg-mobile);height:200px}.todo-wrapper{width:calc(100% - 48px);margin:-148px auto 0}.todo-header{margin-bottom:32px}.todo-header h1{letter-spacing:.75rem;font-size:1.9rem}.todo-input,.todo-item{gap:12px;height:52px;padding:0 16px}.todo-input{margin-bottom:16px}.todo-input input,.todo-item .todo-text{font-size:14px}.check-btn{flex:0 0 20px;width:20px;height:20px}.todo-footer{height:48px;padding:0 16px;font-size:13px}.todo-footer .filters{display:none}.filters-mobile{background:var(--bg-card);border-radius:5px;justify-content:center;align-items:center;gap:18px;height:48px;margin-top:16px;display:flex;box-shadow:0 10px 25px #0000001f}.filters-mobile button{color:var(--filter-inactive);background:0 0;border:0;font-size:14px;font-weight:700}.filters-mobile button.active{color:var(--accent)}.drag-tip{margin-top:40px;font-size:14px}}@media (width>=769px){.filters-mobile{display:none}}