:root{--background:white;--primary-color:#1C1D20;--secondary-color:#2083db;--accent-color:#2083db;--text-color:#F9F9F9}*{margin:0;padding:0}html{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:16pt;color:var(--text-color)}body{min-height:100vh;padding:10px;background:radial-gradient(at top right,#388CF0 0%,#388CF000 52%);background-color:#002E67;background-size:auto 800px;background-repeat:no-repeat;background-position:top right;display:flex;flex-direction:column;align-items:center}h1{margin-top:5px;font-size:2rem;font-weight:800;text-align:center;color:white}p{margin-top:5px;margin-bottom:44px;font-size:1rem;font-weight:400;text-align:center;color:white;}.wrapper{width:700px;max-width:100%;display:flex;flex-direction:column;gap:10px}#todo-input{box-sizing:border-box;padding:12px 20px;width:100%;background:none;border:2px solid var(--secondary-color);border-radius:1000px;font:inherit;color:var(--text-color);caret-color:var(--accent-color)}#todo-input:focus{outline:none}form{position:relative}#add-button{position:absolute;top:0;right:0;background-color:var(--accent-color);height:100%;padding:0 30px;border:none;border-radius:1000px;font:inherit;font-weight:600;color:var(--background);cursor:pointer}.todo{margin-bottom:10px;padding:0 16px;background-color:#202c3c;border-radius:15px;display:flex;align-items:center}.todo .todo-text{padding:15px;padding-right:0;flex-grow:1;transition:200ms ease}.delete-button{padding:3px;background:none;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer}.delete-button svg{transition:200ms ease}.delete-button:hover svg{fill:#ff0033}.custom-checkbox{border:2px solid var(--accent-color);border-radius:50%;min-height:20px;min-width:20px;display:flex;justify-content:center;align-items:center;flex-shrink:0;transition:200ms ease;cursor:pointer}input::placeholder{color:rgba(255,255,255,.438)}input[type="checkbox"]:checked ~ .custom-checkbox{background-color:var(--accent-color)}input[type="checkbox"]:checked ~ .custom-checkbox svg{fill:var(--primary-color)}input[type="checkbox"]:checked ~ .todo-text{text-decoration:line-through;color:var(--secondary-color)}input[type="checkbox"]{display:none}@media(max-width:500px){html{font-size:12pt}#add-button{position:unset;width:100%;margin-top:10px;padding:15px;height:auto}h1{margin-top:50px;font-size:10vw}}