*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:#333;height:100vh;font-family:DM Sans,sans-serif;font-size:1.6rem;font-weight:500;overflow-x:hidden}#root{flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;display:flex}.container{border:1px solid #333;border-radius:9px;flex-direction:column;gap:1.6rem;width:100%;max-width:65rem;margin:10rem auto;padding:6.4rem;display:flex}h1{font-size:2.4rem;font-weight:500}button,[type=button],[type=submit],[type=reset]{all:unset;cursor:pointer;justify-content:center;align-items:center;display:inline-flex}button.btn--add{color:#fff;background-color:#333;border-radius:4px;align-self:center;height:2rem;margin-left:.4rem;margin-right:.6rem;padding:0 1rem}button.btn--delete{border:none;align-items:center;margin:0 1rem 0 .3rem;display:flex}button.btn--clear{color:#333;background-color:#fff;border:1px solid #333;border-radius:6px;height:2.2rem;padding:0 1rem;font-size:1.2rem}.input-text-container{border:2.5px solid #333;border-radius:6px;align-items:center;width:100%;font-family:DM sans;display:flex;overflow:hidden}.input-details{color:#fff;background-color:#333;border:1px solid #333;border-radius:6px;height:2rem;margin-right:.3rem;padding:0 .3rem;font-family:DM sans;display:inline-block}.input-details--date{width:11rem}.input-details--priority{width:7.6rem}.input-details--sort{color:#333;background-color:#fff;height:100%;font-size:1.2rem;font-weight:500}.input-text{border:none;width:100%;padding:1rem;font-family:DM Sans;display:block}input:focus,input:focus-visible,input:active{box-shadow:none;border:none;outline:none}input[type=date]::-webkit-calendar-picker-indicator{filter:invert();cursor:pointer}input[type=date]{box-shadow:none;border:1px solid #333;outline:none}.input-text:focus{box-shadow:none;border:none}input[type=checkbox]{cursor:pointer;appearance:none;border:1px solid #333;border-radius:2px;width:1.6rem;height:1.6rem}input[type=checkbox]:checked{background-color:#777;border-color:#777}.tasks-list{flex-direction:column;gap:1.6rem;display:flex}.task{justify-content:flex-start;align-items:center;gap:.8rem;display:flex}.task-details-container{margin-left:auto}.task-details{color:#333;background-color:#fff;border-radius:6px;padding:.1rem .8rem;font-size:1.2rem;display:inline-block}.task-details--date{width:11rem}.task-details--priority{width:7.6rem}.task-details,marked{color:#999}.align-right{margin-left:auto}.icon{width:1.8rem;height:1.8rem;margin-right:.5rem}.marked{color:#999;text-decoration-line:line-through;text-decoration-thickness:1.5px}.sort-container{justify-content:center;align-items:center;gap:1.6rem;margin-top:3rem;display:flex}.stats{text-align:center;margin-top:auto;margin-bottom:3rem}@media screen and (max-width:768px){html{font-size:56.25%}#root{justify-content:flex-start}}@media screen and (max-width:620px){html{font-size:50%}.input-text{font-size:1.4rem}.input-details{font-size:1.2rem}div .container{max-width:54rem;padding:5rem 4rem}}@media screen and (max-width:490px){#root{margin:0 2rem}div .container{max-width:40rem;padding:8rem 4.6rem}form.input-text-container{grid-template-columns:1fr 1fr 1fr 1fr;gap:.8rem 1rem;padding:1.2rem;display:grid}input.input-text{grid-column:1/-1;padding:0}.task label{font-size:1.4rem}select.input-details,input.input-details,button.btn--add{margin:0}span.task-details{width:9rem;padding:0;display:block}div.task-details.container{flex-direction:column;display:flex}.stats{margin:2rem 6rem;font-size:1.4rem}}