#root{font-family:Roboto,serif}.top-header{display:flex;align-items:center;height:30px}.mode-form{position:absolute;right:0;display:flex;gap:.5rem;margin:.2rem}.mode-form label{color:#333;font-weight:500}.mode-form select{border-radius:5px;outline:none}.App h1{font-size:5rem;color:#333;text-align:center;margin-top:0}.add-task{display:flex;justify-content:center;margin:4rem 0;gap:1rem}.task-input{min-width:200px;width:50vw;height:4vh;font-size:1.3rem;border:1px solid #333;border-radius:5px;padding:.4rem;outline:none;transition:all .3s ease-in-out}.date-input{width:8vw;height:4vh;padding:.2rem;font-size:1rem;border:1px solid #333;border-radius:5px;padding:.4rem;outline:none;transition:all .3s ease-in-out}.task-input:focus,.date-input:focus{outline:none;border:1px solid hsl(0,77%,21%)}.add-button{border:none;background-color:#090101;color:#fff;width:50px;border-radius:5px;border-style:solid;cursor:pointer;transition:all .3s ease-in-out;font-size:large}.add-button:hover{background-color:#5f0c0c;font-size:x-large}.task-table{width:80vw;text-align:center;margin:0 auto;border-color:#000}.task-table thead{background-color:#090101;color:#fff;height:3rem;font-size:1.2rem}.task-table th:nth-child(1){width:50%}.task-table th:nth-child(2){width:20%}.task-table th:nth-child(3),.task-table th:nth-child(4),.task-table th:nth-child(5){width:10%}.task-table tbody{height:3rem;font-size:1.1rem}input[type=checkbox]{width:20px;height:20px;border:1px solid #333;accent-color:green}input[type=checkbox]:checked:after{font-size:1.5rem;accent-color:green}.task-table button{border:none;background-color:#111112;color:#fff;width:5rem;border-radius:5px;border-style:solid;cursor:pointer;transition:all .3s ease-in-out;font-size:1rem;padding:.3rem}.task-table button:hover{background-color:#504e4e}.save{border:none;background-color:#090101;color:#fff;width:100px;height:40px;border-radius:5px;border-style:solid;cursor:pointer;transition:all .3s ease-in-out;font-size:large;align-items:center;display:flex;justify-content:center;text-align:center;margin:50px auto}.save:hover{background-color:#5f0c0c}@media screen and (max-width: 1000px){.add-task{height:20px}.App h1{font-size:3rem}.date-input{width:100px;height:35px;padding:0% 3%}.task-input{font-size:1.5rem;height:35px;padding:0% 5%}.add-button{height:35px;width:35px;text-align:center;align-items:center}.task-table{width:95vw}.task-table thead{font-size:.9rem}.task-table tbody{font-size:.8rem}td{padding:.4rem}input[type=checkbox]{width:15px;height:15px}.task-table button{font-size:.8rem}.save{width:80px;height:35px;font-size:.8rem}}.clock{margin:0 auto;display:flex;position:absolute;justify-content:center;align-items:center;text-align:center;align-content:center;width:100%}.clock p{margin:0;padding:0;font-size:large;font-weight:500}