.toggle{--toggle-size:30px;height:var(--toggle-size);width:var(--toggle-size);background-size:80%;cursor:pointer;border:1px dashed transparent;background-color:transparent;-webkit-transition:background-color .3s,-webkit-box-shadow .3s;transition:background-color .3s,-webkit-box-shadow .3s;transition:box-shadow .3s,background-color .3s;transition:box-shadow .3s,background-color .3s,-webkit-box-shadow .3s;background-position:50%;background-repeat:no-repeat;border-radius:50%}.toggle:focus-visible{outline:transparent;border-color:var(--toggle-border-clr)}#app[data-theme=dark] .toggle{background-image:url(../img/icon-sun.b3182f3b.svg)}#app[data-theme=light] .toggle{background-image:url(../img/icon-moon.e66b8c62.svg)}#app[data-theme=dark] .toggle:focus{--toggle-border-clr:#dbdbdb}#app[data-theme=light] .toggle:focus{--toggle-border-clr:#fff}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:max(100px,14.794520547945206vh);height:calc(var(--bg-img-width)/2);width:clamp(200px,var(--main-width),540px);letter-spacing:1rem;isolation:isolate}.title{color:var(--title-clr);font-weight:700;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:root{--todo-height:64px}.todo-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:var(--todo-height);width:100%;background-color:var(--bg-todo-clr);border-radius:var(--border-radius);overflow:hidden}.add-todo{margin-bottom:30px}.add-todo__circle-elm{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:var(--todo-height)}.tic-circle{background-color:transparent;width:37.5%;height:37.5%;margin-left:37.5%;border-radius:50%;border:1px solid var(--circle-border-clr);cursor:pointer}.tic-circle:focus{outline:transparent;-webkit-filter:brightness(160%);filter:brightness(160%)}.add-todo__input{--input-width:calc(100% - var(--todo-height));height:100%;width:var(--input-width);font-size:1rem;border:none;outline:none;color:var(--todo-text-clr);background-color:inherit;text-indent:.5rem;text-overflow:ellipsis}:root{--dlt-btn--width:64px;--label-width:calc(100% - var(--dlt-btn--width))}.todo{--duration:500ms;border-radius:0;border-bottom:1px solid var(--todo-border-clr);position:relative}.todo__checkbox{opacity:0;height:0;width:0}.todo__label{cursor:pointer;width:100%}.todo__label,.todo__label__tic-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.todo__label__tic-container{position:relative;height:var(--todo-height);width:var(--todo-height);isolation:isolate}.todo__label__tic-container__tic{position:absolute;width:37.5%;height:37.5%;margin-left:37.5%;border-radius:50%;-webkit-transition:opacity var(--duration);transition:opacity var(--duration)}.todo__label__tic-container__tic--layer-1{background-image:-webkit-gradient(linear,left top,left bottom,from(#57ddff),to(#c058f3)),url(../img/icon-check.5742160c.svg);background-image:linear-gradient(#57ddff,#c058f3),url(../img/icon-check.5742160c.svg);background-repeat:no-repeat;background-blend-mode:color;background-position:50%;opacity:0}.todo__label__tic-container__tic--layer-2{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--circle-border-clr)),to(var(--circle-border-clr)));background-image:linear-gradient(var(--circle-border-clr),var(--circle-border-clr));opacity:1}.todo__label__tic-container__tic--layer-3{width:calc(37.5% - 3px);height:calc(37.5% - 3px);margin-left:calc(37.5% + 1.4px);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--bg-todo-clr)),to(var(--bg-todo-clr)));background-image:linear-gradient(var(--bg-todo-clr),var(--bg-todo-clr));-webkit-transform:scale(.99);transform:scale(.99);opacity:1}.todo__label:hover .todo__label__tic-container__tic--layer-1{opacity:1}.todo__label:hover .todo__label__tic-container__tic--layer-2{opacity:0}.todo__checkbox:focus~.todo__delete-btn,.todo__label:hover+.todo__delete-btn{opacity:1}.todo__checkbox:focus+.todo__label .todo__label__tic-container__tic{-webkit-transition:opacity 0ms;transition:opacity 0ms}.todo__checkbox:focus+.todo__label .todo__label__tic-container__tic--layer-1{opacity:1}.todo__checkbox:focus+.todo__label .todo__label__tic-container__tic--layer-2{opacity:0}.todo__checkbox:focus+.todo__label .todo__label__tic-container__tic--layer-3{opacity:1;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--bg-todo-clr)),to(var(--bg-todo-clr))),url(../img/icon-check.5742160c.svg);background-image:linear-gradient(var(--bg-todo-clr),var(--bg-todo-clr)),url(../img/icon-check.5742160c.svg);background-repeat:no-repeat;background-blend-mode:color;background-position:50%}.todo__checkbox:checked+.todo__label .todo__label__tic-container__tic--layer-1{opacity:1;-webkit-animation:tic-animation .3s forwards;animation:tic-animation .3s forwards}.todo__checkbox:checked+.todo__label .todo__label__tic-container__tic--layer-2,.todo__checkbox:checked+.todo__label .todo__label__tic-container__tic--layer-3{opacity:0}.todo__checkbox:checked+.todo__label .todo__label__text{text-decoration:line-through;color:var(--todo-completed-text-clr)}.todo__label__text{display:block;width:calc(var(--label-width) - var(--todo-height));color:var(--todo-text-clr);text-decoration:none;-webkit-transition:color var(--duration),-webkit-text-decoration var(--duration);transition:color var(--duration),-webkit-text-decoration var(--duration);transition:text-decoration var(--duration),color var(--duration);transition:text-decoration var(--duration),color var(--duration),-webkit-text-decoration var(--duration);white-space:nowrap;overflow-x:auto;overflow-y:hidden;text-indent:10px;scrollbar-width:none}.todo__label__text::-webkit-scrollbar{display:none}.todo__delete-btn{position:absolute;top:0;right:0;width:var(--dlt-btn--width);height:100%;background:transparent;border:none;cursor:pointer;background:url(../img/icon-cross.fe68d57f.svg) no-repeat 50%;opacity:0;-webkit-transition:opacity var(--duration);transition:opacity var(--duration)}.todo__delete-btn:is(:hover,:focus){opacity:1}.todo__delete-btn:focus{outline:transparent;border:1.5px solid var(--todo-border-clr);-webkit-transition:opacity 0ms;transition:opacity 0ms}@-webkit-keyframes tic-animation{0%{-webkit-transform:scale(.8);transform:scale(.8)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes tic-animation{0%{-webkit-transform:scale(.8);transform:scale(.8)}90%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.todo-footer__tab__btn{height:var(--todo-footer-height);background-color:transparent;border:none;-webkit-transition:color .25s;transition:color .25s;font-size:inherit;color:var(--todo-footer-clr);white-space:nowrap;font-weight:700;padding:0 10px}.todo-footer__clear-completed-btn:hover,.todo-footer__tab__btn:not(.todo-footer__tab__btn--active):hover{color:var(--todo-footer-hover-clr)}.todo-footer__tab__btn--active{color:var(--todo-footer-btn-active)}.todo-footer__tab__btn:focus{outline:solid 1.5px var(--todo-border-clr);height:calc(var(--todo-footer-height) - 3px);padding:0 10px}@media screen and (max-width:33.125em){.todo-footer__tab--desktop{display:none}}.todo-footer{--padding:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--bg-todo-clr);padding:0 var(--padding);height:var(--todo-footer-height);width:calc(100% - var(--padding)*2);font-size:var(--todo-footer-font-size);position:relative}.todo-footer__items-left{display:inline-block}.todo-footer__clear-completed-btn,.todo-footer__items-left{font-size:inherit;color:var(--todo-footer-clr);white-space:nowrap}.todo-footer__clear-completed-btn{height:var(--todo-footer-height);background-color:transparent;border:none;-webkit-transition:color .25s;transition:color .25s;-webkit-transition:padding .3s;transition:padding .3s}.todo-footer__clear-completed-btn:focus{outline:solid 1.5px var(--todo-border-clr);height:calc(var(--todo-footer-height) - 3px);padding:0 10px}.todo-container{--todo-container-height:auto;height:var(--todo-container-height);border-radius:var(--border-radius);overflow:hidden;-webkit-box-shadow:var(--todoList-shadow);box-shadow:var(--todoList-shadow);background-color:var(--bg-todo-clr)}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,transform .5s;transition:opacity .5s,transform .5s,-webkit-transform .5s}.fade-enter,.fade-leave-to{opacity:0;-webkit-transform:translate(-50%) scale(.6);transform:translate(-50%) scale(.6)}.ghost{background-color:var(--ghost-clr)}.empty-todo-warning{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:var(--bg-todo-clr);color:#8d8d8d;width:100%;padding:15px 10px;text-align:center;border-bottom:1px solid #424242;font-size:.9rem}.todo-footer__tab--mobile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:clamp(200px,var(--main-width),540px);height:48px;margin-top:16px;background-color:var(--bg-todo-clr);font-size:var(--todo-footer-font-size);border-radius:var(--border-radius);color:var(--todo-footer-clr);display:none}@media screen and (max-width:33.125em){.todo-footer__tab--mobile{display:-webkit-box;display:-ms-flexbox;display:flex}}:root{--main-margin:6.4vw;--main-width:calc(100vw - var(--main-margin)*2)}main{width:clamp(200px,var(--main-width),540px);margin:0 var(--main-margin)}footer,main{isolation:isolate}footer>span{display:block;color:var(--footer-text-clr);font-size:.8rem;margin-top:64px}:root{--sidebar-width:290px;--menu-width:44px;--menu-margin:10px}.sidebar-menu-wrapper{width:calc(var(--sidebar-width) + var(--menu-width) + var(--menu-margin)*2);height:100%;isolation:isolate;z-index:99}.menu,.sidebar-menu-wrapper{position:absolute;top:0;left:0}.menu{margin:var(--menu-margin);padding:10px;width:var(--menu-width);background-color:transparent;border:none;fill:var(--menu-color);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.menu:focus-visible{outline:solid var(--menu-color)}.menu--move{-webkit-transform:translate(var(--sidebar-width));transform:translate(var(--sidebar-width))}.sidebar{position:fixed;width:var(--sidebar-width);height:100%;background-color:var(--bg-todo-clr);opacity:.95;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 0 20px rgba(0,0,0,.301);box-shadow:0 0 20px rgba(0,0,0,.301);-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translate(-100%);transform:translate(-100%);visibility:hidden}.sidebar--expand{-webkit-transform:translate(0);transform:translate(0);visibility:visible}.sidebar__header{width:100%;height:80px;border-bottom:1px solid var(--todo-border-clr)}.sidebar__option{display:block;width:100%;height:50px;border:none;border-bottom:1px solid var(--todo-border-clr);background:transparent;padding:20px 30px;-webkit-transition:background-color .1s;transition:background-color .1s}.sidebar__option:hover{background-color:var(--todo-border-clr)}.sidebar__option:focus{outline-width:1px}:root{--border-radius:4.5px;--todo-footer-font-size:13px;--todo-footer-height:44px}#app[data-theme=dark]{--bg-clr:#161722;--bg-todo-clr:#25273c;--title-clr:#fafafa;--circle-border-clr:#4d5066;--todo-text-clr:#cacde8;--todo-border-clr:#3b3d4e;--todo-completed-text-clr:#4d5066;--todo-footer-clr:#64667d;--todo-footer-hover-clr:var(--todo-text-clr);--todo-footer-btn-active:#3a7bfd;--footer-text-clr:#4f5169;--ghost-clr:#30334f;--todoList-shadow:0px 20px 25px rgba(0,0,0,0.2),0px 30px 50px rgba(0,0,0,0.3);--menu-color:#000}#app[data-theme=light]{--bg-clr:#fafafa;--bg-todo-clr:#e4e5f1;--title-clr:#fafafa;--circle-border-clr:#d2d3db;--todo-text-clr:#484b6a;--todo-border-clr:#9394a5;--ghost-clr:#f8f8fc;--todoList-shadow:4px 8px 11px 0px hsla(0,0%,83.1%,0.388),18px 20px 50px 5px rgba(0,0,0,0.102);--menu-color:#fff}*,:after,:before{margin:0;padding:0;font-family:Josefin Sans,sans-serif;color:var(--todo-text-clr);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html{font-size:18px}body{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--bg-clr)}button{cursor:pointer}#app{--bg-img-width:clamp(202px,53.29vw,300px);display:grid;place-items:center;-ms-flex-line-pack:start;align-content:start;min-height:100vh;padding-bottom:1em;-webkit-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;background-size:100% var(--bg-img-width);background-color:var(--bg-clr)}#app[data-theme=dark]{background-image:url(../img/bg-desktop-dark.02105f02.jpg)}#app[data-theme=light]{background-image:url(../img/bg-desktop-light.988cb74c.jpg)}@media screen and (max-width:25rem){#app[data-theme=dark]{background-image:url(../img/bg-mobile-dark.b0112ea5.jpg)}#app[data-theme=light]{background-image:url(../img/bg-mobile-light.266f20c7.jpg)}}