:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary: #EA40A4;--business: #3A82EE;--personal: var(--primary);--light: #EEE;--grey: #888;--dark: #313154;--danger: #ff5b57;--shadow: 0 1px 3px rgba(0, 0, 0, .1);--business-glow: 0px 0px 4px rgba(58, 130, 238, .75);--personal-glow: 0px 0px 4px rgba(234, 64, 164, .75)}*{margin:0;padding:0;box-sizing:border-box;font-family:montserrat,sans-serif}input:not([type=radio]):not([type=checkbox]),button{appearance:none;border:none;outline:none;background:none;cursor:initial}body{background:var(--light);color:var(--dark)}section{margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;padding-right:1.5em}h3{color:var(--dark);font-size:1rem;font-weight:400;margin-bottom:.5rem}h4{color:var(--grey);font-size:.875rem;font-weight:700;margin-bottom:.5rem}.greeting .title{display:flex}.greeting .title input{margin-left:.5rem;flex:1 1 0%;min-width:0}.greeting .title,.greeting .title input{color:var(--dark);font-size:1.5rem;font-weight:700}.create-todo input[type=text]{display:block;width:100%;font-size:1.125rem;padding:1rem 1.5rem;color:var(--dark);background-color:#fff;border-radius:.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem}.create-todo .options{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1rem;margin-bottom:1.5rem}.create-todo .options label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background-color:#fff;border-radius:.5rem;box-shadow:var(--shadow);cursor:pointer}input[type=radio],input[type=checkbox]{display:none}.bubble{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--business);box-shadow:var(--business-glow)}.bubble.personal{border-color:var(--personal);box-shadow:var(--personal-glow)}.bubble:after{content:"";display:block;opacity:0;width:0px;height:0px;background-color:var(--business);box-shadow:var(--business-glow);border-radius:50%;transition:.2s ease-in-out}.bubble.personal:after{background-color:var(--personal);box-shadow:var(--personal-glow)}input:checked~.bubble:after{width:10px;height:10px;opacity:1}.create-todo .options label div{color:var(--dark);font-size:1.125rem;margin-top:1rem}.create-todo input[type=submit]{display:block;width:100%;font-size:1.125rem;padding:1rem 1.5rem;color:#fff;background-color:var(--primary);border-radius:.5rem;box-shadow:var(--personal-glow);cursor:pointer;transition:.2s ease-in-out}.create-todo input[type=submit]:hover{opacity:.75}.todo-list .list{margin:1rem 0}.todo-list .todo-item{display:flex;align-items:center;background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:var(--shadow);margin-bottom:1rem}.todo-item label{display:block;margin-right:1rem;cursor:pointer}.todo-item .todo-content{flex:1 1 0%}.todo-item .todo-content input{color:var(--dark);font-size:1.125rem}.todo-item .actions{display:flex;align-items:center}.todo-item .actions button{display:block;padding:.5rem;border-radius:.25rem;color:#fff;cursor:pointer;transition:.2s ease-in-out}.todo-item .actions button:hover{opacity:.75}.todo-item .actions .edit{margin-right:.5rem;background-color:var(--primary)}.todo-item .actions .delete{background-color:var(--danger)}.todo-item.done .todo-content input{text-decoration:line-through;color:var(--grey)}