form h1{margin:.5em 0 .25em;font-size:var(--font-title)}form{display:flex;flex-direction:column;grid-gap:.5em;gap:.5em}.createTodo{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:2em 0 1em}figure{max-inline-size:100%;text-align:center}img{max-inline-size:80%}figcaption{font-weight:700}blockquote{margin:1em 0;padding:.8em .8em .8em 1em;background-color:var(--bg-grey-300);border-radius:var(--br);border-left:var(--border-quote);font-size:var(--font-quote);text-align:left}blockquote h3{font-style:italic}.TodoItem-loading{margin:3em 0;display:flex;padding-left:calc(50% - 45px);background-color:transparent;color:#333;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.LoaderBalls{width:90px;display:flex;justify-content:space-between}.LoaderBalls__item{width:20px;height:20px;border-radius:50%;background:var(--bg-grey-400)}.LoaderBalls__item:nth-child(2){animation:opacitychange 1s ease-in-out infinite}.LoaderBalls__item:nth-child(3){animation:opacitychange 1s ease-in-out .33s infinite}.LoaderBalls__item:first-child{animation:opacitychange 1s ease-in-out .66s infinite}@keyframes opacitychange{0%,to{opacity:0}60%{opacity:1}}.todos-container h2{text-align:center;font-size:var(--font-subtitle)}ul{overflow-y:scroll;height:22vh;display:flex;flex-direction:column;grid-gap:1em;gap:1em;padding:0}ul::-webkit-scrollbar{display:none}@media screen and (min-width:40em){ul{height:35vh}}.todo-text{background-color:var(--bg-grey-400);display:flex;align-items:center;justify-content:space-between;list-style:none;padding:.5em}input[type=checkbox]{-webkit-appearance:none;appearance:none;font:inherit;color:currentColor;width:1.45em;height:1.45em;border:.15em solid;border-radius:50%;display:grid;place-content:center;text-decoration:none}input[type=checkbox]:before{content:"";width:.65em;height:.65em;transform:scale(0);transition:transform .12s ease-in-out;color:#45a101;box-shadow:inset 1em 1em #45a101;transform-origin:bottom left;-webkit-clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox]:focus{outline:.15em solid #45a101;outline-offset:.15em}.todo-text input{cursor:pointer}.todo-list{display:flex;flex:1 1;align-items:center;grid-gap:.3em;gap:.3em;font-size:var(--font-list)}.todo-list--completed{color:grey;text-decoration:line-through}.todo-actions{margin-left:1em}.todo-actions .todo-actions-button:first-child{margin-right:.25em}.todo-actions .todo-actions-button{cursor:pointer;transition:all .3s ease}.todo-actions .edit:hover{color:#45a101}.todo-actions .delete:hover{color:red}.todo-container{background-color:var(--bg-white);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:var(--border);border-radius:var(--br);box-shadow:0 10px 20px 5px rgba(0,0,0,.09);padding:1em}:root{--bg-white:hsla(0,0%,100%,0.1);--bg-grey-100:hsla(0,0%,100%,0.15);--bg-grey-200:hsla(0,0%,100%,0.2);--bg-grey-300:hsla(0,0%,100%,0.25);--bg-grey-400:hsla(0,0%,100%,0.3);--br:5px;--border:1px solid hsla(0,0%,100%,0.5);--border-quote:3px solid hsla(0,0%,100%,0.5);--font-quote:0.6rem;--font-title:1.5rem;--font-subtitle:1rem;--font-list:0.75rem}@media only screen and (min-width:768px){:root{--font-quote:0.7rem;--font-title:1.75rem;--font-subtitle:1.25rem;--font-list:0.9rem}}body{background:url(https://i.postimg.cc/65Rh3CkW/lukas.jpg);background-size:cover;display:flex;justify-content:center;margin:0 .5em;height:100vh;font-family:"Open Sans",sans-serif}h1{text-align:center}main{max-width:600px;padding:0 14px}button,input{padding:.25em .5em;border:none;border-radius:5px;border-radius:var(--br)}input{background-color:hsla(0,0%,100%,.15);background-color:var(--bg-grey-100);outline:none}input:focus{box-shadow:0 10px 20px 5px rgba(0,0,0,.09)}input:-ms-input-placeholder{color:grey}input::placeholder{color:grey}button{cursor:pointer;background-color:hsla(0,0%,100%,.2);background-color:var(--bg-grey-200);font-weight:bolder}button:hover{background-color:hsla(0,0%,100%,.25);background-color:var(--bg-grey-300)}
/*# sourceMappingURL=main.0aedbea6.chunk.css.map */