@import"https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap";*,:before,:after{box-sizing:border-box}:where(ul,ol):where([class]){padding-left:0}body,:where(blockquote,figure,fieldset):where([class]){margin:0}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]){margin-block:0}:where(dd[class]){margin-left:0}:where(fieldset[class]){padding:0;border:none}:where(ul[class]){list-style:none}:where(address[class]){font-style:normal}p{--paragraphMarginBottom: 24px;margin-block:0}p:where(:not([class]):not(:last-child)){margin-bottom:var(--paragraphMarginBottom)}img,video{display:block;max-width:100%;height:auto}input,textarea,select,button{font:inherit}html{height:100%;scrollbar-gutter:stable;scroll-behavior:smooth}body{min-height:100%;line-height:1.5}a:where([class]){display:inline-flex}button,label{cursor:pointer}button{-webkit-tap-highlight-color:transparent}:where([fill]:not([fill=none],[fill^=url])){fill:currentColor}:where([stroke]:not([stroke=none],[stroke^=url])){stroke:currentColor}svg *{transition-property:fill,stroke}:where(table){border-collapse:collapse;border-color:currentColor}@media(prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--primary-color: #cbbda1;--primary-color-hover: #3f51b5;--primary-color-active: #58cc4c;--primary-color-active-hover: #3f51b5;--secondary-color-dark: #0d0d0d;--secondary-color-gray: #1e1e1e;--secondary-color-light: #cbbda1;--secondary-color: #ff5730;--primary-font: "Comfortaa", sans-serif;--border-radius: 10px}body{background-color:var(--secondary-color-dark);font-family:var(--primary-font),sans-serif;color:var(--primary-color);font-weight:500;font-size:16px}a{color:var(--primary-color);text-decoration:none}button{border:none;cursor:pointer;background:none;color:var(--primary-color)}input{width:100%;max-width:300px;border:none;border-radius:var(--border-radius);background-color:var(--secondary-color-gray);padding:10px 15px;text-align:center;color:var(--primary-color)}input:focus{outline-color:var(--primary-color)}.header{display:flex;justify-content:space-between;align-items:center;text-align:center;padding:20px 40px;font-size:28px;font-weight:700}.header__logo,.header__auth{display:flex;justify-content:center;align-items:center}.header__logo-part--second{color:var(--secondary-color)}.main__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;width:100%;max-width:600px;margin:0 auto;padding:0 12px}.main__header{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:20px;width:100%;max-width:500px;padding:40px;border:1px solid var(--secondary-color-light);border-radius:var(--border-radius)}.main__subtitle{font-weight:300}.main__tasks-count{display:flex;justify-content:center;width:80px;height:80px;color:var(--secondary-color-dark);font-size:28px;font-weight:700;padding:20px;background:var(--secondary-color);border-radius:50%}.main__body{display:flex;align-items:center;justify-content:center;width:100%;max-width:500px;margin:0 auto}.main__field{flex:1}.main__input{height:50px;max-width:400px}.main__tasks-list{display:flex;flex-direction:column;gap:20px;width:100%;max-width:500px}.main__task{font-size:18px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;width:100%;max-width:500px;padding:16px;border:1px solid var(--secondary-color-light);border-radius:var(--border-radius);transition:background .3s ease}.main__task-complete:active{background:var(--primary-color)}.main__task-complete{width:44px;height:44px;border:1px solid var(--secondary-color);border-radius:50%}.main__task-complete--done{background-color:var(--primary-color-active);border:none}.main__task-text{font-size:18px}.main__task-text--done{text-decoration:line-through}.footer__logo{filter:invert(1) brightness(.5) contrast(.5)}@media(max-width:600px){.main__task{gap:10px;padding:12px}.main__task-text{font-size:16px}}@media(max-width:500px){.main__header{flex-direction:column;gap:0;padding:10px}.main__body{gap:10px}.main__wrapper{gap:20px}}@media(hover:hover)and (pointer:fine){.main__task-complete:hover{background:var(--primary-color)}}.main__button{width:55px;height:55px;display:flex;justify-content:center;align-items:center;font-size:28px;border-radius:50%;background:var(--secondary-color);color:var(--secondary-color-dark);transition:background .3s ease}.main__button:active{background:var(--primary-color)}@media(hover:hover)and (pointer:fine){.main__button:hover{background:var(--primary-color)}}