@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap);:root{--primary-color:#6c5ce7;--secondary-color:#6c5ce7;--azul-claro:#fff;--branco:#fff;--cinza:#6c5ce7;--cinza-claro:#6c5ce7;--cinza-escuro:#6c5ce7}.todo{display:flex;width:70vw;flex-direction:column;align-items:center;margin:0 auto;gap:15px;background:#6c5ce7}.todo__title{display:flex;background-color:var(--cinza-escuro);width:100%;height:80px;font-weight:700;border-radius:8px;justify-content:center;align-items:center;margin-top:20px;font-size:2.5rem;color:var(--branco)}.todo__list{display:flex;width:100%;flex-direction:column;gap:10px}.todo__item{display:flex;width:100%;height:60px;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;border-radius:8px;justify-content:space-between;align-items:center;padding:5px;border:1px solid var(--cinza-escuro)}.todo__item>div{width:80%}.todo__item:hover{cursor:pointer;transition:all .5s ease;background-color:var(--primary-color);color:var(--branco)}.todo__item>input[type=text]{border:none;width:80%;font:inherit}.todo__item>input[type=checkbox]{margin-left:20px;margin-right:20px;accent-color:green}.todo__item>input[type=button]{margin-right:20px;background-color:red;color:var(--branco)}.todo__item>input[type=button],.todo__item>input[type=checkbox]{width:30px;height:30px;font:inherit;border:1px solid var(--cinza);border-radius:8px}.todo__item>input[type=checkbox]:checked+div{text-decoration:line-through}.todo__new-item{display:flex;background-color:var(--azul-claro);width:80%;height:70px;border-radius:8px;justify-content:space-evenly;padding:10px 0;box-shadow:0 0 5px var(--secondary-color);margin:10px;font:inherit}.todo__new-item>input{background-color:var(--azul-claro);border:none;width:90%;outline:0;font:inherit}.todo__new-item>input::placeholder{font-style:italic;font-weight:400}@media (max-width:700px){.todo{display:flex;width:90%;flex-direction:column;align-items:center;margin:0 auto;gap:5px;background:#6c5ce7}.todo__title{height:50px;margin-top:0;font-size:1rem;color:var(--branco)}.todo__list{display:flex;width:100%;flex-direction:column;gap:1px}.todo__item{font-size:1.1rem}.todo__item>input[type=checkbox]{margin-left:5px;margin-right:5px}.todo__item>input[type=button]{margin-right:10px}.todo__new-item{width:90%;height:60px;padding:8px 0;margin:0}.todo__new-item>input{width:95%;font-size:.8em}}