@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";:root{--Blue-500: hsl(220, 98%, 61%);--Gray-50: hsl(0, 0%, 98%);--Purple-300: hsl(234, 39%, 85%);--Gray-300: hsl(233, 11%, 84%);--Navy-850: hsl(235, 19%, 35%);--Navy-950: hsl(235, 21%, 11%);--Nav-900: hsl(235, 24%, 19%);--Purpl-300: hsl(234, 39%, 85%);--Purpl-100-hover: hsl(236, 33%, 92%);--Purpl-600: hsl(235, 16%, 43%);--Purpl-700: hsl(233, 14%, 35%);--Purpl-800: hsl(237, 14%, 26%);--Gray-600: hsl(236, 9%, 61%);--Body-bg: var(--Navy-950);--Check-Background: linear-gradient( to bottom right, hsl(192, 100%, 67%), hsl(280, 87%, 65%) );--Input-bg: var(--Nav-900);--Input-color: var(--Gray-50);--Inputbutton-border-color:var(--Gray-50);--Inputbutton-color:var(--Gray-50);--Inputbutton-bg:var(--Nav-900);--Inputbutton-bg-hover:var(--Purpl-100-hover);--Inputbutton-color-hover:var(--Nav-900);--Label-Color: var(--Purpl-300);--Label-checked-color: var(--Purpl-600);--Checkbox-border: var(--Gray-600);--Checkbox-bg-color: var(--Nav-900);--List-border: var(--Gray-600);--List-bg:var(--Nav-900);--Footer-text-color: var(--Purpl-600);--Footer-text-hover-color: var(--Purpl-100-hover);--Footer-bg-color:var(--Nav-900);--Footer-active-link-color: var(--Blue-500);--Scroll-bg: var(--Navy-850);--Scroll-thumb: var(--Gray-600);--ff: "Josefin Sans"}*{margin:0;padding:0;box-sizing:border-box}html{interpolate-size:allow-keywords}body{font-family:var(--ff);background-color:var(--Body-bg);display:flex;justify-content:center;align-self:center;background-image:url(/assets/bg-desktop-dark-DzAvO98h.jpg);background-repeat:no-repeat;background-size:contain;transition:all .5s ease-in-out}body.lightmode{background-image:url(/assets/bg-desktop-light-BIdKokTn.jpg)}.lightmode{--Body-bg: var(--Gray-300);--Check-Background: linear-gradient( to bottom right, hsl(192, 100%, 67%), hsl(280, 87%, 65%) );--Input-bg: var(--Gray-50);--Input-color: var(--Purpl-700);--Inputbutton-border-color:var(--Nav-900);--Inputbutton-color:var(--Nav-900);--Inputbutton-bg:var(--Gray-50);--Inputbutton-bg-hover:var(--Nav-900);--Inputbutton-color-hover:var(--Gray-300);--Label-Color: var(--Purpl-800);--Label-checked-color: var(--Purpl-600);--Checkbox-border: var(--Gray-600);--Checkbox-bg-color: var(--Gray-50);--List-border: var(--Gray-600);--List-bg:var(--Gray-50);--Footer-text-color: var(--Purpl-600);--Footer-text-hover-color: var(--Purpl-800);--Footer-bg-color:var(--Gray-50);--Footer-active-link-color: var(--Blue-500);--Scroll-bg: var(--Gray-600);--Scroll-thumb: var(--Navy-850)}ul{max-width:720px;max-height:300px;border-radius:4px 4px 0 0;overflow-y:scroll;scrollbar-width:10px;scrollbar-color:var(--Scroll-bg);transition:all .3s ease-in-out}ul::-webkit-scrollbar{width:10px;background-color:var(--Scroll-bg);transition:background-color.3s ease-in-out}ul::-webkit-scrollbar-thumb{background-color:var(--Scroll-thumb)}button{cursor:pointer}.main{max-width:768px;display:flex;flex-direction:column;gap:20px;margin-top:100px}.header{display:flex;justify-content:space-between;margin-bottom:30px}.header button{padding-inline:7px;background-color:transparent;border:none;transition:all .3s ease-in-out}.header button:hover{transform:rotate(60deg)}.title{color:#fff;text-align:left;letter-spacing:10px}.theme-toggle svg:last-child{display:none}.lightmode .theme-toggle svg:first-child{display:none}.lightmode .theme-toggle svg:last-child{display:block}@media (max-width: 768px){body{background-image:url(/assets/bg-mobile-dark-DBhZPurk.jpg)}body.darkmode{background-image:url(/assets/bg-mobile-light-eXTHhUPU.jpg)}}form{max-width:720px;border-radius:2px;background-color:var(--Input-bg);min-width:300px;max-width:780px;padding:10px 20px;display:flex;align-items:center}.todo-input{width:100%;font-family:inherit;background-color:inherit;font-size:18px;padding:4px 8px;border:none;color:var(--Input-color)}.todo-input:focus{outline:none}.add-todo{padding:4px 10px;border:1px solid var(--Inputbutton-border-color);border-radius:4px;color:var(--Inputbutton-color);background-color:var(--Inputbutton-bg);cursor:pointer;transition:all .3s ease-in-out}.add-todo:hover{background-color:var(--Inputbutton-bg-hover);color:var(--Inputbutton-color-hover)}.container{display:block;position:relative;padding-left:35px;cursor:pointer;font-size:18px;line-height:1.3;text-align:left;color:var(--Label-Color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:var(--Checkbox-bg-color);outline:2px solid var(--Checkbox-border);border-radius:50%;transition:all .3s ease-in-out}.container input:checked~.checkmark{background-image:var(--Check-Background)}.checkmark:after{content:"";height:23px;width:23px;position:absolute;left:-1.5px;top:-1.5px;border-radius:50%;z-index:-9;background-image:var(--Check-Background)}.container input:checked~.checkmark:before{display:block}.container .checkmark:before{display:none;position:absolute;content:"";left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.checkmark:hover{outline:none}.list{position:relative;list-style-type:none;display:flex;justify-content:space-between;background-color:var(--List-bg);padding:20px;z-index:10;border-bottom:1px solid var(--List-border)}.list button{padding:4px;border:none;background-color:transparent;cursor:pointer}.list button svg{opacity:0;transition:all .3s ease-in-out}.list:hover button svg{opacity:1}.footer{max-width:720px;display:grid;grid-template-columns:1fr 1fr 1fr;background-color:var(--Footer-bg-color);padding:20px;gap:5px;border-radius:0 0 4px 4px}.cta{cursor:pointer;font-size:14px;font-family:inherit;color:var(--Footer-text-color);background-color:transparent;border:none;transition:all .3s ease-in-out}.cta.active{color:var(--Footer-active-link-color)}.cta:hover{color:var(--Footer-text-hover-color)}.total-items{font-size:14px;color:var(--Footer-text-color);text-align:left;grid-column:1;grid-row:1}.clear-complete{grid-column:3;grid-row:1;text-align:right}.footer-nav{display:flex;gap:20px;justify-content:center;grid-column:2;grid-row:1}.footer-nav .cta{font-weight:700}@media (max-width: 720px){.footer{grid-template-columns:1fr 1fr 1fr 1fr;background-color:transparent;row-gap:20px;column-gap:0;padding:0}.total-items{padding:20px;grid-column:1 / 4;grid-row:1;background-color:var(--Footer-bg-color);border-radius:0 0 0 4px}.clear-complete{padding:20px;grid-column:3 / -1;grid-row:1;text-align:right;background-color:var(--Footer-bg-color)}.footer-nav{padding:20px;grid-column:1 / -1;grid-row:2;background-color:var(--Footer-bg-color);border-radius:4px}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}