*{margin:0;padding:0;box-sizing:border-box}html,body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:gray}.App{max-width:50rem;max-height:auto;height:100%;background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px #0000001a}.edit-title-btn{background-color:#f0f0f0;border:none;padding:10px;border-radius:1px;cursor:pointer;transition:background-color .3s;margin:.5rem 0}.edit-title-btn:hover{background-color:#e0e0e0}.edit-title-input{width:100%;padding:10px;border:1px solid #e0e0e0;border-radius:5px;margin:5px 0}.edit-title-input:focus{border:1px solid #000}.sort-text{font-size:1.5rem;margin:1rem .5rem 0 0}.sort-select{font-size:1rem;padding:.2rem;border:1px solid #000;border-radius:5px;cursor:pointer}.todo-form{display:flex;justify-content:center}.todo-input{margin-top:20px;display:flex;justify-content:center;align-items:center;width:100%;padding:10px;border-radius:5px;font-size:16px;transition:border-color .3s}.todo-sub-btn{margin-top:20px;padding:10px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}.todo-sub-btn:hover{background-color:#f0f0f0}.todo-list{margin-top:20px;list-style:none;overflow-y:scroll;max-height:30rem;max-width:auto;width:auto;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.todo-list::-webkit-scrollbar{width:10px}.todo-list::-webkit-scrollbar-thumb{background-color:#e0e0e0;border-radius:5px}.todo-list::-webkit-scrollbar-track{background-color:#f0f0f0}.todo-list::-webkit-scrollbar-thumb:hover{background-color:#d0d0d0}.todo-list::-webkit-scrollbar-thumb:active{background-color:silver}.todo-checkbox{margin-right:20px;cursor:pointer;position:relative;display:inline-block;width:20px;height:20px;background-color:#eee;border-radius:50%;vertical-align:middle;transition:background-color .3s}.todo-checkbox:after{content:"";position:absolute;display:none}.todo-checkbox:checked:after{display:block;top:3px;left:7px;width:6px;height:12px;border:solid #000;border-width:0 3px 3px 0;transform:rotate(45deg)}.todo-item{display:flex;justify-content:space-between;align-items:center;border:1px solid #e0e0e0;padding:10px;margin:5px 0;border-radius:5px;transition:background-color .3s;flex-direction:row}.todo-item:hover{background-color:#f0f0f0}.todo-timestamp{font-size:.8rem;margin:0 5px;color:#666}.item-text{font-size:1.2rem;margin:0 10px;flex:1}.btn-wrapper{display:flex;justify-content:center;align-items:center}.todo-btn-remove{background-color:red;color:#fff;border:none;padding:5px;border-radius:1px;cursor:pointer;transition:background-color .3s}.todo-btn-remove:hover{background-color:#8b0000}.todo-btn-move-up{background-color:#f0f0f0;border:none;padding:5px;border-radius:1px;cursor:pointer;transition:background-color .3s}.todo-btn-move-up:hover{background-color:#e0e0e0}.todo-btn-move-down{background-color:#f0f0f0;border:none;padding:5px;border-radius:1px;cursor:pointer;transition:background-color .3s}.todo-btn-move-down:hover{background-color:#e0e0e0}