@import"https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap";*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{height:100%;margin:0 auto;font-size:18px;line-height:1;font-weight:400;font-family:var(--font-body);overflow-wrap:break-word;word-break:break-word;background-color:var(--color-bg-primary);transition:color .5s,background-color .5s}button{font:inherit;letter-spacing:inherit;word-spacing:inherit}:root{--color-light-neutral-light-grey-blue: hsl(233, 11%, 84%);--font-body: "Josefin Sans", serif;--font-weight-400: 400;--font-weight-700: 700;--color-header: hsl(0, 0%, 98%);--color-gradient-bg: hsl(192, 100%, 67%) to hsl(280, 87%, 65%);--color-text-active: hsl(220, 98%, 61%);--color-bg-primary: hsl(236, 33%, 92%);--color-bg-secondary: hsl(0, 0%, 98%);--color-text-primary: hsl(235, 19%, 35%);--color-text-secondary: hsl(236, 9%, 61%);--color-text-secondary-hsla: hsla(236, 9%, 61%, .3);--color-text-hover: hsl(235, 19%, 35%)}.dark-theme{--color-dark-neutral-very-dark-grey-blue: hsl(233, 14%, 35%);--color-dark-neutral-very-dark-grey-blue2: hsl(237, 14%, 26%);--color-bg-primary: hsl(235, 21%, 11%);--color-bg-secondary: hsl(235, 24%, 19%);--color-text-primary: hsl(234, 39%, 85%);--color-text-secondary: hsl(234, 11%, 52%);--color-text-secondary-hsla: hsla(234, 11%, 52%, .3);--color-text-hover: hsl(236, 33%, 92%)}.navbar[data-v-a8a54175]{padding:0;margin:auto auto 3rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}h1[data-v-a8a54175]{font-size:42px;color:var(--color-header);font-family:var(--font-body);font-weight:var(--font-weight-700);text-transform:uppercase;letter-spacing:1rem}.toggle-theme[data-v-a8a54175]{display:flex;justify-content:flex-end;align-items:center}.theme-icon[data-v-a8a54175]{height:28px;aspect-ratio:1;cursor:pointer;transition:transform .3s ease,opacity .3s ease}.theme-icon[data-v-a8a54175]:hover{transform:scale(1.1);opacity:.8}@media (max-width: 592px){.navbar[data-v-a8a54175]{margin-bottom:2.5rem}h1[data-v-a8a54175]{font-size:24px}.theme-icon[data-v-a8a54175]{height:22px}}input[data-v-c91cf100],form[data-v-c91cf100],label[data-v-c91cf100]{font-family:var(--font-body);color:var(--color-text-primary);font-weight:var(--font-weight-400);font-size:18px}button[data-v-c91cf100]{font-family:var(--font-body)}.todo-app[data-v-c91cf100]{width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column}.task-form[data-v-c91cf100]{height:4rem;padding-left:1.5rem;display:flex;align-items:center;gap:.5rem;border-radius:6px;background-color:var(--color-bg-secondary)}.task-input[data-v-c91cf100]{flex-grow:1;border-radius:6px;color:var(--color-primary);background-color:var(--color-bg-secondary);border:none;outline:none}.add-and-counter[data-v-c91cf100]{display:flex;flex-direction:column}.add-task[data-v-c91cf100]{height:2rem;justify-content:center;align-items:center;background:transparent;border:none;color:var(--color-text-secondary);font-size:2rem;cursor:pointer;transition:opacity .3s ease,transform .2s ease}.add-task.visible[data-v-c91cf100]{display:flex;opacity:1;transform:scale(1)}.add-task[data-v-c91cf100]:not(.visible){opacity:0;transform:scale(.9)}.char-counter[data-v-c91cf100]{margin:0 .5rem;font-size:12px;color:var(--color-text-secondary);text-align:right;align-self:flex-end}.task-list[data-v-c91cf100]{margin-top:1.5rem;padding:0;background-color:var(--color-bg-secondary);border-radius:6px}.task-item[data-v-c91cf100]{min-height:4rem;margin:0;padding:.5rem 0;display:flex;align-items:center;justify-content:space-between;border-bottom:.1rem solid var(--color-text-secondary-hsla);background:transparent;cursor:grab}.task-item.completed label[data-v-c91cf100]{color:var(--color-text-secondary);text-decoration:line-through}.checkbox-container[data-v-c91cf100]{display:flex;align-items:center;cursor:pointer;font-size:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox-container input[data-v-c91cf100]{height:0;width:0;opacity:0;cursor:pointer}.checkmark[data-v-c91cf100]{position:relative;height:1.5rem;margin:auto 1.5rem;aspect-ratio:1;background:transparent;border-radius:50%;border:var(--color-text-secondary-hsla) solid 1px}.checkbox-container:hover input~.checkmark[data-v-c91cf100]{background:linear-gradient(#57ddff,#c058f3)}.checkbox-container input:checked~.checkmark[data-v-c91cf100]{background:linear-gradient(#57ddff,#c058f3)}.checkmark[data-v-c91cf100]:after{content:"";position:absolute;display:none}.task-item-text[data-v-c91cf100]{max-width:28rem}.checkbox-container input:checked~.checkmark[data-v-c91cf100]:after{display:block}.checkbox-container .checkmark[data-v-c91cf100]:after{left:9px;top:5px;width:6px;height:10px;border:solid white;border-width:0 3px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.delete-task[data-v-c91cf100]{position:relative;width:100%;max-width:1.5rem;height:1.5rem;margin-inline:1rem;padding:0;background:transparent;border:none;cursor:pointer;opacity:0;transition:opacity .3s ease}.delete-task[data-v-c91cf100]:before,.delete-task[data-v-c91cf100]:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:1px;background-color:var(--color-text-secondary);border-radius:1px;transform-origin:center}.delete-task[data-v-c91cf100]:before{transform:translate(-50%,-50%) rotate(45deg)}.delete-task[data-v-c91cf100]:after{transform:translate(-50%,-50%) rotate(-45deg)}.task-item:hover .delete-task[data-v-c91cf100]{opacity:1}.task-footer[data-v-c91cf100]{height:3rem;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-secondary);border-radius:6px;font-size:14px}.task-counter[data-v-c91cf100]{font-size:14px;color:var(--color-text-secondary)}.task-filters button[data-v-c91cf100]{padding:5px 10px;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--color-text-secondary);font-weight:var(--font-weight-700);transition:background-color .3s ease,color .3s ease}.task-filters button[data-v-c91cf100]:hover{color:var(--color-text-hover)}.task-filters button.active[data-v-c91cf100]{background-color:var(--color-primary);color:var(--color-text-active)}.desktop-filters[data-v-c91cf100]{display:flex;gap:4px}.mobile-filters[data-v-c91cf100]{display:none;margin-top:1rem;justify-content:center;gap:4px}.clear-completed[data-v-c91cf100]{padding:0;background:transparent;border:none;color:var(--color-text-secondary);border-radius:6px;cursor:pointer;transition:background-color .3s ease,color .3s ease}.clear-completed[data-v-c91cf100]:hover{color:var(--color-text-hover)}.bottom-text[data-v-c91cf100]{padding:2rem 0;text-align:center;font-size:14px;color:var(--color-text-secondary)}@media (max-width: 592px){body[data-v-c91cf100]{font-size:14px}.task-list[data-v-c91cf100]{margin-top:1rem}.task-item[data-v-c91cf100]{min-height:3.25rem}.task-input[data-v-c91cf100]{height:3rem;font-size:14px}.add-task[data-v-c91cf100]{height:3rem;width:3rem}.checkbox-container[data-v-c91cf100]{font-size:12px}.checkmark[data-v-c91cf100]{height:1.25rem;margin-inline:1.25rem}.mobile-filters[data-v-c91cf100]{display:flex;background-color:var(--color-bg-secondary);height:3rem;border-radius:6px}.desktop-filters[data-v-c91cf100]{display:none}.task-footer[data-v-c91cf100]{height:3.25rem;flex-wrap:wrap;justify-content:space-between;gap:1rem}.checkbox-container .checkmark[data-v-c91cf100]:after{left:7px;top:4px;width:5px;height:9px;border-width:0 2px 2px 0}.delete-task[data-v-c91cf100]{max-width:1rem;height:1rem}.char-counter[data-v-c91cf100]{font-size:10px}}.background-img[data-v-7d010bf8]{width:auto;max-width:1440px;height:300px;margin:auto;background:center top / cover no-repeat}.content-container[data-v-7d010bf8]{width:36rem;margin:auto;padding:4.5rem 0 3rem}@media (max-width: 592px){.background-img[data-v-7d010bf8]{height:200px}.content-container[data-v-7d010bf8]{width:auto;padding:3rem 24px 2rem}}