body{
  margin: 0;
  font-size: 30px;
  background: #CEB5A7;
}
h1{
  margin: 0;
  font-size: 70px;
  color: #fff;
  opacity: 0.7;
  letter-spacing: 10px;
  text-shadow: 5px 5px 10px gray;
  text-transform: uppercase;
  text-align: center;
}
ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li{
  border-bottom: 1px solid;
  position: relative;
  margin: 10px 0;
}
li>*{
  vertical-align: middle;
  margin-right: 10px;
}
input{
  font-size: 30px;
}
button{
  border: none;
  /* cursor: pointer;把滑鼠游標變成手指形狀 */
  cursor: pointer;
  font-size: 30px;
  color: #fff;
  border-radius: 5px;
  font-weight: 200;
}
.task-container{
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 10px;
  text-align: center;
}
.inputTask{
  font-weight: 200;
  border-radius: 10px;
  width: 80%;
}
.btnAddNew{
  background-color: #282427;
}
.filter-container{
  width: 60%;
  margin: 10px auto;
  text-align: center;
}
.filter-container button{
  background-color: #284F39;
  margin-right: 10px;
  font-size: 20px;
}
.toDoList-container{
  width: 60%;
  margin: 0 auto;
}
/* .item跟label是兄弟層，緊跟.item後的第一個label元素 */
.itemCheckBox:checked + .itemText {
  /* checkbox打勾後出現刪除線 */
  text-decoration:line-through;
}
.itemInputText{
  width: 60%;
}
.btnEdit{
  background-color: #B7C14B;
  position: absolute;
  right: 114px;
  bottom: 0;
}
.btnRevised{
  background-color: #B7C14B;
  position: absolute;
  bottom: 0;
  right: 114px;
}
.btnDelete{
  background-color: #CE6529;
  position: absolute;
  right: 0;
  bottom: 0;
}
.JSNone{
  display: none;
}