@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap";:root{--width-mobile: 375px;--width-desktop: 1440px;--header-height-mobile: 250px;--header-height-desktop: 250px;--color-bg: hsl(235, 21%, 11%);--color-surface: hsl(235, 24%, 19%);--color-text: hsl(234, 39%, 85%);--color-secondary: hsl(236, 33%, 92%);--color-border: hsl(233, 14%, 35%);--color-gray-600: hsl(236, 9%, 61%);--color-blue-500: hsl(220, 98%, 61%);--color-check-bg: linear-gradient(hsl(192, 100%, 67%), hsl(280, 87%, 65%));--font-size-18: 1.125rem;--font-size-16: 1rem;--font-family: "Josefin Sans", sans-serif;--font-weight-regular: 400;--font-weight-bold: 700}.light-theme{--color-bg: hsl(0, 0%, 98%);--color-surface: hsl(0, 0%, 100%);--color-text: hsl(235, 19%, 35%);--color-secondary: hsl(233, 11%, 84%);--color-border: hsl(233, 11%, 84%);--color-gray-600: hsl(236, 9%, 61%)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-16)}.container{margin-left:auto;margin-right:auto;max-width:600px;width:100%;padding-left:1.5rem;padding-right:1.5rem}hr{box-sizing:content-box;height:0;overflow:visible}input{font:inherit;color:inherit;background:none;border:none;outline:none}button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.header{position:relative;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;min-height:var(--header-height-mobile)}.header.dark{background-image:url(/todo-app/images/bg-mobile-dark.jpg)}.header.light{background-image:url(/todo-app/images/bg-mobile-light.jpg)}.header h1{position:relative;letter-spacing:.1em;color:var(--color-secondary);font-weight:var(--font-weight-bold)}.header-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding-top:calc(var(--header-height-mobile) / 4)}main.container{position:relative;z-index:2;margin-top:calc(-1 * var(--header-height-mobile) / 2)}input{width:100%;padding:1.2rem;background:var(--color-surface);border-radius:5px;color:var(--color-text);box-shadow:0 1px 3px #00000014;text-indent:.5rem;caret-color:var(--color-blue-500)}.todo-list{list-style:none;margin-top:1.5rem;border-radius:5px;overflow:hidden;min-height:calc(var(--header-height-mobile) - 100px)}.todo-list.no-bottom-radius{border-bottom:1px solid var(--color-border);border-radius:5px 5px 0 0}.todo-list li{display:flex;justify-content:space-between;align-items:center;padding:1.2rem;background:var(--color-surface);box-shadow:0 1px 3px #00000014}.todo-list li .delete-button{margin-left:1rem}.todo-list li.radius-bottom{border-radius:0 0 5px 5px}.todo-list li.border-bottom{border-bottom:1px solid var(--color-border)}.todo-left{display:flex;align-items:center;gap:.75rem;min-width:0}.todo-text{flex:1 1 0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.todo-text.completed{text-decoration:line-through;color:var(--color-gray-600)}.todo-list-footer{display:grid;grid-template-areas:"left clear" "filters filters";grid-template-columns:1fr auto;align-items:center;color:var(--color-gray-600)}.todo-list-footer .left,.todo-list-footer .clear{border-radius:0 0 5px 5px;background-color:var(--color-surface);padding:1.2rem}.todo-list-footer .left.no-top-radius,.todo-list-footer .clear.no-top-radius{border-radius:0 0 5px 5px}.left{border-radius:5px 0 0 5px;box-shadow:0 1px 3px #00000014}.clear{border-radius:0 5px 5px 0;box-shadow:0 1px 3px #00000014}.filters{grid-area:filters;justify-content:center;display:flex;gap:1rem;margin-top:1.5rem;border-radius:5px;padding:1.2rem;background-color:var(--color-surface);box-shadow:0 1px 3px #00000014;font-size:var(--font-size-18)}.filters button{color:var(--color-gray-600)}.filters button.active{color:var(--color-blue-500)}.dark-mode-toggle{position:relative;z-index:10}.circle-checkbox{width:24px;height:24px;border-radius:50%;border:2px solid var(--color-border);background:var(--color-surface);margin-right:.25rem;cursor:pointer;transition:border-color .2s,background .2s}.circle-checkbox:hover{border:2px solid transparent;background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,var(--color-check-bg) border-box}.circle-checkbox.checked{background:var(--color-check-bg);border:none}.circle-checkbox img{width:10px;height:10px}@media (min-width: 1440px){body{font-size:var(--font-size-18)}.container{margin-left:auto;margin-right:auto}.header{min-height:var(--header-height-desktop)}.header-content{padding-top:calc(var(--header-height-desktop) / 4)}.header.dark{background-image:url(/todo-app/images/bg-desktop-dark.jpg)}.header.light{background-image:url(/todo-app/images/bg-desktop-light.jpg)}main.container{margin-top:calc(-1 * var(--header-height-desktop) / 2)}.todo-list{min-height:calc(var(--header-height-desktop) - 90px)}.todo-list-footer{grid-template-areas:"left filters clear";grid-template-columns:auto 1fr auto;background-color:var(--color-surface);padding:0 1.2rem;font-size:var(--font-size-16);box-shadow:0 1px 3px #00000014;border-radius:5px}.todo-list-footer .left{grid-area:left;padding:0;box-shadow:none}.todo-list-footer .filters{grid-area:filters;justify-self:center;margin-top:0;box-shadow:none;font-size:var(--font-size-16)}.todo-list-footer .clear{grid-area:clear;justify-self:end;padding:0;box-shadow:none}.filters button:hover,.todo-list-footer .clear:hover{color:var(--color-text)}}