*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;font-size:1rem}#app{max-width:50%;min-width:400px;margin:2rem auto;padding:0 1rem}.todo-title{color:#7cb342}.todo-form{display:flex;justify-content:space-between;margin-bottom:1rem}.todo-form__input{width:100%;display:inline-block;-webkit-appearance:none;padding:.5rem 1rem;font-size:1rem;border:2px solid #ccc;border-radius:4px}.todo-form__input:hover{border:2px solid #7cb342}.todo-form__input:focus{outline:0;border:2px solid #7cb342}.todo-list{padding:0}.todo-item{display:flex;align-items:center;justify-content:space-evenly;padding:1rem;margin-bottom:.5rem;background:#eee;border-radius:4px}.todo-item__checkbox{margin-right:1rem;font-size:2rem;width:1.5rem;height:1.5rem}.todo-item__text{display:inline-block;padding:.5rem;width:100%;border-radius:4px;border:2px solid transparent}.todo-item__text:hover{background:#dcedc8}.todo-item__text:focus{outline:0;border:2px solid #7cb342;background:#dcedc8}.todo-button,.todo-button--delete{display:inline-block;-webkit-appearance:none;padding:.5rem 1rem;font-size:1rem;border:2px solid #eee;border-radius:4px;background:#7cb342;color:#fff;border:2px solid #7cb342;margin:0 .5rem;cursor:pointer}.todo-button:hover,.todo-button--delete:hover{box-shadow:0px 0px 2px 0px rgba(0,0,0,.75)}.todo-button--delete{background:#ff7043;border:2px solid #ff7043}