@charset "UTF-8";@font-face{font-display:swap;font-family:Josefin Sans;font-style:normal;font-weight:400;src:url(/assets/fonts/josefin-sans-v34-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Josefin Sans;font-style:normal;font-weight:700;src:url(/assets/fonts/josefin-sans-v34-latin-700.woff2) format("woff2")}:root{--theme-bg-image: url(/assets/images/bg-mobile-light.jpg);--c-active-state: #0C4AC4;--c-checkmark-bg: linear-gradient(135deg, #57DDFF, #C058F3);--c-gray-50: #FAFAFA;--c-purple-300: #CACDE8;--c-gray-300: #D2D3DB;--c-gray-600: #5A5B6A;--c-navy-850: #484B6A;--c-navy-950: #161722;--c-navy-900: #25273C;--c-purple-100: #E4E5F1;--c-h1: var(--c-navy-950);--c-body-background: var(--c-gray-50);--c-list-background: var(--c-gray-50);--c-text-background: var(--c-navy-850);--c-border: var(--c-gray-300);--c-checkbox-hover-bg: #FFF;--c-hover: var(--c-navy-950);--shadow: 0 0 var(--space-sm) rgb(0, 0, 0, .1);--fs-h1-small: 1.625rem ;--fs-h1-large: 2.5rem ;--fs-body-text: 1.125rem ;--fs-small-text: 1rem ;--fs-extra-small-text: .875rem ;--space-lg: 2.5rem ;--space-md: 1.25rem ;--space-sm: .625rem ;--space-xs: .3125rem ;--space-xxs: .0625rem ;--container-max-size: 34.375rem ;--image-desktop-height: 18.75rem ;--image-mobile-height: 12.5rem }html[data-theme=dark]{--theme-bg-image: url(/assets/images/bg-mobile-dark.jpg);--c-h1: var(--c-gray-50);--c-body-background: var(--c-navy-950);--c-list-background: var(--c-navy-900);--c-text-background: var(--c-purple-300);--c-border: var(--c-gray-600);--c-checkbox-hover-bg: var(--c-list-background);--c-hover: var(--c-purple-100);--c-active-state: #9EB4E1}@media(min-width:62.5rem){:root{--theme-bg-image: url(/assets/images/bg-desktop-light.jpg)}html[data-theme=dark]{--theme-bg-image: url(/assets/images/bg-desktop-dark.jpg)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}ul{list-style:none}input,button{font:inherit;border:none;background-color:transparent;outline:none}input,button,li{color:var(--c-text-background)}input[type=checkbox],button,label{cursor:pointer}button:hover:not(.add-todo-button){outline:var(--space-xxs) solid var(--c-hover)}button:focus-visible:not(.add-todo-button){outline:var(--space-xs) solid var(--c-hover)}img{max-inline-size:100%;display:block}h1,h2,h3,p,label,span{text-wrap:balance}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}#root,html,body{height:100%}html{font-size:100%}body{font-family:Josefin Sans,Arial,Helvetica,sans-serif;font-weight:400;font-size:var(--fs-body-text);color:var(--c-text-background);position:relative;width:100%;background-color:var(--c-body-background)}.bg-image{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:var(--image-mobile-height);background-image:var(--theme-bg-image);background-position:top center;background-repeat:no-repeat;background-size:cover;z-index:0}@media(min-width:62.5rem){.bg-image{height:var(--image-desktop-height)}}.app-wrapper{width:min(var(--container-max-size),90vw);margin:0 auto;min-height:100%}input[type=checkbox]{appearance:none;-webkit-appearance:none}input[type=checkbox],.add-todo-button{width:var(--space-md);height:var(--space-md);border-radius:50%;border:var(--space-xxs) solid var(--c-border);background-clip:padding-box,border-box}input[type=checkbox]:hover,.add-todo-button:hover{border:var(--space-xxs) solid transparent;background:linear-gradient(var(--c-checkbox-hover-bg) 0 0) padding-box,var(--c-checkmark-bg) border-box}input[type=checkbox]:focus-visible,.add-todo-button:focus-visible{border:var(--space-xs) solid transparent;background:linear-gradient(var(--c-checkbox-hover-bg) 0 0) padding-box,var(--c-checkmark-bg) border-box}input[type=checkbox]:checked,.add-todo-button:active{background:url(/assets/images/icon-check.svg),var(--c-checkmark-bg);background-repeat:no-repeat;background-position:center;border:none}header{display:flex;justify-content:space-between;color:var(--c-h1);position:relative;inset-block-start:3rem}header h1{letter-spacing:var(--space-sm);text-transform:uppercase;font-size:var(--fs-h1-small)}header .theme-toggler svg{color:var(--c-h1)}@media(min-width:62.5rem){header{inset-block-start:4.6rem}header h1{font-size:var(--fs-h1-large);letter-spacing:calc(var(--space-sm) + var(--space-xs))}}.todo-list-form{position:relative;inset-block-start:5rem;background-color:var(--c-list-background);display:flex;align-items:center;gap:var(--space-sm);border-radius:var(--space-sm);padding:calc(var(--space-sm) + .3125rem)}.todo-list-form:focus-within{outline:calc(var(--space-xxs) * 2) solid var(--c-text-background);outline-offset:var(--space-xxs)}.todo-list-form input{order:2;outline:none;flex:1}.todo-list-form .add-todo-button{margin-inline-end:-.3125rem;order:1}@media(min-width:62.5rem){.todo-list-form{inset-block-start:8.125rem}}.todo-list{border-top-left-radius:var(--space-sm);border-top-right-radius:var(--space-sm);background-color:var(--c-list-background);position:relative;inset-block-start:6.025rem;box-shadow:var(--shadow)}.todo-list li{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--space-sm) + .3125rem);border-block-end:.1rem solid var(--c-border)}.todo-list li .todo-list-input-group{display:flex;align-items:center;gap:var(--space-sm)}.todo-list li .todo-list-input-group .completed{text-decoration:line-through;text-decoration-color:var(--c-text-background)}.todo-list li .delete-todo-button{width:calc(var(--space-sm) + .3125rem);height:calc(var(--space-sm) + .3125rem)}@media(min-width:62.5rem){.todo-list{inset-block-start:9.6875rem}}.todo-footer{position:relative;inset-block-start:6.01875rem;background-color:var(--c-list-background);display:flex;flex-direction:column-reverse}.todo-footer .todo-footer-main,.todo-footer .todo-footer-filters ul{padding:calc(var(--space-sm) + .3125rem)}.todo-footer .todo-footer-main{display:flex;justify-content:space-between;border-bottom-left-radius:var(--space-xs);border-bottom-right-radius:var(--space-xs);box-shadow:var(--shadow)}.todo-footer .todo-footer-main span,.todo-footer .todo-footer-main button{font-size:var(--fs-extra-small-text)}.todo-footer button:hover{color:var(--c-hover)}.todo-footer .todo-footer-filters{background-color:var(--c-body-background)}.todo-footer .todo-footer-filters ul{display:flex;justify-content:center;gap:var(--space-sm);margin-block:var(--space-md);background-color:var(--c-list-background);border-radius:var(--space-xs);font-weight:700;box-shadow:var(--shadow)}.todo-footer .todo-footer-filters ul .active{color:var(--c-active-state)}.todo-footer .warning-duplicate{text-align:center;margin-block:1rem}@media(min-width:31.25rem){.todo-footer .todo-footer-main button,.todo-footer .todo-footer-main span{position:relative}.todo-footer .todo-footer-filters ul{position:relative;margin-block:0;border-radius:unset;box-shadow:none;inset-block-start:-2.8rem;background-color:unset}}@media(min-width:62.5rem){.todo-footer{inset-block-start:9.6875rem}}