@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{font-family:Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424}.todo-container{align-items:center;display:flex;flex-direction:column;min-height:100vh;padding-top:3%;color:#fff;transition:.3s linear;overflow:hidden;width:100%}.header,.form,.datetime{margin:0 1rem;min-height:20px;width:100%}.header{align-items:center;display:flex;flex-direction:column;justify-content:space-around;font-size:3rem;min-height:25vh;width:100%}section h1{color:#fff;font-size:2.8rem;text-align:center;line-height:.5rem}.date-time{font-size:23px;text-align:center;font-weight:500}form{display:flex;font-size:.7rem;justify-content:center;margin:15px 0;padding:.8rem;width:100%}form input{padding:10px;font-size:1.8rem;letter-spacing:.1rem;border:none;outline:none;border-top-left-radius:17px;border-bottom-left-radius:17px;max-width:500px;transition:background-color .2s ease-in-out;width:100%;background-color:#f2f3f4;color:#2c3e50}form input:hover{cursor:text}form input::placeholder{color:#fff;opacity:.7}button{border:none;outline:none;transition:box-shadow .2s ease,background-color .2s ease-in-out;background-color:#2c3e50;color:#000}form button:hover{cursor:pointer;background-color:#f1c40f}form button{padding:16.5px;font-size:17px;border-top-right-radius:15px;border-bottom-right-radius:15px;min-width:100px;background-color:#5dade2;color:#fff}span{margin-right:3.2rem}.myUnOrdList{display:flex;justify-content:center;align-items:center;max-width:1200px}.todo-list{min-width:25%;list-style:none}.todo-item{margin:1rem;font-size:20px;color:#1c2833;border-radius:50px;transition:background-color .2s ease-in-out;background-color:#f2f3f4;min-width:30rem;max-width:40rem;padding:.5rem;display:flex;flex-direction:row;justify-content:space-between;overflow-wrap:anywhere}li span{max-width:20rem;color:#1c2833;padding-top:8px;margin-left:10px}.check-btn,.delete-btn{font-size:1.5rem;cursor:pointer;width:3rem;height:3rem;border-radius:80%;margin:0 5px;background-color:#fff;padding-top:5px;color:#000;box-shadow:#959da533 0 8px 24px}.check-btn{color:#fff;background-color:#2ecc71}.delete-btn{color:#fff;background-color:#e74c3c}.checkList{text-decoration:line-through}.notCheckList{text-decoration:none}.clear-btn{background-color:#e74c3c;font-size:1.6rem;padding:1rem 2.2rem;border-radius:.3rem;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;-ms-border-radius:.3rem;-o-border-radius:.3rem}.clear-btn:hover{background-color:#8d1407}