:root{font-size:18px}:root[data-theme=theme-dark]{--bg-color: hsl(235, 21%, 11%);--card-bg: hsl(235, 24%, 19%);--text-color: hsl(0, 0%, 85%);--inactive-color: hsl(234, 11%, 65%);--active-color: hsl(234, 39%, 90%);--hover-color: hsl(236, 33%, 95%);--check-color: hsl(233, 14%, 35%);--shadow-color: hsla(0, 0%, 7%, .877);--plus-color: white;--bg-img-mobile: url(../images/bg-mobile-dark.jpg);--bg-img-desktop: url(../images/bg-desktop-dark.jpg);--focus-outline: 2px solid hsl(220, 98%, 61%)}:root[data-theme=theme-light]{--bg-color: hsl(236, 33%, 92%);--card-bg: hsl(0, 0%, 98%);--text-color: hsl(0, 0%, 15%);--inactive-color: hsl(236, 9%, 45%);--active-color: hsl(220, 98%, 45%);--hover-color: hsl(235, 19%, 25%);--check-color: hsl(233, 11%, 84%);--shadow-color: hsla(240, 5%, 85%, .603);--plus-color: black;--bg-img-mobile: url(../images/bg-mobile-light.jpg);--bg-img-desktop: url(../images/bg-desktop-light.jpg);--focus-outline: 2px solid hsl(220, 98%, 61%)}*{margin:0;padding:0;box-sizing:border-box;font-family:Josefin Sans,sans-serif}a,button{-webkit-user-select:none;user-select:none}a{text-decoration:none;color:var(--inactive-color)}a:hover{color:var(--hover-color)}.app{min-height:100vh;background-color:var(--bg-color);display:flex;justify-content:center;align-items:center;padding:2rem 1rem}.wrapper{width:100%;max-width:33.75rem;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.wrapper>*{width:100%;border-radius:4px;margin-bottom:1rem}.wrapper>*:not(header):not(p){background-color:var(--card-bg)}header{display:flex;justify-content:space-between;align-items:center;padding-top:.3rem;background-color:transparent}header h1{font-size:1.8rem;font-weight:700;text-transform:uppercase;letter-spacing:7px;color:#fff}button{cursor:pointer}.btn{border:none;width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;background-color:transparent}.theme-btn{justify-content:flex-end}form{display:flex;justify-content:space-between;align-items:center;color:var(--card-color);height:2.9rem;padding:.5rem 0rem .5rem 1rem}form span{width:25px;height:25px;border:2px solid var(--check-color);border-radius:50%;margin-right:.5rem}form input{flex:1;height:2.9rem;border:none;background-color:var(--card-bg);color:var(--text-color);font-size:1rem;padding:0 .5rem;outline:none}form input::placeholder{font-size:.8rem}form input:focus-visible{outline:1px solid #777a92;outline-offset:-1px;background-color:var(--card-bg)}form input:active{background-color:var(--card-bg)}form .add-todo{height:2.9rem;width:2.9rem;background-color:inherit;border:none;border-top-right-radius:inherit;border-bottom-right-radius:inherit;font-size:2.5rem;font-weight:400;color:var(--plus-color)}.todo-container{position:relative;margin-top:-1.5rem;box-shadow:1px 8px 10px var(--shadow-color),2px 5px 7px var(--shadow-color),1px 7px 4px var(--shadow-color)}.todos{list-style:none}.empty-container{width:100%;height:100px;text-align:center;line-height:100px;color:var(--text-color);border-bottom:1px solid var(--check-color);box-shadow:inset 0 0 5px 2px var(--shadow-color);border-top-left-radius:4px;border-top-right-radius:4px}.todo-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--check-color);color:var(--text-color);transition:all .3s ease;cursor:grab;font-weight:500}.todo-item>.btn{opacity:0;transition:opacity .3s ease}.todo-item:hover>.btn{opacity:1}.todo-item>.btn img{width:20px;height:20px}.todo-item:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px}.check-label{display:flex;align-items:center;cursor:pointer;position:relative;padding:.5rem;margin-right:.5rem}.check-label .check-round{width:25px;height:25px;border:2px solid var(--check-color);border-radius:50%;display:inline-block;position:relative;transition:all .3s ease}.check-label:hover .check-round{border-color:var(--active-color)}.check-label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.check-label input:checked+.check-round{background:linear-gradient(135deg,#5df,#c058f3);border-color:transparent}.check-label input:checked+.check-round:after{content:"";position:absolute;left:9px;top:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.todo{flex:1;font-size:.9rem;transition:all .3s ease;cursor:pointer}.strike{text-decoration:line-through;color:var(--inactive-color)}.actions{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;color:var(--inactive-color);font-size:.8rem;background-color:var(--card-bg);border-radius:4px;box-shadow:1px 8px 10px var(--shadow-color)}.actions .left-items{color:var(--inactive-color)}.filters{display:flex;justify-content:center;align-items:center;gap:1rem;color:var(--inactive-color);font-size:.8rem}.filter-btns{background:none;border:none;color:var(--inactive-color);font-size:.8rem;cursor:pointer;padding:.2rem .5rem;transition:color .3s ease}.filter-btns:hover{color:var(--hover-color)}.filter-btns.active{color:var(--active-color)}.clear-margin{margin:0}.active{color:var(--active-color)}.drag-help-info{text-align:center;color:var(--text-color);font-size:.9rem;padding:1.5rem 0;opacity:.8}.clear-completed-btn{background:none;border:none;color:var(--inactive-color);font-size:.8rem;cursor:pointer;padding:.2rem .5rem;transition:color .3s ease}.clear-completed-btn:hover{color:var(--hover-color)}.todo-item.ondrag{opacity:.5;cursor:grabbing}@keyframes slide{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.todo-item.slide{animation:slide .3s ease forwards}@media all and (min-width: 56.88rem){.app{background-image:var(--bg-img-desktop);background-size:cover}.wrapper{max-width:540px;margin:0 auto}header{padding-top:0}header h1{font-size:2.5rem}form{height:3.5rem}.todo-item{padding:1rem}.todo-item>.btn{width:25px;height:25px}.todo-item:hover>.btn{opacity:1}.todo{font-size:1rem}.actions{padding:1rem}.filters{font-size:.9rem}.todo-container{position:relative}}@media all and (min-width: 90rem){.wrapper{max-width:600px}.todo-item{font-size:1.1rem}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button:focus-visible,input:focus-visible,a:focus-visible{outline:var(--focus-outline);outline-offset:2px}.todo-item{color:var(--text-color);font-weight:500}.todo-item:hover{background-color:var(--card-bg);transform:translate(5px);transition:transform .2s ease}.skip-link{position:absolute;top:-40px;left:0;background:var(--active-color);color:var(--card-bg);padding:8px;z-index:100}.skip-link:focus{top:0}@media all and (min-width: 1180px){.actions{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}.left-items{justify-self:start}.clear-completed-btn{justify-self:end}}