*{margin:0;padding:0;box-sizing:border-box;list-style:none}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f3f0ff;background-color:#fff}.todo{width:350px;background-color:#f4fafd;border:1px solid #ccc;border-radius:10px;padding:16px 0}.todo__title{text-align:center;border-bottom:1px solid #f9f9f9}.todo__tab{display:flex;justify-content:space-around;align-items:center;margin-top:16px;font-size:14px;cursor:pointer;color:#333}.todo__tab--active{color:#00f;font-weight:700}.todo__text{font-family:Gabarito,sans-serif;font-size:20px}.todo__list{padding:0 1rem;height:412px;overflow:auto}.todo__item{height:50px;padding:5px;border-radius:10px;border:1px solid #ccc;background-color:#fff;display:flex;align-items:center;justify-content:space-between;margin:16px 0}.todo__item-text{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 10px}.todo__item--no{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;font-size:14px;color:#333}.todo__item input[type=checkbox]{display:none}.todo__item input[type=checkbox]+label{display:inline-block;width:20px;height:20px;border:3px solid #707070;position:relative;flex-shrink:0}.todo__item input[type=checkbox]:checked+label:after{content:"✔";font-size:11px;width:15px;height:20px;text-align:center;position:absolute;left:0;top:0}.todo__delete-icon{flex-shrink:0}.todo__item--completed{background-color:#e2dede}.todo__item--completed .todo__item-text{text-decoration:line-through}.todo__input{padding:0 1rem;display:flex;height:40px}.todo__input-text{flex-grow:1;border:1px solid #ccc;border-radius:5px;margin-right:5px;padding:0 10px}.todo__input-btn{flex-shrink:0;border-radius:5px;background-color:#00f;font-size:13px;color:#fff;padding:5px;border:none;cursor:pointer}