:root{--base-color: #333974;--primary-color: #0D7AF6;--success-color: #5CB85C;--secundary-color: #FFF;--danger-color: #D9534F;--neutral-color1: #F5F5F5;--neutral-color2: #ddd;--info-color1: #555;--info-color2: #888;--info-color3: #333}body{font-family:Arial,sans-serif;background-image:radial-gradient(circle,var(--info-color2) 0%,var(--info-color3) 100%);padding:30px;color:var(--info-color3)}.app{max-width:600px;margin:0 auto;padding:.5rem 2rem;border-radius:10px;background-color:var(--neutral-color1)}h1{text-align:center}h2{margin-bottom:10px}p{margin:10px 0}input{box-sizing:border-box}.todo-list{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--info-color1)}.todo{background-color:var(--secundary-color);box-shadow:0 0 10px #0000001a;padding:10px;margin-bottom:10px;border-radius:5px;display:flex;justify-content:space-between;align-items:center}.todo .category{font-size:.8em;color:var(--info-color1)}button{background-color:var(--base-color);color:var(--secundary-color);padding:5px 10px;border:none;border-radius:3px;margin-left:5px;cursor:pointer;opacity:.8;transition:.3s}button:hover{opacity:1}button.complete{background-color:var(--success-color);color:var(--secundary-color)}button.remove{background-color:var(--danger-color);color:var(--secundary-color)}input[type=text],select{padding:5px;margin-bottom:10px;border:1px solid var(--neutral-color2);border-radius:3px;width:100%}.todo-form{padding-bottom:1.5rem}.filter,.search{border-bottom:1px solid var(--info-color);margin-bottom:1rem;padding-bottom:1rem}.filter-options{display:flex;justify-content:space-between;gap:3rem}.filter-options div{flex:1 1 0}.title{margin-left:3px}.title-color{color:var(--primary-color)}.sub-title{font-weight:700}