@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap";:root{--blue: #008DB8;--dark-blue: #3683BF;--purple: #8367B0;--black: #364954;--red: #D75965;--green: #00C4B7}*{box-sizing:border-box;margin:0;padding:0}html{font-family:Roboto,sans-serif;font-size:62.5%}body{padding:5rem 2rem;color:var(--black)}.container{max-width:45rem;margin:0 auto;display:flex;flex-direction:column;gap:6rem}header{text-align:center}header h1{font-size:6rem;font-weight:600;color:var(--purple)}header span{color:var(--blue)}header p{font-size:20px}.add-task{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}.add-tast__input-container{position:relative;width:100%}.add-tast__input-container input{width:100%;padding:.7rem 1.5rem;font-size:1.6rem;border:.1rem solid rgba(0,0,0,.3);border-radius:.7rem}.add-tast__input-container input:focus-within{border-color:var(--blue);outline:none}.add-tast__input-container i{position:absolute;font-size:1.6rem;right:2rem;top:50%;transform:translateY(-50%);opacity:.4}.add-tast__input-container input:focus-within~i{color:var(--blue);opacity:1}.add-task button{width:100%;padding:.7rem 1.5rem;font-size:1.6rem;color:#fff;background-color:var(--blue);border-radius:.7rem;border:none;box-shadow:#0006 0 2px 4px,#0006 0 2px 4px;transition:all .5s ease;cursor:pointer}.add-task button:hover{box-shadow:none}.tasks-section{width:100%}.tasks-section__list-empty-msg{font-size:3rem;text-align:center;opacity:.4}.tasks-section__counters{padding-bottom:3rem;display:flex;justify-content:space-around;font-size:1.8rem}.tasks-section__counters p span{padding-left:.5rem;font-size:2.2rem;font-weight:700}.tasks-section__counters p:first-child span{color:var(--blue)}.tasks-section__counters p:last-child span{color:var(--red)}.tasks-section__task-list{padding-bottom:3rem;list-style:none}.tasks-section__nice-msg{text-align:center;font-size:1.8rem;color:var(--blue)}.task-item{padding:1rem 2rem;display:grid;grid-template-columns:[name] auto [icons] 5rem;align-items:center;gap:1rem;font-size:1.8rem;border:0 solid rgba(0,0,0,.2);border-width:.1rem .1rem 0 .1rem;cursor:pointer}.task-item:first-child{border-top-left-radius:.7rem;border-top-right-radius:.7rem}.task-item:last-child{border-bottom-width:.1rem;border-bottom-left-radius:.7rem;border-bottom-right-radius:.7rem}.task-item__name{display:flex;align-items:center;gap:1.5rem}.task-item__name--check p{text-decoration:line-through;opacity:.6}.task-item__name .fa-circle-check{color:var(--blue)}.task-item__name .fa-clock{color:var(--red)}.task-item__icons{text-align:end}.task-item__confirm-remove{display:flex;justify-content:space-between;align-items:center;font-size:2rem}.task-item__confirm-remove .fa-check{color:var(--red)}.task-item__confirm-remove .fa-xmark{color:var(--blue)}.task-item__icons .fa-trash{opacity:.4;transition-duration:.5s}.task-item__icons .fa-trash:hover{opacity:1}