@import"https://fonts.googleapis.com/css?family=Josefin+Sans:100,200,300,regular,500,600,700,100italic,200italic,300italic,italic,500italic,600italic,700italic";/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--Bright-Blue: hsl(220, 98%, 61%);--Check-Background: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%)) no-repeat;--debug-line: 1px solid red;--Very-Light-Gray: hsl(0, 0%, 98%);--Very-Light-Grayish-Blue: hsl(236, 33%, 92%);--Light-Grayish-Blue: hsl(233, 11%, 84%);--Dark-Grayish-Blue: hsl(236, 9%, 61%);--Very-Dark-Grayish-Blue: hsl(235, 19%, 35%);--Very-Dark-Blue: hsl(235, 21%, 11%);--Very-Dark-Desaturated-Blue: hsl(235, 24%, 19%);--Light-Grayish-Blue: hsl(234, 39%, 85%);--Light-Grayish-Blue-hover: hsl(236, 33%, 92%);--Dark-Grayish-Blue: hsl(234, 11%, 52%);--Very-Dark-Grayish-Blue: hsl(233, 14%, 35%);--Very-Dark-Grayish: hsl(237, 14%, 26%);--font-wgt-sm: 400;--font-wgt-lg: 700;--txt-xsm: .8rem;--txt-sm: 1rem;--txt-xsmd: 1.2rem;--txt-smd: 1.4rem;--txt-md: 1.6rem;--txt-xmd: 1.8rem;--txt-lg: 2rem;--txt-xlg: 2.4rem;--background-image: url(/assets/bg-mobile-dark-DBhZPurk.jpg)}.dark-light-mode{--Very-Dark-Blue: hsl(236, 33%, 92%);--Very-Dark-Desaturated-Blue: hsl(0, 0%, 98%);--Light-Grayish-Blue: hsl(233, 14%, 35%);--Very-Light-Grayish-Blue: hsl(235, 19%, 35%);--Very-Dark-Grayish-Blue: hsl(233, 11%, 84%);--background-image: url(/assets/bg-mobile-light-eXTHhUPU.jpg)}html{font-family:Josefin Sans,sans-serif;font-size:62.5%}body{background-color:var(--Very-Dark-Blue)}#head-section{background-image:var(--background-image);background-repeat:no-repeat;background-size:cover;min-height:clamp(150px,35vh,250px)}#main-section{display:flex;justify-content:center}#main-section-container{width:100%;max-width:800px;position:absolute;left:50%;transform:translate(-50%);top:8.8%;padding:0 2rem}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.8rem}header h2{color:var(--Very-Light-Gray);font-size:3.5rem;letter-spacing:.5rem}header img{width:100%;max-width:2.5rem;transition:transform .2s ease;cursor:pointer}#input-container{position:relative;margin-bottom:2rem}#addtodoitem{width:100%;height:6rem;font-size:var(--txt-md);background-color:var(--Very-Dark-Desaturated-Blue);border:none;padding-left:5rem;color:var(--Light-Grayish-Blue);border-radius:7px;outline:none}#input-container:after{content:"";position:absolute;height:2rem;width:2rem;border-radius:50%;border:1px solid var(--Very-Dark-Grayish-Blue);top:50%;left:15px;transform:translateY(-50%)}.todo-item{background-color:var(--Very-Dark-Desaturated-Blue);list-style-type:none;display:flex;justify-content:space-between;align-items:center;padding:2rem 1.5rem;border-bottom:1.5px solid var(--Very-Dark-Grayish-Blue)}.todo-item:first-child{border-radius:7px 7px 0 0}.todo-item-txt-container{display:flex;align-items:end}input[type=checkbox]{height:2rem;width:2rem;border-radius:50%;border:1px solid var(--Very-Dark-Grayish-Blue);-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;position:relative;margin-right:1.5rem;transition:background .2s ease}input[type=checkbox]:checked{background:var(--Check-Background)}input[type=checkbox]:checked:after{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='9'%3e%3cpath%20fill='none'%20stroke='%23FFF'%20stroke-width='2'%20d='M1%204.304L3.696%207l6-6'/%3e%3c/svg%3e");font-weight:var(--font-wgt-lg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.todo-item-txt-container p{font-size:var(--txt-smd);color:var(--Very-Light-Grayish-Blue);cursor:pointer}.remove-todo-btn{background:none;border:none;max-width:2rem;display:flex;align-items:center;transition:transform .2s ease,visibility .2s ease-in-out;cursor:pointer}.remove-todo-btn img{width:100%}#toggle-todo-section-container{display:grid;grid-template-columns:repeat(3,1fr);row-gap:2rem;margin-bottom:2rem}#toggle-todo-section-container button{border:none}#todo-active-state-toggle{grid-column:1/4;display:flex;justify-content:center;background-color:var(--Very-Dark-Desaturated-Blue);gap:1.5rem;padding:1.8rem 0;border-radius:7px}#todo-active-state-toggle>button{background:none;font-size:var(--txt-md);font-weight:var(--font-wgt-lg);color:var(--Very-Dark-Grayish-Blue);cursor:pointer}#todolist-counter{grid-column:1/3;background-color:var(--Very-Dark-Desaturated-Blue);padding:2rem 0 2rem 2rem;border-radius:0 0 0 7px;color:var(--Very-Dark-Grayish-Blue);font-size:var(--txt-smd)}#clear-completed-btn{grid-column:3/4;grid-row:1/2;display:flex;justify-content:end;padding:2rem 2rem 2rem 0;border-radius:0 0 7px;border:none;background-color:var(--Very-Dark-Desaturated-Blue);color:var(--Very-Dark-Grayish-Blue);font-size:var(--txt-smd);cursor:pointer;white-space:nowrap}#drag-drop{text-align:center;font-weight:var(--font-wgt-lg);font-size:var(--txt-smd);color:var(--Dark-Grayish-Blue)}.active-state{color:var(--Bright-Blue)!important}.checkcomplete{text-decoration:line-through;color:var(--Very-Dark-Grayish-Blue)!important}@media screen and (min-width: 34rem){:root{--background-image: url(/assets/bg-desktop-dark-DzAvO98h.jpg)}.dark-light-mode{--background-image: url(/assets/bg-desktop-light-BIdKokTn.jpg)}#head-section{background-image:var(--background-image)}.todo-item-txt-container p{font-size:var(--txt-md)}#toggle-todo-section-container{background-color:var(--Very-Dark-Desaturated-Blue);border-radius:0 0 7px 7px}#todo-active-state-toggle{grid-column:2/3;grid-row:1/2;border-radius:0;border:none;gap:1.5rem;background:none}#todolist-counter{grid-column:1/2;grid-row:1/2;background:none;font-size:var(--txt-md)}#clear-completed-btn{grid-column:3/4;grid-row:1/2;background:none;font-size:var(--txt-md)}}@media not (hover: none){#clear-completed-btn:hover,#todo-active-state-toggle>button:hover{transition:color .3s ease;color:var(--Light-Grayish-Blue-hover)}.remove-todo-btn:hover{transform:scale(.8)}.remove-todo-btn{visibility:hidden}.todo-item:hover .remove-todo-btn{visibility:visible}input[type=checkbox]:hover{background-color:var(--Very-Dark-Grayish-Blue)}header img:hover{transform:scale(.85)}}@media (prefers-color-scheme: light){:root{--Very-Dark-Blue: hsl(236, 33%, 92%);--Very-Dark-Desaturated-Blue: hsl(0, 0%, 98%);--Light-Grayish-Blue: hsl(233, 14%, 35%);--Very-Light-Grayish-Blue: hsl(235, 19%, 35%);--Very-Dark-Grayish-Blue: hsl(233, 11%, 84%);--background-image: url(/assets/bg-mobile-light-eXTHhUPU.jpg)}}@media (prefers-color-scheme: light) and (min-width: 34rem){:root{--background-image: url(/assets/bg-desktop-light-BIdKokTn.jpg)}}