*,*:before,*:after{box-sizing:border-box}*:not(dialog){margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}input,button,textarea,select{font:inherit}ul[role=list],ul,ol[role=list],ol{list-style:none;padding:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,button,input,label{line-height:1.1}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}#root,#__next{isolation:isolate}:root{--breakpoint-sm: 375px;--breakpoint-md: 768px;--breakpoint-lg: 1440px;--ff-body: Josefin Sans, sans-serif;--ff-heading: Josefin Sans, sans-serif;--line-height: 1.5;--clr-blue-200: #9abbfe;--clr-blue-500: #3a7bfd;--clr-blue-900: #0245ca;--clr-navy-950: hsl(235, 21%, 11%);--clr-navy-900: hsl(235, 24%, 19%);--clr-navy-850: hsl(235, 19%, 35%);--clr-purple-100: hsl(236, 33%, 92%);--clr-purple-300: hsl(234, 39%, 85%);--clr-purple-600: hsl(235, 16%, 43%);--clr-purple-700: hsl(233, 14%, 35%);--clr-purple-800: hsl(237, 14%, 26%);--clr-gray-50: hsl(0, 0%, 98%);--clr-gray-300: hsl(233, 11%, 84%);--clr-gray-600: hsl(236, 9%, 61%);--clr-red-100: rgb(255, 117, 117);--clr-red-900: rgb(158, 33, 33);--clr-check-bg: linear-gradient(165deg, hsl(192, 100%, 67%) 0%, hsl(280, 87%, 65%) 100%);--border-radius-sm: 6px;--box-shadow-lg: 0px 8px 29px -7px rgba(0, 0, 0, .34)}@font-face{font-family:JosefinSansItalic;src:url(/assets/fonts/JosefinSans-Italic-VariableFont_wght.ttf) format("truetype");font-weight:100 700;font-style:italic}@font-face{font-family:JosefinSans;src:url(/assets/fonts/JosefinSans-VariableFont_wght.ttf) format("truetype");font-weight:100 700;font-style:normal}@supports (font-size: clamp(1rem,1vi,1rem)){:root{--type-xs: clamp(.64rem, .13vi + .61rem, .71rem);--type-sm: clamp(.8rem, .17vi + .76rem, .89rem);--type-base: clamp(1rem, .34vi + .91rem, 1.19rem);--type-md: clamp(1.25rem, .61vi + 1.1rem, 1.58rem);--type-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);--type-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem)}}@supports not (font-size: clamp(1rem,1vi,1rem)){:root{--type-xs: .64rem;--type-sm: .8rem;--type-base: 1rem;--type-md: 1.25rem;--type-lg: 1.56rem;--type-xl: 1.95rem}@media screen and (min-width:1440px){:root{--type-xs: .71rem;--type-sm: .89rem;--type-base: 1.19rem;--type-md: 1.58rem;--type-lg: 2.11rem;--type-xl: 2.81rem}}}h1{font-size:var(--type-xl);line-height:var(--line-height);font-family:var(--ff-heading)}h2{font-size:var(--type-lg);line-height:var(--line-height);font-family:var(--ff-heading)}h3{font-size:var(--type-md);line-height:var(--line-height);font-family:var(--ff-heading)}h4{font-size:var(--type-base);line-height:var(--line-height);font-family:var(--ff-heading)}h5{font-size:var(--type-sm);line-height:var(--line-height);font-family:var(--ff-heading)}:root{--bg-app: var(--clr-navy-950);--clr-font-heading: var(--clr-gray-50);--clr-font-body: var(--clr-gray-300);--clr-font-body-theme: var(--clr-gray-50);--clr-list-item: var(--clr-navy-900);--clr-border: var(--clr-navy-850);--clr-text-muted: var(--clr-gray-600);--clr-text-muted-darker: color-mix(in srgb, var(--clr-purple-600), black 20%);--clr-btn-pagination: color-mix(in srgb, var(--clr-navy-950), white 60%);--clr-btn: var(--clr-navy-950);--clr-btn-text: var(--clr-gray-50);--clr-btn-text-dark: var(--clr-navy-950);--clr-btn-auth: var(--clr-navy-950);--clr-btn-auth-hover: var(--clr-navy-950);--clr-btn-auth-text: var(--clr-gray-50);--clr-form: var(--clr-navy-900);--clr-form-field: var(--clr-navy-900);--clr-error: var(--clr-red-100);--clr-link: var(--clr-blue-200);--clr-link-category: var(--clr-gray-50);--bg-main: url(/assets/images/bg-desktop-dark.jpg)}@media(max-width:768px){:root{--bg-main: url(/assets/images/bg-mobile-dark.jpg)}}[data-theme=light]{--bg-app: var(--clr-purple-100);--clr-font-heading: var(--clr-gray-50);--clr-font-body: var(--clr-navy-950);--clr-font-body-theme: var(--clr-gray-950);--clr-list-item: var(--clr-gray-50);--clr-border: var(--clr-gray-300);--clr-text-muted: var(--clr-gray-600);--clr-text-muted-darker: color-mix(in srgb, var(--clr-purple-600), white 40%);--clr-btn-pagination: color-mix(in srgb, var(--clr-navy-950), black 30%);--clr-btn: var(--clr-gray-50);--clr-btn-text-dark: var(--clr-gray-50);--clr-btn-text: var(--clr-navy-950);--clr-form: var(--clr-gray-50);--clr-form-field: var(--clr-gray-50);--clr-error: var(--clr-red-900);--clr-link: var(--clr-blue-900);--clr-link-category: var(--clr-navy-950);--bg-main: url(/assets/images/bg-desktop-light.jpg)}@media(max-width:768px){[data-theme=light]{--bg-main: url(/assets/images/bg-mobile-light.jpg)}}.todo__form-wrapper{margin:24px 0;border-radius:var(--border-radius-sm)}.todo__form-wrapper,.todo__list-wrapper{background-color:var(--clr-list-item);box-shadow:0 8px 29px -7px #00000057;-webkit-box-shadow:0px 8px 29px -7px rgba(0,0,0,.34);-moz-box-shadow:0px 8px 29px -7px rgba(0,0,0,.34)}.todo__form,.todo__list-item{padding:20px 24px;display:flex;gap:1.5rem;align-items:center;background-color:var(--clr-list-item);border-radius:var(--border-radius-sm)}.todo__text-input{cursor:pointer;background-color:transparent;border:transparent;width:100%;height:40px;color:var(--clr-font-body)}.todo__text-input:focus{outline:none;border:none}.todo__list-wrapper{display:flex;flex-direction:column;border-top-left-radius:var(--border-radius-sm);border-top-right-radius:var(--border-radius-sm)}.todo__list-wrapper>:not(:last-child){border-bottom:1px solid var(--clr-border);border-radius:var(--border-radius-sm)}.todo__list-item{display:flex;align-items:flex-start;width:100%}.todo__list-item--drag-handle{width:1.2em;height:1.2em;cursor:pointer;margin-right:1rem}.todo__list-item--content-wrapper{display:flex;flex:1;align-items:flex-start;gap:12px}.todo__list-item--edit-box{border-bottom:1px solid var(--clr-blue-500);color:var(--clr-font-body);padding-bottom:2px}.todo__list-item--edit-box,.todo__list-item--text-display{flex:1;width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;line-height:1.4;border:none;background:transparent;outline:none;resize:none;word-break:break-all}.todo__list-item--text-display.completed{text-decoration:line-through;color:var(--clr-purple-600);opacity:.6}.todo__list-item--delete-btn{flex-shrink:0;background:transparent;border:none;cursor:pointer;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.todo__list-item--delete-btn img{display:block;width:1rem;height:1rem}@media(max-width:768px){.todo__list-item--delete-btn{opacity:1;pointer-events:all}}.todo__list-item:hover .todo__list-item--delete-btn{opacity:1;pointer-events:all}.todo__footer{color:var(--clr-text-muted-darker);font-size:var(--type-sm);font-weight:600;text-align:center;margin-top:3rem;text-decoration:line-through}.todo__filtering{padding:18px 24px;text-align:center}.todo__grid-container{display:grid;grid-template-columns:1fr 1fr;row-gap:1rem;grid-template-areas:"one three" "two two"}.todo__grid-container .grid-item-1{grid-area:one}.todo__grid-container .grid-item-2{grid-area:two}.todo__grid-container .grid-item-3{grid-area:three}@media(min-width:768px){.todo__grid-container{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"one two three";background-color:var(--clr-list-item);border-radius:var(--border-radius-sm)}}.todo__grid-container .box{padding:18px 24px;background-color:var(--clr-list-item)}.todo__grid-container .todo__info-label,.todo__grid-container .todo__info-btn{font-size:var(--type-sm);color:var(--clr-text-muted);font-weight:600;transition:color .2s ease;cursor:pointer}.todo__grid-container .todo__info-btn{appearance:none;background-color:inherit;border:none}.todo__grid-container .todo__info-btn.active-tab{color:var(--clr-blue-500)}.todo__grid-container .todo__info-btn:hover{color:var(--clr-link-category)}.todo__grid-container .grid-item-1{border-bottom-left-radius:var(--border-radius-sm)}.todo__grid-container .grid-item-2{align-content:center;border-radius:var(--border-radius-sm)}.todo__grid-container .todo__info-categories{display:flex;justify-content:space-between;align-items:center;background-color:var(--clr-list-item);border-radius:var(--border-radius-sm)}.todo__grid-container .grid-item-3{text-align:right;border-bottom-right-radius:var(--border-radius-sm)}input[type=checkbox]{flex-shrink:0;-webkit-appearance:none;appearance:none;background:transparent;margin:0;font:inherit;color:currentColor;width:1.5em;height:1.5em;border:.12em solid var(--clr-border);border-radius:50%;display:grid;place-content:center;cursor:pointer;transform:translateY(-.075em);transition:background .2s ease,border-color .2s ease}input[type=checkbox]:before{content:"";width:.65em;height:.65em;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--clr-gray-50);transform-origin:bottom left;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}input[type=checkbox]:checked{background:#57ddff;background:var(--clr-check-bg);border-color:transparent}input[type=checkbox]:hover{border-color:var(--clr-check-bg)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:focus{outline:max(2px,.15em) solid currentColor;outline-offset:max(2px,.15em)}input[type=checkbox]:disabled{cursor:default;opacity:1;border-color:var(--clr-border)}.form__wrapper{margin:50px auto 0;background-color:var(--clr-form);max-width:var(--breakpoint-sm);padding:24px;display:flex;flex-direction:column;box-shadow:var(--box-shadow-lg);border-radius:var(--border-radius-sm)}.form__title{text-align:center;color:var(--clr-font-body-theme);padding-bottom:16px}.form__form{display:flex;flex-direction:column;gap:40px}.form__fieldset{border:none;margin:0;padding:0}.form__input{padding:16px;background-color:var(--clr-form-field);border:1px solid var(--clr-border);border-radius:var(--border-radius-sm);color:var(--clr-font-body)}.form__input:focus{outline:1px solid var(--clr-blue-500)}.form__input.form-input-error{border-color:var(--clr-error)}.form__input,.form__btn{width:100%}.form__footer{margin-top:24px}.form__btn{cursor:pointer;color:var(--clr-btn-auth-text);background-color:var(--clr-btn-auth);border:transparent;padding:16px;border-radius:4px;transition:background-color .2s ease}.form__btn:hover{background-color:color-mix(in srgb,var(--clr-btn-auth-hover),#000 30%)}.form__footer--link{color:var(--clr-link)}.todo__pagination{display:flex;justify-content:center;margin-top:16px;gap:16px}.todo__pagination--btn{border:none;background:var(--clr-btn-pagination);color:var(--clr-btn-text-dark);padding:4px 8px;cursor:pointer;font-weight:600;border-radius:var(--border-radius-sm)}.todo__pagination--btn:disabled{cursor:not-allowed;opacity:.5}.todo__pagination--info,.todo__pagination--btn{font-size:var(--type-sm)}body{background-color:var(--bg-app)}h1,h2,h3{font-family:var(--ff-heading),sans-serif;color:var(--clr-font-heading)}main{font-family:var(--ff-body),sans-serif;font-weight:300;font-size:var(--type-base);color:var(--clr-font-body)}.main-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100svh;background-image:var(--bg-main);background-repeat:no-repeat;background-size:contain}.container{max-width:var(--breakpoint-md);width:100%;padding:0 24px;margin-top:20px}@media(min-width:768px){.container{padding:16px}}.global-form-error,.inputHasError{color:var(--clr-error);font-size:var(--type-sm)}.todo__form-wrapper .inputHasError{padding:8px 24px}.auth-form .global-form-error{background-color:var(--clr-list-item);margin-bottom:16px}.todo__list-section .global-form-error{margin-top:16px;background-color:var(--clr-list-item);padding:8px 24px;border-radius:var(--border-radius-sm)}.header__content{display:grid;grid-template-columns:1fr 1fr;row-gap:1rem;grid-template-areas:"one three" "two two"}.header__content .grid-item-1{grid-area:one}.header__content .grid-item-2{grid-area:two}.header__content .grid-item-3{grid-area:three;text-align:right}@media(min-width:768px){.header__content{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"one two three";align-items:center}}.header__action-section--btn-group{display:flex;gap:8px}@media(min-width:768px){.header__action-section--btn-group{justify-content:space-around}}.header__action-section--btn-group .btn{width:100%;cursor:pointer;font-weight:600;border:transparent;padding:12px 8px;border-radius:var(--border-radius-sm);font-size:var(--type-sm)}@media(min-width:768px){.header__action-section--btn-group .btn{padding:8px;width:auto}}.header__action-section--btn-group .btn__delete-account{color:var(--clr-btn);background-color:var(--clr-error)}.header__action-section--btn-group .btn__logout{background-color:var(--clr-btn);color:var(--clr-btn-text)}.toggle-theme{border:none;background:none;padding:0;cursor:pointer;width:44px;height:44px;border-radius:50%;position:relative;overflow:hidden;transition:.2s ease}.toggle-theme__toggle-icon{position:absolute;top:50%;left:50%;width:24px;height:24px;transition:transform .5s cubic-bezier(.2,1,.3,1),opacity .3s ease;transform:translate(-100%,20%) rotate(-120deg) scale(.5) translateZ(0)}[data-theme=light] .toggle-theme__icon-moon{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}[data-theme=light] .toggle-theme__icon-sun{opacity:0;transform:translate(50%,20%) rotate(120deg) scale(.5)}[data-theme=dark] .toggle-theme__icon-sun{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}[data-theme=dark] .toggle-theme__icon-moon{opacity:0;transform:translate(-100%,20%) rotate(-120deg) scale(.5)}@media(prefers-reduced-motion:reduce){.toggle-theme__toggle-icon{transition:none}}