.todo-list{font-family:Arial,Helvetica,sans-serif;background-color:#f4f4f4;text-align:center;padding:20px;border-radius:5px;box-shadow:0 2px 5px #0000001a}h1{font-size:4rem;color:#333;margin-bottom:20px}button{background-color:#2844a7;color:#fff;border:none;padding:10px 20px;font-size:1.2rem;border-radius:5px;cursor:pointer}li{list-style:none;margin:20px 0;font-size:1.5rem;color:#555;background-color:#fafafa}button:hover{background-color:#217c88}.todo-item{background-color:#fff;padding:15px;margin:10px 0;border-radius:5px;box-shadow:0 1px 3px #0000001a;display:flex;justify-content:space-between;align-items:center}.add-todo{display:flex;justify-content:center;margin-bottom:20px}.add-todo input{padding:10px;font-size:1.5rem;border:1px solid #ccc;border-radius:5px;margin-right:10px}.add-todo button{padding:10px 20px;font-size:1.5rem;background-color:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-left:30px}.add-todo button:hover{background-color:#218838}.todo-item button{background-color:#dc3545;color:#fff;border:none;padding:5px 10px;font-size:1.2rem;border-radius:5px;cursor:pointer}.todo-item button:hover{background-color:#c82333}.delete-button{background-color:#dc3545;color:#fff;border:none;padding:5px 10px;font-size:1.2rem;border-radius:5px;cursor:pointer;margin-left:10px}.delete-button:hover{background-color:#c82333}.move-up-button,.move-down-button{background-color:#007bff;color:#fff;border:none;padding:5px 10px;font-size:1.2rem;border-radius:5px;margin-left:10px;cursor:pointer}.move-up-button:hover,.move-down-button:hover{background-color:#0056b3}.todo-item span{flex-grow:1;text-align:left;font-size:1.5rem;color:#333}.color-picker{margin-left:10px;margin-top:10px;border:1px solid #ccc;cursor:pointer;background-color:#f4f4f4;text-align:center;padding:20px;border-radius:5px;box-shadow:0 2px 5px #0000001a}.color-picker:hover{border-color:#007bff}.color-display{width:300px;border-radius:2%;margin-right:10px;display:inline-block;align-items:center;justify-content:center}.color-picker label{cursor:pointer;display:inline-block;border-radius:50%;margin-right:10px;border:2px solid transparent}.quote-component{background-color:#f4f4f4;text-align:center;padding:20px;border-radius:5px;box-shadow:0 2px 5px #0000001a;margin-top:20px}.quote-author{font-size:1.2rem;color:#555;margin-top:10px}.quote-text{font-size:1.5rem;color:#333;margin-bottom:10px}.modalComponent{background-color:#f4f4f4;text-align:center;padding:20px;border-radius:5px;box-shadow:0 2px 5px #0000001a;margin-top:20px}.modalOutline{font-size:1.2rem;color:#555;margin-top:10px}.modalHidden{font-size:1.5rem}.scrollbtn{display:block;margin:20px auto;padding:10px 20px;font-size:1.2rem;position:fixed}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}