@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap";:root{--background-color: white;--input-color: white;--box-shadow: 0px 35px 50px -15px rgba(194, 195, 214, .5);--task-input: #9495a5;--container-bg: white;--border-color: #e3e4f1;--task-container-paragraphs-color: #494c6b;--state-switch: white;--desktop-background-image: url(/images/bg-desktop-light.jpg);--mobile-background-image: url(/images/bg-mobile-light.jpg);--checkmark-color: white;--checked: #d1d2da;--active: #3a7cfd}[data-theme=dark]{--background-color: #171823;--checked: #4d5067;--input-color: #25273d;--box-shadow: #00000080;--task-input: #767992;--container-bg: #25273d;--border-color: #393a4b;--task-container-paragraphs-color: #c8cbe7;--state-switch: #25273d;--desktop-background-image: url(/images/bg-desktop-dark.jpg);--mobile-background-image: url(/images/bg-mobile-dark.jpg);--checkmark-color: white;--active: #3a7cfd}*{margin:0;padding:0;box-sizing:border-box;font-family:Josefin Sans,sans-serif;list-style-type:none;transition:.4s linear}.app{background-image:var(--desktop-background-image);background-color:var(--background-color);background-repeat:no-repeat;background-size:contain;height:100vh}header{display:flex;justify-content:center;align-items:center;padding-top:3rem;padding-bottom:3rem;gap:23.38rem}header img{width:1.56956rem;height:1.625rem}header img:hover{cursor:pointer}header h1{color:#fff;font-size:2.5rem;font-style:normal;font-weight:700;line-height:normal;letter-spacing:.9375rem}.input-field{position:relative;max-width:33.75rem;width:100%;margin-inline:auto}.oval-copy{width:1.5rem;height:1.5rem;color:var(--input-color);border:1px solid #e3e4f1;border-radius:50%;position:absolute;top:23%;left:5%}.oval-copy:hover{cursor:pointer}.input-todo{color:var(--task-input);padding-inline:4.5rem;margin-bottom:1.5rem;max-width:33.75rem;width:100%;margin-inline:auto;height:4rem;outline:none;border:none;border-radius:.3125rem;background:var(--background-color);box-shadow:var(--box-shadow);font-size:1.125rem;font-style:normal;font-weight:400}.todo-list-container{max-width:33.75rem;width:100%;margin-inline:auto;margin-bottom:7.19rem;border-radius:.3125rem;background:var(--background-color);box-shadow:var(--box-shadow)}.todo-item{padding-inline:1.5rem;display:flex;align-items:center;border-top:1px solid var(--border-color);padding-top:1.31rem;padding-bottom:1.5rem}.todo-item:nth-child(1){border-top:none}.todo-item input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid #ccc;border-radius:50%;cursor:pointer;outline:none;position:relative}.todo-item input[type=checkbox]:checked{background-image:linear-gradient(#5df,#c058f3);border:none}.todo-item input[type=checkbox]:checked:after{content:"✓";position:absolute;color:var(--checkmark-color);font-size:12px;left:50%;top:50%;transform:translate(-50%,-50%)}.todo-item span{color:var(--task-container-paragraphs-color);font-size:1.125rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:-.01563rem}.todo-item span{padding-left:1.5rem}.todo-item img{margin-left:auto}.todo-item span,.todo-item img{cursor:pointer}footer{display:flex;justify-content:space-between;align-items:center;padding-inline:1.5rem;border-top:1px solid var(--border-color);color:var(--task-input);font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:-.01213rem}.filters{display:flex;align-items:center;justify-content:center;gap:1.19rem;padding-block:1.25rem}.filters p:hover{cursor:pointer;color:var(--task-container-paragraphs-color);text-shadow:.5px 0 #494c6b}.active{color:var(--active)}.clear:hover{cursor:pointer;color:var(--task-container-paragraphs-color)}.summary{border-top:1px solid var(--border-color);color:#9495a5}@media screen and (max-width: 768px){header{gap:23rem}header h1{font-size:2rem;letter-spacing:.5rem}.input-field{max-width:100%;width:70%;margin-inline:auto}.todo-list-container{max-width:100%;margin-inline:auto;width:70%}footer{padding-inline:1rem}}@media screen and (max-width: 600px){header{gap:20rem}header h1{font-size:1.75rem;letter-spacing:.5rem}.input-todo,.todo-item span{font-size:.875rem}footer{padding-inline:1.2rem}.filters{gap:.5rem}.filters p:hover{font-size:.875rem}.filters p{font-size:.75rem}}@media screen and (max-width: 500px){.app{background-image:var(--mobile-background-image)}header{gap:12.25rem;padding-inline:1.5rem}.todo-list-container,.input-field{max-width:20.4375rem;width:100%;margin-inline:auto}.input-todo{height:3rem}.oval-copy{width:1.25rem;height:1.25rem;top:20%;left:5%}.todo-item{padding-block:1.05rem}.todo-item span{font-size:.75rem;padding-left:1rem}.todo-item img{max-width:.75rem;width:100%}footer{position:relative}footer span,footer .clear{font-size:.75rem}.filters{width:20.4375rem;position:absolute;font-size:.875rem;margin-top:2.8rem;top:100%;left:50%;transform:translate(-50%,-50%);background:var(--background-color);box-shadow:var(--box-shadow);border-radius:.3125rem}.summary{width:20.4375rem;font-size:.875rem;margin-inline:auto;text-align:center;background:var(--background-color);box-shadow:var(--box-shadow);border-radius:.3125rem}}@media screen and (max-width: 400px){header{gap:10rem}header h1{font-size:1.5rem;letter-spacing:.5rem}.input-todo{font-size:.75rem}.todo-item span{font-size:.625rem}footer{padding-inline:1rem}.filters p:hover{font-size:.75rem}.filters p{font-size:.625rem}}@media screen and (max-width: 350px){header{gap:8rem}.todo-list-container,.input-field{max-width:18rem;width:100%;margin-inline:auto}}@media screen and (max-width: 320px){.app{overflow:hidden}}