:root{--primary:#ea40a4;--business:#3a82ee;--personal:var(--primary);--light:#eee;--grey:#888;--dark:#313154;--danger:#ff5b57;--shadow:0 1px 3px #0000001a;--business-glow:0px 0px 4px #3a82eebf;--personal-glow:0px 0px 4px #ea40a4bf}*{box-sizing:border-box;margin:0;padding:0;font-family:montserrat,sans-serif}input:not([type=radio]):not([type=checkbox]),button{appearance:none;cursor:initial;background:0 0;border:none;outline:none}body{background:var(--light);color:var(--dark)}section{margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;padding-right:1.5rem}h3{color:var(--dark);margin-bottom:.5rem;font-size:1rem;font-weight:400}h4{color:var(--grey);margin-bottom:.5rem;font-size:.875rem;font-weight:700}.greeting .title{display:flex}.greeting .title input{flex:1;min-width:0;margin-left:.5rem}.greeting .title,.greeting .title input{color:var(--dark);font-size:1.5rem;font-weight:700}.create-todo input[type=text]{width:100%;color:var(--dark);box-shadow:var(--shadow);background-color:#fff;border-radius:.5rem;margin-bottom:1.5rem;padding:1rem 1.5rem;font-size:1.125rem;display:block}.create-todo .options{grid-gap:1rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem;display:grid}.create-todo .options label{box-shadow:var(--shadow);cursor:pointer;background-color:#fff;border-radius:.5rem;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;display:flex}input[type=radio],input[type=checkbox]{display:none}.bubble{border:2px solid var(--business);width:20px;height:20px;box-shadow:var(--business-glow);border-radius:50%;justify-content:center;align-items:center;display:flex}.bubble.personal{border-color:var(--personal);box-shadow:var(--personal-glow)}.bubble:after{content:"";opacity:0;background-color:var(--business);width:0;height:0;box-shadow:var(--business-glow);border-radius:50%;transition:all .2s ease-in-out;display:block}.bubble.personal:after{background-color:var(--personal);box-shadow:var(--personal-glow)}input:checked~.bubble:after{opacity:1;width:10px;height:10px}.create-todo .options label div{color:var(--dark);margin-top:1rem;font-size:1.125rem}.create-todo input[type=submit]{color:#fff;background-color:var(--primary);width:100%;box-shadow:var(--personal-glow);cursor:pointer;border-radius:.5rem;padding:1rem 1.5rem;font-size:1.125rem;transition:all .2s ease-in-out;display:block}.create-todo input[type=submit]:hover{opacity:.75}.todo-list .list{margin:1rem 0}.todo-list .todo-item{box-shadow:var(--shadow);background-color:#fff;border-radius:.5rem;align-items:center;margin-bottom:1rem;padding:1rem;display:flex}.todo-item label{cursor:pointer;margin-right:1rem;display:block}.todo-item .todo-content{flex:1}.todo-item .todo-content input{color:var(--dark);font-size:1.125rem}.todo-item .actions{align-items:center;display:flex}.todo-item .actions button{color:#fff;cursor:pointer;border-radius:.25rem;padding:.5rem;transition:all .2s ease-in-out;display:block}.todo-item .actions .edit{background-color:var(--primary)}.todo-item .actions .delete{background-color:var(--danger)}.todo-item.done .todo-content input{color:var(--gray);text-decoration:line-through}.app{align-items:center;width:400px;height:auto;margin:0 auto}