@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap";:root{--dark: hsl(235, 21%, 11%);--white: hsl(233, 29%, 95%)}body{margin:0;font-size:18px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color)}body.light{--background-color: var(--white);--text-color: hsl(235, 19%, 35%);--image: url(/assets/bg-desktop-light-BIdKokTn.jpg);--secondary-bg: hsl(0, 0%, 98%);--secondary-color: hsl(236, 9%, 61%);--shadow-color: hsl(236, 9%, 61%);--status-color: var(--secondary-color);--completed-task: var(--secondary-color);--border-color: hsl(236, 33%, 92%)}body.dark{--background-color: var(--dark);--text-color: hsl(234, 39%, 85%);--image: url(/assets/bg-desktop-dark-DzAvO98h.jpg);--secondary-bg: hsl(235, 24%, 19%);--secondary-color: hsl(233, 14%, 35%);--shadow-color: var(--dark);--border-color: hsl(237, 14%, 26%)}*{margin:0;padding:0;font-family:Josefin Sans;font-weight:400;color:var(--text-color)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{background:var(--image);background-repeat:no-repeat;background-size:cover auto}.container{width:40%;margin:0 auto;padding:40px 0}.header{padding-top:30px}.header>div{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center}.header>div h1{color:#fff;font-size:42px;letter-spacing:15px;font-weight:700;padding-bottom:10px}.add-todo{background-color:var(--secondary-bg);width:100%;border-radius:5px;padding:20px;display:flex;flex-flow:row wrap;justify-content:space-around;box-sizing:border-box;margin:25px 0;box-shadow:0 0 5px var(--shadow-color)}.add-todo input[type=text]{width:91%;padding:3px 0;border:none;outline:none;font-size:18px;background-color:var(--secondary-bg);font-weight:500;color:var(--text-color)}.checkbox-wrapper{position:relative;width:8%}.checkbox-wrapper input{position:absolute;opacity:0;cursor:pointer}.checkbox-wrapper .checkmark{position:absolute;top:auto;left:0;height:24px;width:24px;background-color:transparent;border-radius:50%;border:1px solid #ccc;cursor:pointer}.checkbox-wrapper .checkmark:after{position:absolute;content:"";left:8px;top:8px;height:0px;width:0px;border-radius:50%;border-width:0 3px 3px 0;opacity:1}.checkbox-wrapper input:checked~.checkmark{background:linear-gradient(#57ddff,#c058f3);border-radius:50%;opacity:1;border:none}.checkbox-wrapper input:checked~.checkmark:after{opacity:1;left:6px;top:7px;width:23px;height:18px;background: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") no-repeat;border-radius:0}.todo-list{background-color:var(--secondary-bg);border-radius:5px;margin:25px 0;box-shadow:0 0 5px var(--shadow-color);cursor:pointer}.todo-list .todo{display:flex;flex-flow:row wrap;justify-content:space-around;border-spacing:border-box;padding:22px 20px;border-bottom:1px solid var(--border-color)}.todo-list p{width:87%;padding-top:5px;font-weight:500;text-transform:capitalize}#selected-todo{color:#cacde8;text-decoration:line-through}.todo-list img{width:18px;height:18px;cursor:pointer}.todo-footer{display:flex;flex-flow:row wrap;font-size:.95rem;justify-content:space-between;padding:20px;color:var(--secondary-color)}.todo-footer div span{color:var(--secondary-color)}.status-wrapper ul{margin:0;padding:0}.status-wrapper ul li{list-style-type:none;display:inline-block;padding:0 5px;font-weight:600;color:var(--secondary-color)}.todo-status{display:none;width:100%;background-color:var(--secondary-bg);box-shadow:0 0 3px var(--shadow-color);box-sizing:border-box;text-align:center;padding:15px;font-weight:700;cursor:pointer;margin:15px 0;color:var(--secondary-color)}.todo-status ul{margin:0;padding:0}.todo-status ul li{list-style-type:none;display:inline-block;padding:0 5px;font-weight:600;color:var(--secondary-color)}footer{text-align:center}footer p{font-weight:700;font-size:.9rem;padding:20px 0;color:var(--secondary-color)}.todo-list .completed>p{color:#d2d3db;text-decoration:line-through}.active{color:#3a7bfd!important}@media screen and (max-width: 1000px){.container{width:90%;padding:30px 0}}@media screen and (max-width: 480px){body.light{--mobile-image: url(/assets/bg-mobile-light-eXTHhUPU.jpg)}body.dark{--mobile-image: url(/assets/bg-mobile-dark-DBhZPurk.jpg)}.container{padding:20px 0}body{font-size:.85rem}.app{background:var(--mobile-image) no-repeat}.add-todo input[type=text]{width:87%;font-size:.85rem;padding-top:7px}.header>div h1{font-size:35px;padding-bottom:0}.todo-list p{width:82%;padding-left:6px}.add-todo{padding:15px 12px}.checkbox-wrapper .checkmark{height:22px;width:22px}.todo-list .todo{padding:22px 15px}.todo-list img{visibility:visible;width:15px;height:15px;padding-top:5px}.todo-footer div ul{display:none}.todo-status{display:block}}@media screen and (max-width: 375px){body{font-size:.75rem}.add-todo input[type=text]{font-size:.8rem}}#darkMode{cursor:pointer}