@import "https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";:root{--max-width:144rem;--main-width:50rem;--font-family:"Josefin Sans", sans-serif;--font-weight-400:400;--font-weight-700:700;--font-size-18:1.8rem;--active-blue:#3a7bfd;--color-white:#fff;--bg-color-light:#fafafa;--bg-color-dark:#161722;--text-color-light:#484b6a;--text-color-complete-light:#d2d3db;--text-color-action-light:#cacde8;--text-hover-action-light:#9394a5;--color-dark:#25273c;--text-color-dark:#393a4c;--checked-icon-bg:linear-gradient(135deg, #57ddff, #c058f3)}:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;font-size:62.5%;overflow-x:hidden}@media (width<=900px){html{font-size:8px}}body{font-family:var(--font-family);font-size:var(--font-size-18);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-color-light);margin:0}a,button{cursor:revert}ol,ul,menu,summary{list-style:none}ol{counter-reset:revert}img{max-block-size:100%;max-inline-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}.main--header{color:var(--color-white);font-weight:var(--font-weight-700);letter-spacing:1.5rem;font-size:3.6rem}.container{max-width:var(--max-width);background-color:var(--bg-color-light);background-image:url(/todo-list-js/assets/bg-desktop-light.jpg);background-position:top;background-repeat:no-repeat;background-attachment:fixed;width:100%;height:100vh;margin:0 auto;padding:9rem 0}.main{width:var(--main-width);flex-direction:column;gap:3rem;margin:0 auto;display:flex}.main__header{justify-content:space-between;align-items:center;display:flex}@media (width<=400px){.main{--main-width:350px}}.container:has(.main.--isDark){background-color:var(--bg-color-dark);background-image:url(/todo-list-js/assets/bg-desktop-dark.jpg);background-position:top;background-repeat:no-repeat;background-attachment:fixed}.main.--isDark .TaskInput__input{background-color:var(--color-dark);color:#cacde8}.main.--isDark .TaskInput__input::placeholder{color:#a0a2b0}.activeTask,.doneTask{pointer-events:none}.main.--isDark .TaskList{background-color:var(--color-dark);box-shadow:0 5px 15px #00000059}.main.--isDark .TaskList__taskContent{border-bottom:1px solid var(--text-color-dark)}.main.--isDark .TaskList__taskContent.--isCompleted .TaskList__value{color:#5c5f7f;text-decoration:line-through}.main.--isDark .TaskList__taskContent.--isCompleted .TaskList__checkboxImg path{stroke:var(--color-white)}.main.--isDark .TaskList__checkbox{border:1px solid #5c5f7f}.main.--isDark .TaskList__checkboxImg path{stroke:var(--color-dark)}.main.--isDark .TaskList__value{color:#cacde8}.main.--isDark .TaskList__notCompleted{color:#5c5f7f}.main.--isDark .button:not(.--isActive){color:#5c5f7f;transition:all .3s}.main.--isDark .button:not(.--isActive):hover{color:#cacde8}.TaskInput__input{background-color:var(--bg-color-light);border-radius:8px;width:100%;padding:2rem 0 2rem 2rem}.TaskInput__input::placeholder{color:#a0a2b0}.TaskList{background-color:var(--color-white);border-radius:4px;margin-top:-2rem;overflow:hidden;box-shadow:0 8px 24px #959da533}.TaskList__checkbox{border:1px solid var(--text-color-complete-light);z-index:0;border-radius:50%;justify-content:center;align-items:center;width:2.2rem;height:2.2rem;display:flex;position:relative;overflow:hidden}.TaskList__checkbox:before{content:"";-webkit-mask-composite:xor;opacity:0;background:linear-gradient(135deg,#57ddff,#c058f3);border-radius:50%;padding:1px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.TaskList__taskContent{border-bottom:1px solid var(--text-color-complete-light);align-items:center;gap:2rem;padding:1.8rem 2rem;display:flex}.TaskList__taskContent:hover .TaskList__deleteIcon{display:inline-block}.TaskList__taskContent:hover .TaskList__checkbox:before{opacity:1}.TaskList__taskContent.--isCompleted .TaskList__value{color:var(--text-color-action-light);text-decoration:line-through}.TaskList__taskContent.--isCompleted .TaskList__checkbox{background:var(--checked-icon-bg);border:none}.TaskList__value{color:var(--text-color-light)}.TaskList__taskDelete{margin-left:auto}.TaskList__deleteIcon{display:none}.TaskList__actionButtons{justify-content:space-between;align-items:center;padding:1.8rem 2rem;display:flex}.TaskList__notCompleted{color:#a0a2b0;font-size:1.4rem}.TaskList__navigationButtons{color:#a0a2b0;gap:1rem;font-size:1.4rem;display:flex}.TaskList__clear{color:#a0a2b0;font-size:1.6rem}.button{font-weight:700}.button.TaskList__clear{font-weight:400}.selectAll.--isActive,.selectActive.--isActive,.selectCompleted.--isActive{color:var(--active-blue)}.button:not(.--isActive){transition:all .3s}.button:not(.--isActive):hover{color:var(--text-color-light)}