@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap";*{margin:0;padding:0;border:0;font-size:inherit;text-decoration:none;font:inherit;color:inherit}article,figure,footer,header,menu,nav,section{display:block}body{line-height:1}body *{max-width:100%}ol,ul{list-style:none}input:focus{outline:none}:root{font-family:Josefin Sans,sans-serif;font-size:18px;--primary: hsl(220, 98%, 61%);--gradient: linear-gradient(135deg, hsl(192, 100%, 67%), hsl(280, 87%, 65%));--regular-weight: 400;--bold-weight: 700;--light-background-color: hsl(0, 0%, 98%);--light-checkbox-color: hsl(236, 33%, 92%);--light-faded-color: hsl(233, 11%, 84%);--light-subtitle-color: hsl(236, 9%, 61%);--light-text-color: hsl(235, 19%, 35%);--light-card-color: hsl(0, 0%, 100%);--dark-background-color: hsl(235, 21%, 11%);--dark-card-color: hsl(235, 24%, 19%);--dark-text-color: hsl(234, 39%, 85%);--dark-subtitle-color-hover: hsl(236, 33%, 92%);--dark-subtitle-color: hsl(234, 11%, 52%);--dark-faded-color: hsl(233, 14%, 35%);--dark-checkbox-color: hsl(237, 14%, 26%);--light-desktop-bg: url(/bg-desktop-light.jpg);--light-mobile-bg: url(/bg-mobile-light.jpg);--dark-desktop-bg: url(/bg-desktop-dark.jpg);--dark-mobile-bg: url(/bg-mobile-dark.jpg);font-weight:var(--regular-weight)}.light{--background-color: var(--light-background-color);--checkbox-color: var(--light-faded-color);--faded-color: var(--light-subtitle-color);--subtitle-color: var(--light-subtitle-color);--subtitle-color-hover: var(--light-text-color);--text-color: var(--light-text-color);--card-color: var(--light-card-color);--desktop-bg: var(--light-desktop-bg);--mobile-bg: var(--light-mobile-bg)}.dark{--background-color: var(--dark-background-color);--checkbox-color: var(--dark-checkbox-color);--faded-color: var(--dark-faded-color);--subtitle-color: var(--dark-subtitle-color);--subtitle-color-hover: var(--dark-subtitle-color-hover);--text-color: var(--dark-text-color);--card-color: var(--dark-card-color);--desktop-bg: var(--dark-desktop-bg);--mobile-bg: var(--dark-mobile-bg)}body{background:var(--desktop-bg) var(--background-color);background-repeat:no-repeat;background-size:100% auto;font-size:1.125rem;color:var(--text-color)}@media (max-width: 50rem){body{background:var(--mobile-bg) var(--background-color);background-repeat:no-repeat;background-size:100% auto;font-size:.825rem}}input::placeholder{color:var(--subtitle-color)}#app{position:relative;width:100%;max-width:40rem;min-height:calc(100vh - 7rem);margin:0 auto;padding-bottom:7rem}#app>*{margin-inline:1rem}.row{display:flex;justify-content:space-between;align-items:center}.inner-row{display:flex;justify-content:center;flex-grow:1;gap:1.5rem}@media (max-width: 50rem){.inner-row{display:none}}.card{border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;background:var(--card-color)}h1{font-weight:var(--bold-weight);color:#fff;padding-top:.5rem;font-size:clamp(1.5rem,2.5vw,2.5rem);letter-spacing:1rem}.footer{position:absolute;bottom:0;left:1rem;right:1rem;text-align:center;margin:3rem 0;font-size:.75rem;color:var(--subtitle-color)}@media (max-width: 50rem){.footer{font-size:.625rem}}.bold{font-weight:var(--bold-weight)}.topbar{padding:4rem 0 1rem}.topbar img{cursor:pointer}.todo-input{margin:1.5rem 0}@media (max-width: 50rem){.topbar{padding:1.75rem .5rem .5rem}.todo-input{margin:1rem 0}}.todo-item{display:flex;gap:1.5rem;align-items:center;padding:.75rem 1.5rem}.todo-item .cross{opacity:0}@media (max-width: 50rem){.todo-item{gap:1rem;padding:.5rem 1rem}.todo-item .cross{opacity:1;width:15px;height:15px}}.todo-item:hover{cursor:pointer}.todo-item:hover .cross{opacity:1}.todo-item:hover .checkbox{border:solid 2px transparent;background-image:linear-gradient(var(--card-color),var(--card-color)),var(--gradient);background-origin:border-box;background-clip:content-box,border-box}.todo-item:hover .checked{background-image:var(--gradient),var(--gradient)}.todo-item p{flex-grow:1;line-height:1.25;padding:.5rem 0}.crossed{text-decoration:line-through;color:var(--faded-color)}.todo-list>.todo-item{border-bottom:1.5px solid var(--checkbox-color)}@media (max-width: 50rem){.todo-list>.todo-item{border-bottom:1px solid var(--checkbox-color)}}.todo-list>.todo-item:last-child{border:none}.input{padding:.5rem 0;flex-grow:1;background-color:transparent}.checkbox{flex:none;width:1.375rem;height:1.375rem;border:2px solid var(--checkbox-color);border-radius:100vmax}.checkbox img{width:.725rem;height:.725rem;padding:.325rem;opacity:0}.checked{flex:none;background-image:var(--gradient),var(--gradient);border:solid 2px transparent;background-origin:border-box;background-clip:content-box,border-box}.checked img{opacity:1}.menu{padding:1.5rem 1.5rem 1rem;color:var(--subtitle-color);font-size:1rem}.detached-menu{display:none}@media (max-width: 50rem){.menu{padding:1rem 1rem .75rem;font-size:.75rem}.detached-menu{display:flex;margin-top:1rem;padding:1rem 1rem .75rem;font-size:.75rem;justify-content:center;gap:1rem}}.menu p:hover,.detached-menu p:hover{cursor:pointer;color:var(--subtitle-color-hover)}.menu-active{color:var(--primary)}