.App{text-align:center;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.todo-box{background-color:#fff;border-radius:10px;width:400px;height:70vh}.heading-box{background-color:beige;justify-content:center;align-items:center;height:70px;display:flex}.to{color:#708090}.do{color:#d2691e}.input-item{justify-content:center;align-items:center;margin:40px 40px 20px;display:flex}.add-button{color:#f0f8ff;cursor:pointer;background-color:#5f9ea0;border-radius:0 15px 15px 0;padding:7px}.input-box{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:beige;border:none;border-radius:15px 0 0 15px;outline:none;width:280px;padding:10px}input:focus::placeholder{color:transparent;transition:color .3s}input::placeholder{color:#708090}.todo-area{background-color:beige;border-radius:20px;flex-direction:column;align-items:center;min-width:310px;min-height:57%;margin:30px;padding:5px;display:flex}
.todoitem-box{border-bottom:2px solid #708090;justify-content:space-between;align-items:baseline;width:80%;padding-left:7px;padding-right:7px;display:flex}.checkbox{color:#000;cursor:pointer;padding-left:30px;font-size:1.15rem;position:relative}.checkbox input{cursor:pointer;width:0;height:0;position:absolute}.check{border:2px solid orange;border-radius:50%;width:15px;height:15px;position:absolute;top:5px;left:0}.checkbox:hover input~.check{background-color:#bdb76b;border-color:transparent}.checkbox input:checked~.check{background-color:#ff4500;border-color:transparent}.check:after{content:"";border:3px solid #fff;border-width:0 3px 3px 0;width:4px;height:6px;position:absolute;top:2px;left:4px;transform:rotate(45deg)}.checkbox-input{opacity:0;position:absolute}.checkbox-input:checked~.todo-text{opacity:.6;text-decoration:line-through;transition:all .3s}.trashIcon{color:#ff4500;cursor:pointer;width:17px;height:17px}