.dark{--clr-bg-main: hsl(235, 21%, 11%);--clr-bg-secondary: hsl(235, 24%, 19%);--clr-border: hsl(237, 14%, 26%);--clr-font-main: hsl(234, 39%, 85%);--clr-font-hover: hsl(236, 33%, 92%);--clr-font-secondary: hsl(234, 11%, 52%);--clr-font-tertiary: hsl(233, 14%, 35%);--clr-shadow: rgba(0, 0, 0, 0.25);--clr-accent: hsl(0, 100%, 67%);--linear-gradient: linear-gradient( to bottom right, hsl(7, 100%, 67%), hsl(39, 87%, 65%) )}.light{--clr-bg-main: hsl(0, 0%, 98%);--clr-bg-secondary: white;--clr-border: hsl(255, 8%, 91%);--clr-font-main: hsl(235, 19%, 35%);--clr-font-hover: hsl(235, 19%, 35%);--clr-font-secondary: hsl(236, 9%, 61%);--clr-font-tertiary: hsl(236, 9%, 61%);--clr-shadow: rgba(0, 0, 0, 0.1);--clr-accent: hsl(220, 98%, 61%);--linear-gradient: linear-gradient( to bottom right, hsl(192, 100%, 67%), hsl(280, 87%, 65%) )}body{display:flex;justify-content:center;padding:2.5rem 24px;background:var(--linear-gradient),var(--clr-bg-main);background-repeat:no-repeat;background-size:100% 200px;font-family:"Josefin Sans",sans-serif}button{cursor:pointer;padding:0;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.container{width:100%;max-width:550px}.heading{margin-top:0.5rem;font-size:1.625rem;font-weight:700;letter-spacing:0.625rem;text-transform:uppercase;line-height:1;color:#fff}.theme-button{display:flex;justify-content:center;align-items:center;width:1.625rem;height:1.625rem;border-radius:50%;transition:transform 100ms linear}.theme-button:hover,.theme-button:focus-visible{transform:scale(1.2)}.theme-button:focus-visible{outline:2px solid #fff;outline-offset:2px}.theme-button__icon{fill:#fff;transition:fill 100ms linear}.theme-button__icon--hidden{display:none}.theme-button:hover>.theme-button__sun-icon,.theme-button:focus-visible>.theme-button__sun-icon{fill:#ffdc3f}.theme-button:hover>.theme-button__moon-icon,.theme-button:focus-visible>.theme-button__moon-icon{fill:#7393b3}.todo-list-container{font-size:0.75rem}.new-task{display:flex;align-items:center;padding:14px 20px;margin-bottom:1rem;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 20px 30px var(--clr-shadow);caret-color:var(--clr-accent)}.new-task__task{width:100%;border:none;background:none;font-family:"Josefin Sans",sans-serif;font-size:0.8125rem;color:var(--clr-font-main)}.new-task__task:focus{outline:none}.checkbox{cursor:pointer;display:grid;place-items:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-right:10px;background:var(--clr-font-secondary);border-radius:50%}.checkbox:focus-visible{outline:2px solid #fff;outline-offset:2px}.checkbox:hover,.checkbox--completed{background:var(--linear-gradient)}.checkbox__inner-circle{display:grid;place-items:center;width:1.125rem;height:1.125rem;background:var(--clr-bg-secondary);border-radius:50%}.checkbox__inner-circle--completed{background:none}.checkbox__check-mark{display:none}.checkbox__check-mark--completed{display:block}.todo-list{box-shadow:0 20px 30px var(--clr-shadow)}.tasks{margin-bottom:1rem;background:var(--clr-bg-secondary);border-radius:5px}.task{display:flex;align-items:center;padding:16px 20px;position:relative;border-bottom:1px solid var(--clr-border)}.task--hidden{display:none}.task--dragging>.task__text{color:var(--clr-accent)}.task--dragover-top::before,.task--dragover-bottom::before{content:"";position:absolute;left:0;width:100%;height:3px;background:var(--clr-accent);border-radius:1000px}.task--dragover-top::before{border-radius:5px 5px 0 0;top:0}.task--dragover-bottom::before{bottom:-2px}.task__text{width:100%;margin-right:16px;color:var(--clr-font-main);caret-color:var(--clr-accent)}.task__text:focus{outline:none;border-bottom:1px solid #fff}.task__text--completed{text-decoration:line-through;color:var(--clr-font-secondary)}.task__button{flex-shrink:0;width:1.125rem;height:1.125rem;margin-left:auto;border-radius:2px;transition:transform 100ms linear}.task__button:hover,.task__button:focus-visible{transform:scale(1.3)}.task__button:focus-visible{outline:2px solid #fff;outline-offset:2px}.task__button:not(:last-child){margin-right:8px}.task__edit-button--hidden{display:none}.task__submit-button--hidden{display:none}.bottom-section{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;color:var(--clr-font-tertiary)}.bottom-section__clear-button{border-radius:2px}.bottom-section__clear-button:hover,.bottom-section__clear-button:focus-visible{color:var(--clr-font-hover)}.bottom-section__clear-button:focus-visible{outline:2px solid #fff;outline-offset:2px}.filters{display:flex;justify-content:center;align-items:center;padding:16px 20px;margin-bottom:2.5rem;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 20px 30px var(--clr-shadow)}.filters__filter{font-size:0.875rem;font-weight:700;color:var(--clr-font-secondary);border-radius:2px}.filters__filter:not(:last-child){margin-right:1.125rem}.filters__filter:hover,.filters__filter:focus-visible{color:var(--clr-font-hover)}.filters__filter:focus-visible{outline:2px solid #fff;outline-offset:2px}.filters__filter--selected{color:var(--clr-accent);pointer-events:none}.tip{font-size:0.875rem;text-align:center;color:var(--clr-font-tertiary)}@media(min-width: 650px){body{padding:4.25rem 24px;background-size:100% 300px}main{margin-bottom:2.5rem}header{margin-bottom:2.375rem}.heading{margin-top:0.75rem;font-size:2.5rem;letter-spacing:1rem}.theme-button{width:1.875rem;height:1.875rem}.todo-list-container{font-size:1.125rem}.new-task{padding:20px 24px;margin-bottom:1.5rem}.new-task__task{font-size:1.125rem}.checkbox{width:1.5rem;height:1.5rem;margin-right:20px}.checkbox__inner-circle{width:1.375rem;height:1.375rem}.checkbox__check-mark{margin-top:0.0625rem;margin-left:0.0625rem}.task{padding:18px 24px}.task__button{width:1.375rem;height:1.375rem}.bottom-section{padding:15px 20px;font-size:0.875rem}.filters{width:-moz-fit-content;width:fit-content;padding:0;margin:0 16px;box-shadow:none}}@media(any-hover: hover){.task__button{display:none}.task:hover>.task__button{display:block}.task:hover>.task__edit-button--hidden,.task:hover>.task__submit-button--hidden{display:none}}/*# sourceMappingURL=style.css.map */