:root{--primary:#3751a0;--primary-variant:#283976;--secondary:#fff9ac;--secondary-variant:#c2d0ff;--on-surface:#292929;--on-background:#595959;--surface:#e0e0e0;--on-primary:white;--error:#790c0c;--success:#24602a;color:var(--on-surface);font-family:Arial,Helvetica,sans-serif;font-size:16px}body,form,main,section,ul,li,.logo{box-sizing:border-box;flex-direction:column;width:100%;margin:0;padding:0;display:flex}body,main,ul,.logo{justify-content:center;align-items:center}form,main,section,li{justify-content:center;align-items:start}body{height:100%}.logo{box-shadow:0 2px 7px 0 var(--on-background)}main{gap:1rem;max-width:500px;height:100%;margin-bottom:10rem;padding:.5rem}ul{gap:1rem;list-style:none}form{gap:.3rem}input[type=text],#add-btn,select{box-sizing:border-box;width:100%;height:35px;font-family:Arial,Helvetica,sans-serif;font-size:1rem}input[type=text],select{border:1px solid var(--on-surface);border-radius:5px;padding:.4rem}#add-btn{background-color:var(--primary);color:var(--on-primary);border:none;border-radius:5px;margin-top:1rem}#add-btn:hover{background-color:var(--primary-variant)}#add-btn:focus{outline:1px double var(--on-surface);outline-offset:2px}.todo-btn{all:unset;cursor:pointer;color:var(--primary-variant);margin:0;font-size:1.1rem;font-style:italic;font-weight:600;text-decoration:underline}.todo-btn:hover{font-size:1.2rem}.todo-btn:focus{outline:1px double var(--primary-variant);outline-offset:2px}label{font-weight:800}section{background-color:var(--secondary);padding:1rem}h1{color:var(--on-background);font-size:1.2rem;font-style:italic;font-weight:800}li{background-color:var(--secondary-variant);padding:1rem;font-size:1rem}li p{margin:0;padding:0}li p:first-of-type{margin-bottom:.2rem;padding-bottom:.2rem;font-size:1.3rem;font-weight:600}.checkbox{box-sizing:border-box;flex-direction:row;justify-content:start;align-items:center;width:100%;margin:.5rem 0;padding:0;display:flex}.checkbox label{font-weight:600}.checkbox input[type=checkbox]{width:25px;height:25px;accent-color:var(--primary-variant);margin:0 .3rem 0 0;padding:0}.form-edit input[type=text]{border:none;border-bottom:1px solid var(--primary-variant);border-radius:0}.form-edit .error,form .error{color:var(--error);margin-top:.5rem;font-size:1rem;font-weight:400}.completed{background-color:var(--success);color:var(--on-primary);border:2px solid var(--on-primary);outline:2px double var(--on-primary);outline-offset:5px;border-radius:5px;margin:1rem 0;padding:.5rem 1rem}