body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg-primary-h:224;--bg-primary-s:10%;--bg-primary-l:20%;--border-radius:0.4rem;--bg-primary:hsl(var(--bg-primary-h),var(--bg-primary-s),var(--bg-primary-l));--color-init:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) + 5%),calc(var(--bg-primary-l) + 40%));--color-hover:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) + 40%),calc(var(--bg-primary-l) + 80%));--color-active:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) + 5%),calc(var(--bg-primary-l) + 10%))}.TodoApp_Body{align-items:center;animation:gradient 12s ease infinite;background:linear-gradient(-45deg,#2e3138,hsl(224,30%,24%),hsl(224,6%,18%));background:linear-gradient(-45deg,hsl(var(--bg-primary-h),var(--bg-primary-s),var(--bg-primary-l)),hsl(var(--bg-primary-h),calc(var(--bg-primary-s) + 20%),calc(var(--bg-primary-l) + 4%)),hsl(var(--bg-primary-h),calc(var(--bg-primary-s) - 4%),calc(var(--bg-primary-l) - 2%)));background-size:400% 400%;color:#fff;display:flex;flex-direction:column;min-height:100vh}@keyframes gradient{0%{background-position:0 0}50%{background-position:100% 50%}to{background-position:0 0}}.TodoApp_Body button{background-color:hsl(224,5%,25%);background-color:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) - 5%),calc(var(--bg-primary-l) + 5%));border:1px solid hsl(224,-10%,30%);border:1px solid hsl(var(--bg-primary-h),calc(var(--bg-primary-s) - 20%),calc(var(--bg-primary-l) + 10%));border-radius:.4rem;border-radius:var(--border-radius);color:#fff;cursor:pointer;padding:.6em .8em;transition:background .1s ease-out}.TodoApp_Body button:hover{background-color:hsl(224,-10%,30%);background-color:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) - 20%),calc(var(--bg-primary-l) + 10%))}.TodoApp_Body button:active{background-color:hsl(224,-10%,-10%);background-color:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) - 20%),calc(var(--bg-primary-l) - 30%))}.TodoApp_Header{padding:2rem 1em;text-align:center}.TaskList_AddPanel{background-color:hsl(224,15%,15%);background-color:hsl(var(--bg-primary-h),calc(var(--bg-primary-s) + 5%),calc(var(--bg-primary-l) - 5%));margin-bottom:.4rem;padding:.6rem 1.2rem}.TaskList_AddPanel,input{border-radius:.4rem;border-radius:var(--border-radius)}input{background-color:#2e3138;background-color:var(--bg-primary);border:1px solid hsl(224,15%,30%);border:1px solid var(--color-active);color:#fff;margin:.6em;padding:.4em .5em}.TaskList_Row{align-items:center;background-color:hsl(224,10%,15%);background-color:hsl(var(--bg-primary-h),var(--bg-primary-s),calc(var(--bg-primary-l) - 5%));border-radius:.4rem;border-radius:var(--border-radius);display:flex;justify-content:space-between;margin-bottom:.6rem;min-width:420px;padding:.6rem 1.2rem;position:relative;transition:background .3s ease-out}.TaskList_Row:has(.editInput){margin-bottom:64px}.TaskList_Row .editInput{background-color:hsl(224,10%,12%);background-color:hsl(var(--bg-primary-h),var(--bg-primary-s),calc(var(--bg-primary-l) - 8%));border-radius:0 0 .2rem .2rem;left:0;position:absolute;width:100%}.TaskList_Row.completed .editInput{background-color:hsl(120,10%,25%);background-color:hsl(120,var(--bg-primary-s),calc(var(--bg-primary-l) + 5%))}.TaskList_Row .editInput div{align-items:center;display:flex;justify-content:center;padding:.6rem 1.2rem}.TaskList_Row.completed{background-color:hsl(120,10%,30%);background-color:hsl(120,var(--bg-primary-s),calc(var(--bg-primary-l) + 10%))}.TaskList_Row .TaskList_EditPanel{margin-left:.4rem;padding:.2rem}.TaskList_Row .TaskList_EditPanel .editInput svg,.TaskList_Row .TaskList_EditPanel svg{border:1px solid hsl(224,15%,60%);border:1px solid var(--color-init);border-radius:.4rem;border-radius:var(--border-radius);color:hsl(224,15%,60%);color:var(--color-init);cursor:pointer;margin-left:.2rem;padding:.4rem;transition:color .1s ease-out}.TaskList_Row .TaskList_EditPanel .editInput svg:focus-visible,.TaskList_Row .TaskList_EditPanel .editInput svg:hover,.TaskList_Row .TaskList_EditPanel svg:focus-visible,.TaskList_Row .TaskList_EditPanel svg:hover{border-color:hsl(224,50%,100%);border-color:var(--color-hover);color:hsl(224,50%,100%);color:var(--color-hover)}.TaskList_Row .TaskList_EditPanel .editInput svg:active,.TaskList_Row .TaskList_EditPanel svg:active{border-color:hsl(224,15%,30%);border-color:var(--color-active);color:hsl(224,15%,30%);color:var(--color-active)}.font-xl{font-size:calc(10px + 2vmin)}.font-md{font-size:calc(6px + 1vmin)}.italic{font-style:italic}
/*# sourceMappingURL=main.07899ce4.css.map*/