@charset "UTF-8";:root{--bg-color: hsl(0, 0%, 95%);--todo-color: hsl(0, 0%, 100%);--accent-color: hsl(236, 9%, 61%);--border-color: hsl(236, 33%, 92%);--text-color: hsl(235, 19%, 35%);--strike-color: rgba(0, 0, 0, .5)}:root.darkTheme{--bg-color: hsl(235, 21%, 11%);--todo-color: hsl(235, 24%, 19%);--accent-color: hsl(233, 14%, 35%);--border-color: hsl(237, 14%, 26%);--text-color: hsl(236, 33%, 92%);--strike-color: rgba(255, 255, 255, .5)}*,*:before,*:after{box-sizing:border-box;transition:all .54s cubic-bezier(.61,-.17,.03,1.16)}i:before,i:after{transition:initial}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}a{text-decoration:none}img,picture{max-width:100%;display:block}html{font-size:18px}body{font-family:"Josefin Sans",sans-serif}h1{font-size:2.5rem;color:#fff;text-transform:uppercase;letter-spacing:1rem}@media (max-width: 550px){h1{font-size:2rem}}i{font-size:.675rem;color:#fff;background:transparent}h2,input.todo__input-area{font-size:1.25rem;color:var(--text-color);font-weight:400}@media (max-width: 800px){h2,input.todo__input-area{font-size:1.125rem}}@media (max-width: 550px){h2,input.todo__input-area{font-size:1rem}}h4{font-size:.9rem}.todo__options{font-weight:400}input.todo__input-area::placeholder{color:var(--accent-color)}.background{width:100%;height:18rem;position:absolute;inset:0rem;z-index:-10;background-image:url(/images/bg-desktop-light.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}@media (max-width: 800px){.background{background-image:url(/images/bg-mobile-light.jpg)}}html.darkTheme .background{background-image:url(/images/bg-desktop-dark.jpg)}@media (max-width: 800px){html.darkTheme .background{background-image:url(/images/bg-mobile-dark.jpg)}}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:initial}.header .mode__switcher{width:1.5rem;height:1.5rem;cursor:pointer;background-image:url(/images/icon-moon.svg);background-size:cover;background-position:center;background-repeat:no-repeat}html.darkTheme .mode__switcher{background-image:url(/images/icon-sun.svg);background-size:cover;background-position:center;background-repeat:no-repeat}.todo__input{height:4.25rem;background:var(--todo-color);border-radius:.35rem;padding:1rem;box-shadow:0 10px 35px -8px #0000008c;margin-top:2.5rem;margin-bottom:1.25rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:initial}@media (max-width: 550px){.todo__input{margin-top:1rem}}.todo__input-placeholder{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--border-color);margin-left:1rem;position:absolute}.todo__input-icon{border-radius:50%;padding:.3007518797rem .4285714286rem;margin-left:1rem;color:#fff;border:2px solid transparent;background:rgba(235,43,43,.795);cursor:pointer;transition:transform .54s cubic-bezier(.61,-.17,.03,1.16),opacity .54s cubic-bezier(.61,-.17,.03,1.16),color .25s,background .25s,border-color .25s;transform:translate(-150px);opacity:0;pointer-events:none}.todo__input-icon:hover{color:#eb2b2bcb;border-color:#fff}.todo__input-area{flex-grow:1;margin-left:1.5rem;background:transparent;padding:0;border:none;outline:none;font:inherit}.todo__list{padding:0;list-style:none}.todo__list .todo-item{height:4.25rem;background:var(--todo-color);padding:0 1rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:initial;transition:all .54s cubic-bezier(.61,-.17,.03,1.16);transform:translate(250px);opacity:0}.todo__list .todo-item:not(:last-child){border-bottom:.125rem solid var(--border-color)}.todo__list .todo-item:first-child{border-radius:.35rem .35rem 0 0}.todo__list .todo-item:hover>.remove-icon{transform:translate(0) skewY(0);opacity:1;pointer-events:all}.todo__list .todo-item .check-box{width:1.5rem;height:1.5rem;border-radius:50%;margin-left:1rem;border:1px solid var(--border-color);cursor:pointer;transition:all .54s cubic-bezier(.61,-.17,.03,1.16);position:relative}.todo__list .todo-item .check-box>.check-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%)}.todo__list .todo-item .check-box .check-icon{opacity:0}.todo__list .todo-item .check-box:hover{border-color:#3a7bfd}.todo__list .todo-item .content{padding:0 1.25rem;flex-grow:1}.todo__list .todo-item .remove-icon{border-radius:50%;color:#fff;padding:.3296703297rem .4285714286rem;margin-right:1rem;background:rgba(235,43,43,.795);border:2px solid transparent;cursor:pointer;transition:transform .54s cubic-bezier(.61,-.17,.03,1.16),opacity .54s cubic-bezier(.61,-.17,.03,1.16),color .25s,background .25s,border-color .25s;transform:translate(100px) skewY(25deg);opacity:0;pointer-events:none}.todo__list .todo-item .remove-icon:hover{color:#eb2b2bcb;border-color:#eb2b2bcb;background:white}.todo__list .todo-item.completed .check-box{background:linear-gradient(to right,#57ddff,#c058f3);border:none}.todo__list .todo-item.completed .check-box .check-icon{opacity:1}.todo__list .todo-item.completed .content{text-decoration:line-through;color:var(--strike-color)}.todo__options{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:initial;width:100%;height:3.4rem;background:var(--todo-color);color:var(--accent-color);padding:0 2rem;border-top:1px solid var(--border-color);border-radius:0 0 .35rem .35rem;position:relative;transition:transform .54s cubic-bezier(.61,-.17,.03,1.16),background .54s cubic-bezier(.61,-.17,.03,1.16),border .54s cubic-bezier(.61,-.17,.03,1.16);transform:translateY(100px) skew(25deg);opacity:0;pointer-events:none}@media (max-width: 550px){.todo__options{padding:0 1rem}}.todo__options .items-left{transition:none}.todo__options .clear-box{cursor:pointer}.todo__options .clear-box:hover{color:var(--text-color)}.todo__options .filter-items{--width: 200px;width:var(--width);height:2.8333333333rem;background:var(--todo-color);position:absolute;border-radius:.35rem;bottom:5%;left:calc(50% - var(--width) / 2);transition:transform .54s cubic-bezier(.61,-.17,.03,1.16),background .54s cubic-bezier(.61,-.17,.03,1.16);display:flex;flex-direction:row;justify-content:center;align-items:center;gap:initial}@media (max-width: 660px){.todo__options .filter-items{--width: 100%;bottom:-4.5rem;box-shadow:0 10px 35px -8px #0000008c}}.todo__options .filter-items .filtered{color:#3a7bfd}.todo__options .filter-items>*{margin:0 1rem;cursor:pointer}.todo__options .filter-items>*:not(.filtered):hover{color:var(--text-color)}body{position:relative;background:var(--bg-color);display:flex;flex-direction:row;justify-content:center;align-items:initial;gap:initial}.wrapper{width:50rem;padding:5rem 2rem;transition:none}html{transition:none}