:root{--primary: #8707ff;--business: #3aee46;--yellow: #ff6a13;--personal: var(--yellow);--light: #eee;--grey: #888;--dark: #313154;--danger: hsl(345deg 100% 47%);--custom-dark: #1f1f20;--custom-grey: #3e3e3d;--shadow: 0 1px 3px rgba(0, 0, 0, .1)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1d1d1d}::-webkit-scrollbar-thumb{background:#8b8b8b;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#dcdcdc}*{margin:0;padding:0;box-sizing:border-box;font-family:montserrat,sans-serif;text-decoration:none}input:not([type="radio"]):not([type="checkbox"]),button{appearance:none;border:none;outline:none;background:none;cursor:initial}body{background:var(--custom-dark);color:var(--light)}section{margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;padding-right:1.5em}h3{color:var(--light);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(--light);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(--light);background-color:var(--custom-grey);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:var(--custom-grey);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-primary)}.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(--light);font-size:1.125rem;margin-top:1rem}.create-todo input[type=submit]{display:block;font-size:1.125rem;padding:1rem 1.5rem;color:var(--light);background-color:var(--primary);border-radius:.5rem;box-shadow:var(--personal-primary);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:var(--custom-grey);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(--white);font-size:1.125rem}.todo-item .actions{display:flex;align-items:center}.todo-item .actions button{display:block;padding:.5rem;border-radius:.25rem;color:var(--custom-grey);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);color:var(--light)}.todo-item.done .todo-content input{text-decoration:line-through;color:var(--grey)}.py-1{padding:1rem 0}.py-2{padding:0 0 2rem}.py-5{padding:5rem 0}.text-center{display:flex;justify-content:center;align-items:center}.btn-container{width:fit-content;height:fit-content;position:relative}.svg{position:absolute;top:50%;left:50%;z-index:-1;transform:translate(-50%,-50%);transition:.5s}.btn{background-color:#2b4eff;z-index:10;color:#fff;padding:.5rem 2rem;font-size:1.2rem;font-weight:700;border-radius:.5rem;transition:.2s;cursor:pointer}.btn-container:hover{box-shadow:#427dc2cc 0 0 54px}.btn:hover{outline:#2b4eff solid 2px;background-color:#212121}.btn-container:hover>.svg-1{transform:translate(130%,50%)}.btn-container:hover>.svg-2{transform:translate(-120%,-150%) rotate(30deg)}.btn-container:hover>.svg-3{transform:translate(60%,-150%) rotate(-45deg)}.btn-container:hover>.svg-4{transform:translate(-280%) rotate(30deg)}.btn-container:hover>.svg-5{transform:translate(-80%,60%) rotate(-45deg)}.btn:active{transform:scale(1.05)}.button-delete{display:inline-block;position:relative;border:none;background:transparent;padding:0;cursor:pointer;outline-offset:4px;transition:filter .25s;user-select:none;touch-action:manipulation}.shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:hsl(0deg 0% 0% / .25);will-change:transform;transform:translateY(2px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:linear-gradient(to left,hsl(340deg 100% 16%) 0%,hsl(340deg 100% 32%) 8%,hsl(340deg 100% 32%) 92%,hsl(340deg 100% 16%) 100%)}.front{display:block;position:relative;padding:12px 27px;border-radius:12px;font-size:1.1rem;color:#fff;background:hsl(345deg 100% 47%);will-change:transform;transform:translateY(-4px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.button-delete:hover{filter:brightness(110%)}.button-delete:hover .front{transform:translateY(-6px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.button-delete:active .front{transform:translateY(-2px);transition:transform 34ms}.button-delete:hover .shadow{transform:translateY(4px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.button-delete:active .shadow{transform:translateY(1px);transition:transform 34ms}.button-delete:focus:not(:focus-visible){outline:none}.p1{padding:1rem}.button-add-todo{display:inline-block;position:relative;border:none;background:transparent;padding:0;cursor:pointer;outline-offset:4px;transition:filter .25s;user-select:none;touch-action:manipulation}.button-add-todo .shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:hsl(0deg 0% 0% / .25);will-change:transform;transform:translateY(2px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.button-add-todo .edge{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:linear-gradient(to left,hsl(290,100%,16%) 0%,hsl(290,100%,32%) 8%,hsl(288,100%,32%) 92%,hsl(286,100%,16%) 100%)}.button-add-todo .front{display:block;position:relative;padding:12px 27px;border-radius:12px;font-size:1.1rem;color:#fff;background:hsl(290,100%,47%);will-change:transform;transform:translateY(-4px);transition:transform .6s cubic-bezier(.3,.7,.4,1)}.button-add-todo:hover{filter:brightness(110%)}.button-add-todo:hover .front{transform:translateY(-6px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.button-add-todo:active .front{transform:translateY(-2px);transition:transform 34ms}.button-add-todo:hover .shadow{transform:translateY(4px);transition:transform .25s cubic-bezier(.3,.7,.4,1.5)}.button-add-todo:active .shadow{transform:translateY(1px);transition:transform 34ms}.button-add-todo:focus:not(:focus-visible){outline:none}.wrapper{display:grid;place-items:center}.typing-demo{width:19ch;animation:typing 2s steps(18),blink .5s step-end infinite alternate;white-space:nowrap;overflow:hidden;border-right:3px solid;font-family:monospace;font-size:2em}@keyframes typing{0%{width:0}}@keyframes blink{50%{border-color:transparent}}.modal{position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background-color:#333;color:#fff;padding:20px;border-radius:5px;box-shadow:0 5px 15px #00000080;max-width:600px;width:90%;position:relative}.close-button{position:absolute;top:10px;right:10px;font-size:1.5rem;color:#fff;background-color:transparent;border:none;outline:none;cursor:pointer}body.modal-open{overflow:hidden}.button-row{display:flex;justify-content:center;align-items:center;margin-top:20px}.button-row button:first-child{margin-right:10px}.button-row button:last-child{margin-left:10px}.button-row button{background-color:var(--custom-dark);color:#fff;border:none;padding:10px 20px;border-radius:4px;font-size:16px;margin:0 10px;cursor:pointer;transition:all .3s ease;display:flex;justify-content:center;align-items:center}.button-row button:hover{background-color:#555}