*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: 'Cairo', sans-serif;
  font-family: 'Patrick Hand', cursive;
}

.todo-container{
  background-color: #e6e6e6;
  margin: 20px auto 0;
  width: 600px;
}

.todo-container .add-task{
  padding: 15px;
  background-color: #44678f;
  position: relative;
}

.todo-container .add-task input{
  border: none;
  padding: 13px 10px;
  display: inline-block;
  background-color: #ddecfed7;
  width: calc(100% - 15px);
  font-size: 15px;
  color: rgb(44, 44, 44);
}

.todo-container .add-task input:focus{
  outline: none;
}


.todo-container .add-task .plus{
  position: absolute;
  height: 45px;
  width: 45px;
  background-color: rgb(226, 242, 255);
  right: 12px;
  text-align: center;
  font-size: 35px;
  line-height: 40px;
  cursor: pointer;
  transition:transform .3s ;
  border-radius: 50%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.todo-container .add-task .plus:hover{
  transform: rotate(90deg);
}

.todo-container .tasks-content{
  padding: 15px;
}

.todo-container .tasks-content .no-tasks-message{
  color: rgb(1, 0, 89);
  font-size: 15px;
}

.todo-container .tasks-content > span{
  display: block;
  background-color: #c2c2c2a1;
  padding: 10px;
}

.todo-container .tasks-content  > span:not(:last-child){
  margin-bottom: 12px;
}

.todo-container .tasks-content .taskbox .delet {
  float: right;
  background-color: #e91e63;
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: rgb(255, 239, 209);
  
}

.todo-container .tasks-content .taskbox.finished {
  text-decoration: line-through;
  background-color: rgb(96, 203, 101);
}
.task-stats{
  overflow: hidden;
  margin: 10px auto;
  width: 600px;
  font-size: 12px;
}

.task-stats .tasks-count{
  width: 50%;
  float: left;
  padding: 10px;
}

.task-stats .tasks-completed{
  width: 50%;
  float: right;
  padding: 10px;
  text-align: right;
}

.task-stats .tasks-count span,
.task-stats .tasks-completed span{
  color: rgb(20, 1, 1);
  padding: 2px 5px;
  font-size: 10px;
  border-radius: 40px;
  font-weight: bold;
  text-align: center;
}

.task-stats .tasks-count span {
  background-color: #e91e63;
}

.task-stats .tasks-completed span{
  background-color: rgb(25, 187, 0);
}




.all .Delete-All-Tasks {
  background-color: #e91e63;
  color: rgb(255, 230, 230);
  padding: 4px;
  font-size: 10px;
  border-radius: 40px;
  text-align: center;
  font-size:12px;
  cursor: pointer;
}

.all .compleat-All-Tasks {
  background-color: rgb(25, 187, 0);
  color: rgb(255, 230, 230);
  padding: 4px;
  font-size: 10px;
  border-radius: 40px;
  text-align: center;
  float: right;
  font-size:12px;
  cursor: pointer;
}