*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{scroll-behavior:smooth}html,body{min-height:100%;height:100%}body{text-rendering:optimizeSpeed;line-height:1.5}ul,ol{list-style:none}a{text-decoration:none}img,picture,svg,video{display:block;max-width:100%}input,select,textarea{border:none;outline:none}button{cursor:pointer;border:none}input[type=color]{outline:none;-webkit-appearance:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}input[type=color]::-moz-color-swatch{border:none}input[type=color]::-moz-focus-inner{border:0}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-accent-300: hsl(198, 100%, 50%);--clr-accent-400: hsl(198, 100%, 42%);--clr-accent-500: hsl(191, 100%, 33%);--clr-accent-700: hsl(191, 70%, 40%);--clr-panel-400: hsl(199, 13%, 33%);--clr-panel-500: hsl(199, 13%, 22%);--clr-panel-600: hsl(199, 13%, 18%);--clr-neutral-100: hsl(0, 0%, 99%);--clr-neutral-200: hsl(0, 0%, 80%);--clr-neutral-300: hsl(0, 0%, 66%);--clr-neutral-400: hsl(0, 0%, 50%);--clr-neutral-500: hsl(0, 0%, 33%);--clr-neutral-525: hsl(0, 0%, 27%);--clr-neutral-550: hsl(0, 0%, 20%);--clr-neutral-600: hsl(0, 0%, 17%);--clr-neutral-700: hsl(0, 0%, 11%);--clr-neutral-900: hsl(0, 0%, 0%);--clr-list-card: hsla(0, 0%, 0%, .22);--clr-list-card-hover: hsla(0, 0%, 0%, .44);--clr-past-due: hsl(0, 72%, 62%);--clr-priority: hsl(49, 100%, 50%);--clr-completed-task: var(--clr-accent-400);--ff-primary: Roboto, Arial, sans-serif;--fw-reg: 400;--fw-bold: 700;--fs-200: clamp(.63rem, calc(.82rem - .16vw), .79rem);--fs-300: clamp(.75rem, calc(.9rem + .04vw), .95rem);--fs-400: clamp(.9rem, calc(.98rem + .13vw), 1.13rem);--fs-500: clamp(1.13rem, calc(1.05rem + .37vw), 1.5rem);--fs-600: clamp(1.27rem, calc(1.12rem + .73vw), 2rem);--fs-700: clamp(1.42rem, calc(1.18rem + 1.24vw), 2.66rem);--fs-800: clamp(1.6rem, calc(1.21rem + 1.95vw), 3.55rem);--fs-900: clamp(1.8rem, calc(1.22rem + 2.93vw), 4.74rem);--spc-100: clamp(.25rem, calc(.19rem + .31vw), .56rem);--spc-200: clamp(.5rem, calc(.43rem + .38vw), .88rem);--spc-300: clamp(.75rem, calc(.68rem + .38vw), 1.13rem);--spc-400: clamp(1rem, calc(.86rem + .69vw), 1.69rem);--spc-500: clamp(1.5rem, calc(1.35rem + .75vw), 2.25rem);--spc-600: clamp(2rem, calc(1.73rem + 1.38vw), 3.38rem);--spc-700: clamp(3rem, calc(2.7rem + 1.5vw), 4.5rem);--spc-800: clamp(4rem, calc(3.45rem + 2.75vw), 6.75rem);--border-radius: 8px;--color-picker-shadow: 2px 4px 4px rgba(0, 0, 0, .2)}body{display:flex;flex-direction:column;font-family:var(--ff-primary);font-size:var(--fs-400);color:var(--clr-neutral-100)}.btn-hover-transition{filter:brightness(.9);transition:.12s}.btn-hover-transition:hover,.btn-hover-transition:focus-within{filter:brightness(1.05);scale:1.03;transition:.12s}header{position:relative;z-index:1;background-color:var(--clr-panel-600)}.header-wrapper{height:6vh;display:flex;align-items:center;justify-content:space-between;padding:var(--spc-300);box-shadow:6px 0 12px #0006}.logo-container{display:flex;align-content:center;height:5vh}.hamburger-btn{display:none;color:var(--clr-accent-300);font-size:2.5rem;transform-origin:left}.hamburger-btn>i{position:relative;top:calc(var(--spc-100) * .25)}.login-btn{border-radius:var(--border-radius);padding-block:var(--spc-100);padding-inline:var(--spc-200);font-size:calc(var(--fs-500) * .9);font-weight:700;letter-spacing:1px;color:var(--clr-neutral-600);background-color:var(--clr-accent-300);box-shadow:2px 4px 6px #0003}main{position:relative;display:grid;grid-template-columns:minmax(0,clamp(15rem,20vw,25rem)) 3fr;background-color:var(--clr-panel-400);height:100%}.title{font-size:var(--fs-500);font-weight:700;letter-spacing:.66px;color:var(--clr-neutral-100)}input[type=text],input[type=search],textarea{padding:.33rem;padding-left:var(--spc-200);border-radius:var(--border-radius);background-color:#00000059;color:var(--clr-neutral-100);box-shadow:2px 4px 4px #0003}.sidebar{display:flex;flex-direction:column;align-items:center;padding-block:var(--spc-400);padding-inline:var(--spc-200);background-color:var(--clr-panel-500)}.list-sidebar{box-shadow:6px 0 12px #0003}.active-todo-sidebar{box-shadow:-6px 0 12px #00000026}.sidebar input{width:100%}.preset-lists-container,.list-container{display:flex;flex-direction:column;margin-block:var(--spc-200);width:100%;gap:var(--spc-100)}.preset-list-card,.list-card{display:flex;align-items:center;padding:calc(var(--spc-100) * .5);border-radius:var(--border-radius);background-color:var(--clr-list-card);color:var(--clr-neutral-200)}.preset-list-card:hover,.list-card:hover{background-color:var(--clr-list-card-hover)}.list-sidebar button{background-color:#fff0;color:var(--clr-neutral-100)}.list-container{flex-grow:1}.lists-wrapper{height:76vh;width:100%;margin-block:var(--spc-200);padding-inline:var(--spc-200);overflow-y:auto}.list-sidebar .swap-btn{text-align:left;padding-left:var(--spc-200);width:100%}.list-card{display:flex}.list-card .total-tasks-wrapper{position:relative;background-color:#0000004d;border-radius:99px;height:1.2rem;aspect-ratio:1 / 1}.list-card .total-tasks{position:absolute;top:50%;left:50%;transform:translate(-60%,-45%);color:var(--clr-neutral-400);font-weight:900;font-size:calc(var(--fs-200) * 1.1);text-align:center;letter-spacing:-1px}.list-card .delete-btn{padding-inline:var(--spc-100);color:var(--clr-neutral-400)}.active-list{display:flex;flex-direction:column;align-items:center;padding:var(--spc-300)}.category-container{margin-bottom:var(--spc-500);width:clamp(15rem,66vw,50rem)}.title-wrapper{display:flex;align-items:center;gap:var(--spc-200);padding-block:calc(var(--spc-100) * .5);padding-inline:var(--spc-200);margin-block:var(--spc-200);color:#fff;background-color:#00000080;border-radius:var(--border-radius);box-shadow:2px 4px 6px #00000040}.category-container .fa-angle-down{transition:transform .16s}.category-container.hidden .fa-angle-down{transform:rotate(-90deg);transition:transform .16s}.category-container.hidden .tasks{display:none}.todo-container{isolation:isolate;flex-grow:1;max-height:80vh;overflow-y:auto;gap:var(--spc-300);padding-inline:var(--spc-200)}.complete-container,.incomplete-container{display:flex;flex-direction:column;gap:.25rem}.complete-container>*{filter:brightness(.8)}.complete-container .task-title{text-decoration:line-through}.complete-container .past-due{color:var(--clr-neutral-300)}.todo-card:not([data-color="neutral"]):before{content:"";z-index:-1;position:absolute;left:0;width:20%;height:100%;border-radius:var(--border-radius) 0 0 var(--border-radius)}.todo-card,.step-card{z-index:1;position:relative;display:flex;justify-content:space-between;align-items:center;padding-inline:var(--spc-200);padding-block:var(--spc-100);width:100%;background-color:#0003;border-radius:var(--border-radius)}.todo-card:hover{background-color:#0006}.check-box{scale:1.2;margin-right:var(--spc-200);color:var(--clr-neutral-200)}.complete-task{position:relative;display:flex;align-items:center;color:var(--clr-completed-task)}.todo-card-task-wrapper{letter-spacing:.66px}.task-details-wrapper{display:flex;font-size:var(--fs-300);gap:var(--spc-200);color:var(--clr-neutral-300);letter-spacing:.66px}.past-due{color:var(--clr-past-due)}.priority{margin-left:auto;color:var(--clr-neutral-200)}.priority>.fa-solid{color:var(--clr-priority)}.todo-input{display:flex;gap:var(--spc-200);background-color:#00000054;padding:var(--spc-300);border-radius:var(--border-radius)}.todo-input>*{border-radius:var(--border-radius);box-shadow:4px 4px 4px #00000054}.input-wrapper{position:relative;width:clamp(13rem,10rem + 33vw,35rem);height:2.5rem}.input-wrapper>input{width:100%;height:100%}.input-wrapper>.date-input-wrapper{position:absolute;right:0;top:0;border-radius:var(--border-radius)}.date-input-wrapper{display:inline-flex;align-items:center;position:relative;height:2.5rem}.calendar-icon-wrapper{isolation:isolate;position:relative;height:100%}.calendar-icon-wrapper>img{display:none;height:100%}.calendar-icon-wrapper>img.active{display:block}.calendar-icon-wrapper>.calendar-month,.calendar-icon-wrapper>.calendar-day{z-index:1;position:absolute;display:none;font-weight:700;top:50%;left:50%}.calendar-icon-wrapper:has(.calendar-no-grid.active)>.cal-date{display:block}.calendar-icon-wrapper>.calendar-month{font-size:var(--fs-200);scale:.9;transform:translate(-50%,-115%)}.calendar-icon-wrapper>.calendar-day{color:#000;transform:translate(-50%,-27%)}.hidden-date-input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0}.hidden-date-input::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;width:100%;height:100%}.color-selector{position:relative;height:100%;width:3.24rem}.color-selector.no-selection{background-image:linear-gradient(to right,#f1a3bb,#f4c4a9,#f2ee8f,#96d470,#959fef,#ac68d7)}.color-selector:focus-within .color-selector-menu{display:grid}.color-selector-menu{position:absolute;display:none;gap:var(--spc-100);left:50%;transform:translate(-50%,-115%);background-color:var(--clr-neutral-200);border-radius:var(--border-radius);padding:var(--spc-200)}.color-selector-menu:after{content:"";position:absolute;bottom:-9px;left:50%;transform:translate(-50%) rotate(-45deg);border-width:10px;border-style:solid;border-color:transparent transparent var(--clr-neutral-200) var(--clr-neutral-200);border-radius:0 0 0 4px}.color-input-wrapper{display:flex;gap:var(--spc-100)}.color-input-wrapper>*,.presets>*,.color-selector-menu{box-shadow:var(--color-picker-shadow)}.color-input{width:calc(1.5rem * 2 + var(--spc-100));height:1.5rem;border:2px solid #ffffff;border-radius:var(--border-radius);overflow:hidden}.cancel-color{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:2px solid #ffffff;border-radius:var(--border-radius);color:red;font-size:1.4rem}.cancel-color>i{filter:drop-shadow(2px 2px 2px rgba(0,0,0,.33))}.presets{display:flex;flex-wrap:wrap;width:calc((1.5rem + var(--spc-100)) * 3 - var(--spc-100));gap:var(--spc-100)}.preset{width:1.5rem;height:1.5rem;cursor:pointer;border:2px solid #ffffff;border-radius:var(--border-radius)}.details-card{box-shadow:2px 4px 4px #00000026}.task-container{display:flex;flex-direction:column;width:100%;gap:var(--spc-200);background-color:#0000004d;padding:var(--spc-200);border-radius:var(--border-radius)}.task-wrapper{display:flex;align-items:center}#active-steps-container{display:flex;flex-direction:column;gap:.25rem;padding-bottom:.5rem}.step-delete-btn{margin-left:auto}.settings-wrapper{display:flex;justify-content:space-between;align-items:center;min-height:3.5rem;width:100%;background-color:#0000004d;padding:var(--spc-200);padding-left:var(--spc-400);border-radius:var(--border-radius)}.settings-wrapper .date-input-wrapper,.settings-wrapper .color-selector{margin-left:auto;border-radius:var(--border-radius);width:2.5rem;aspect-ratio:1 / 1}#task-note{width:100%;height:20%;resize:vertical;background-color:#0000004d}.active-todo-sidebar #task-delete{margin-top:auto;width:100%;text-align:center;background-color:#0000004d;padding:var(--spc-200);border-radius:var(--border-radius);cursor:pointer}.active-todo-sidebar{position:absolute;width:clamp(15rem,5rem + 15vw,25rem);height:100%;right:0;display:none}.active-todo-sidebar.active{display:flex;flex-direction:column;gap:var(--spc-200)}.overlay{position:absolute;width:100%;height:100%;background-color:#00000026;display:none}.overlay.active{display:block}body{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}footer{height:6vh;display:flex;align-items:center;justify-content:center;margin-top:auto;padding:var(--spacing-xs);padding-top:var(--spacing-xl);background-color:var(--clr-panel-600)}#copyright{font-size:1.24rem;font-weight:700;text-decoration-line:none;letter-spacing:.5px;color:var(--clr-neutral-300)}.fa-github{font-size:1.38rem;transition:transform .4s ease-in-out}.fa-github:hover{transform:rotate(360deg) scale(1.2)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background-color:#f0f0f0;border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{background-color:var(--clr-accent-300);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb:hover{background-color:var( --clr-accent-500 )}*{scrollbar-width:thin;scrollbar-color:#888 #f0f0f0}@media screen and (max-width: 37.5em){.header-wrapper{padding-inline:var(--spc-600)}.logo-container{height:4vh}.hamburger-btn{display:block}main{display:flex;justify-content:center}.list-sidebar{z-index:1;position:absolute;width:17.5rem;height:100%;left:0;display:none}.list-sidebar.active{display:flex}.category-container{width:clamp(15rem,90vw,50rem)}}