*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:"Josefin Sans",sans-serif;width:100vw;min-height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;place-content:center;background:url("./../images/bg-desktop-light.jpg") no-repeat top/contain,#fafafa}li{list-style-type:none}body{--main-bg:hsl(0,0%,98%);--bright-blue:hsl(220,98%,61%);--check-background:linear-gradient(hsl(192,100%,67%) to hsl(280,87%,65%));--main-font-clr:hsl(235,19%,35%);--secondary-font-clr:hsl(236,9%,61%);--checked-font-clr:hsl(233,11%,80%);--border-clr:hsl(233,11%,84%);--checkbox-border-clr:hsl(236,33%,92%);--hover-clr:hsl(235,19%,35%);--checkbox-empty:white;--font:1.125rem}input[type=checkbox]{opacity:0}label{position:relative;line-height:1.4;top:2px;-webkit-transition:0.5s;transition:0.5s}label:before{content:"";position:absolute;display:inline-block;width:22px;height:22px;left:-46px;top:-1px;border-radius:50%;border:2px solid var(--checkbox-border-clr)}label:hover:before{border:double 1.5px transparent;border-radius:50%;background-image:linear-gradient(var(--checkbox-empty),var(--checkbox-empty)),linear-gradient(120deg,#57ddff,#c058f3);background-origin:border-box;background-clip:content-box,border-box}label:after{content:"";display:inline-block;position:absolute;width:20px;height:20px;left:-40px;top:-1.5px}input[type=checkbox]:checked+{}input[type=checkbox]:checked+label:after{content:url("./../images/icon-check.svg")}input[type=checkbox]:checked+label:before{background:linear-gradient(120deg,#57ddff,#c058f3);border:none}input[type=checkbox]:focus:not(:checked)+label:before{outline:rgba(59,153,252,0.5) auto 5px}.container{max-width:100vw;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.todo{width:34em;min-height:70vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:2em;margin-top:2em}.todo .top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.todo .top h1{color:#fafafa;letter-spacing:0.5em;font-weight:700}.todo .top .theme-switcher{width:2rem;height:2rem;background:url("./../images/icon-moon.svg") no-repeat;cursor:pointer;-webkit-transition:0.5s;transition:0.5s}.todo .input{padding:1.2em 1.5em;background-color:var(--main-bg);border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0px 2px 50px 0px #9394a55e;box-shadow:0px 2px 50px 0px #9394a55e}.todo .input label{width:90%;cursor:pointer;font-weight:400}.todo .input label:before{top:-2px}.todo .input label .input-field{width:100%;outline:none;border:none;font-size:var(--font);font-weight:400;font-family:"Josefin Sans",sans-serif;color:var(--main-font-clr);background-color:var(--main-bg)}.todo .input label .input-field::-webkit-input-placeholder{font-family:"Josefin Sans",sans-serif;font-weight:400}.todo .input label .input-field::-moz-placeholder{font-family:"Josefin Sans",sans-serif;font-weight:400}.todo .input label .input-field:-ms-input-placeholder{font-family:"Josefin Sans",sans-serif;font-weight:400}.todo .input label .input-field::-ms-input-placeholder{font-family:"Josefin Sans",sans-serif;font-weight:400}.todo .input label .input-field::placeholder{font-family:"Josefin Sans",sans-serif;font-weight:400}.todo .list-body{width:100%;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;background-color:var(--main-bg);-webkit-box-shadow:0px 2px 50px 0px #9394a55e;box-shadow:0px 2px 50px 0px #9394a55e;border-radius:4px}.todo .list-body .list-items .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;justify-content:space-between;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;padding:1.2em 1.5em;border-bottom:1px solid var(--border-clr);cursor:pointer;font-size:var(--font)}.todo .list-body .list-items .item .item-label{width:79%;font-weight:400;color:var(--main-font-clr);cursor:pointer}.todo .list-body .list-items .item input[type=checkbox]:checked+.item-label{text-decoration:line-through;color:var(--checked-font-clr)}.todo .list-body .list-items .item .delete-item{opacity:0;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-webkit-transition:0.5s;transition:0.5s}.todo .list-body .list-items .item:hover .delete-item{opacity:1}.todo .list-body .list-items .item.hidden{display:none}.todo .list-body .list-info{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.4em;font-size:0.8rem;color:var(--secondary-font-clr)}.todo .list-body .list-info .clear-completed{font-size:0.8rem;cursor:pointer;-webkit-transition:0.4s;transition:0.4s}.todo .list-body .list-info .clear-completed:hover{color:var(--hover-clr)}.show-options{width:37%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8rem;color:var(--secondary-font-clr)}.show-options li{font-weight:700;cursor:pointer;-webkit-transition:0.4s;transition:0.4s}.show-options li:hover{color:var(--hover-clr)}.show-options li.checked{color:var(--bright-blue)}#out-list{display:none;width:100%;background:var(--main-bg);padding:1em;font-size:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:1.5em;-webkit-box-shadow:0px 2px 50px 0px #9394a55e;box-shadow:0px 2px 50px 0px #9394a55e}.hint{margin-top:2em;margin-bottom:2em;font-size:0.8rem;color:var(--secondary-font-clr);font-weight:400}.attribution{font-size:0.9rem;text-align:center;color:var(--main-font-clr)}.attribution a{color:var(--bright-blue);text-decoration:none;-webkit-transition:0.5s;transition:0.5s}.attribution a:hover{color:rgba(58,123,253,0.836)}@media (max-width:768px){body{background:url("./../images/bg-mobile-light.jpg") no-repeat top/contain,#fafafa}.todo{width:92vw}.todo .list-body .list-items .item .delete-item{opacity:1}#in-list{display:none}#out-list{display:-webkit-box;display:-ms-flexbox;display:flex}}@media (max-width:475px){.todo .list-body .list-items .item{font-size:0.9rem}label:before{width:20px;height:20px;left:-32px;top:-3px}label:after{left:-27px;top:-2px}}@media (max-width:768px){body.dark-theme{background:url("./../images/bg-mobile-dark.jpg") no-repeat top/contain,#161722}}.dark-theme{--main-bg:hsl(235,24%,19%);--main-font-clr:hsl(234,39%,85%);--secondary-font-clr:hsl(234,11%,52%);--hover-clr:hsl(236,33%,92%);--checked-font-clr:hsl(233,14%,35%);--border-clr:hsl(237,14%,26%);--checkbox-border-clr:hsl(237,14%,26%);--checkbox-empty:hsl(235,24%,19%);background:url("./../images/bg-desktop-dark.jpg") no-repeat top/contain,#161722}.dark-theme .todo .top .theme-switcher{background:url("./../images/icon-sun.svg") no-repeat}.dark-theme .todo .input{-webkit-box-shadow:none;box-shadow:none}.dark-theme .todo .list-body{-webkit-box-shadow:1px 12px 61px 0px #161722;box-shadow:1px 12px 61px 0px #161722}.dark-theme #out-list{-webkit-box-shadow:1px 12px 61px 0px #161722;box-shadow:1px 12px 61px 0px #161722}