html{font-size:62.5%}body{margin:0;background-color:#222}.container{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;background-color:#222;width:95%;margin:0 auto;display:flex;justify-content:center}.todo-list-container{display:flex;flex-direction:column;width:1100px}.todo-completed-percentage{text-align:center;color:#444;font-size:2.6rem;margin-top:30px;margin-bottom:30px}.empty-input-message{color:#ff4d4d}.all-completed-text{color:#99ff99b3;font-size:2.3rem}.todo-list-top-part{display:flex;justify-content:center;margin:0 auto;width:90vw}.todo-list-input{font-weight:700;background-color:transparent;max-width:53rem;flex:1;border:3px aliceblue solid;color:#f0f8ff;border-radius:10px;padding:1em;font-size:1.5rem;transition:box-shadow .25s ease}.todo-list-input:hover,.todo-list-input:focus{box-shadow:0 0 30px #f5fcff33}.add-button{font-size:1.4rem;font-weight:700;color:#f0f8ff;background-color:transparent;border:3px aliceblue solid;cursor:pointer;height:4em;border-radius:10px;margin-left:1em;max-width:6em;min-width:6em;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}.add-button:hover{background-color:#f0f8ff;box-shadow:0 0 20px #cef9;color:#222}.todo-list{padding:1.2em;display:flex;flex-direction:column;margin-top:1.2em;color:#f0f8ff;border:solid 3px aliceblue;border-radius:10px;font-size:2rem;transition:box-shadow .25s ease;gap:1em}.todo-list:hover{box-shadow:0 0 50px #cef3}.empty-todo-text{color:gray}.todo-item{max-width:100%;display:flex;flex-direction:column;align-items:center}.todo-text-and-checkbox,.todo-item-buttons{margin:0;gap:.4em;display:flex;align-items:center}.todo-checkbox{cursor:pointer;width:2em;height:2em;accent-color:lightgreen}.todo-checkbox:checked{box-shadow:0 0 14px #b3ff6680}.todo-text{margin:0;width:90%}.todo-item-buttons{margin-top:1em}.completed-todo-text{text-decoration-line:line-through;text-decoration-color:#444;color:#444}.todo-editing-input{flex:1;font-size:2rem;border:solid aliceblue;border-radius:10px;padding-left:.6em;background-color:transparent;color:#f0f8ff}.move-todo-down-button,.move-todo-up-button{display:flex;cursor:pointer;padding:.5em;border-radius:6px;border:dodgerblue solid 3px;background-color:transparent;color:#f0f8ff;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}.move-todo-down-button:hover,.move-todo-up-button:hover{background-color:#1e90ff;border-color:#1e90ff;box-shadow:0 0 20px #37f9}.move-arrow-image{height:1.2em}.edit-button{font-weight:700;cursor:pointer;font-size:1.4rem;padding:.5em 1em;border-radius:6px;border:3px solid blueviolet;background-color:transparent;color:#d5ccff;transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,color .25s ease}.edit-button:hover{color:#f0f8ff;background-color:#8a2be2;border-color:#8a2be2;box-shadow:0 0 20px #93f9}.delete-button{font-weight:700;cursor:pointer;font-size:1.4rem;padding:.5em 1em;border-radius:6px;border:3px solid red;background-color:transparent;color:#f99;transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,color .25s ease}.delete-button:hover{color:#f0f8ff;background-color:red;border-color:red;box-shadow:0 0 20px #f339}@media screen and (min-width: 481px){html{font-size:80%}.todo-checkbox{height:2.2em;width:2.2em}.todo-text{width:90%}}@media screen and (min-width: 769px){html{font-size:100%}.move-arrow-image{height:2em;width:2em}.move-todo-down-button,.move-todo-up-button{padding:.9em}.todo-text-and-checkbox{width:auto}.todo-checkbox{height:2.4em;width:2.4em}.todo-text{padding:.2em .4em;width:90%}}@media screen and (min-width: 875px){.container{background-color:#222;margin-top:2em}.todo-list-top-part{width:100%}.todo-list-input{flex:1}.add-button{font-size:1.6rem}.todo-list{padding-right:2em;padding-left:2em}.todo-item{display:flex;max-width:100%;flex-direction:row}.todo-checkbox{width:2.6em;height:2.6em}.todo-text-and-checkbox,.todo-item-buttons{margin:0;gap:.4em;display:flex}.todo-text-and-checkbox{flex:1}.todo-text{padding-right:1em;padding-left:.4em;width:90%}.completed-todo-text{text-decoration-line:line-through;text-decoration-color:#444;color:#444}.todo-item-buttons{margin:0;gap:.4em;display:flex;justify-content:end}.todo-editing-input{padding:0 1em}.move-todo-down-button,.move-todo-up-button{padding:.9em}.move-arrow-image{height:2.2em}.edit-button,.delete-button{font-size:1.5rem}}