.todo-list {
  width: 80%;
 margin: auto;
 text-align: center;
}

.todo-list .task-input {
 background-color: black;
 padding: 10px 0px;
 position: relative;
}
.todo-list .task-input input[type="text"] {
 width: 80%;
 border: none;
 text-align: center;
}
.todo-list .task-input input[type="text"]:focus{
 outline: none;
}

.todo-list .task-input span {
 background-color: #000;
 color: #fff;
 cursor: pointer;
 border-radius: 50%;
 padding: 0px 10px;
 margin-bottom: 5px;
 font-size: 20px;
 line-height: initial;
 font-weight: bold;
 position: absolute;
 right: 8.5%;
 transition: 1s transform;
}

.todo-list .task-input span:hover{
 transform: rotate(90deg);
}

.todo-list .task-content div{
  
   background-color: beige;
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 10px 0px;
   padding-top: 5px;

}

.todo-list .task-content button {
 border: none;
 background-color: #fff;
 border-radius: 5px;
 padding: 5px;
 font-weight: bold;
 cursor: pointer;
}
.todo-list .task-content button:focus{
 outline: none;
}
.todo-list .task-count {
 background-color: #000;
 color: #fff;
 display: flex;
 justify-content: space-around;
 padding: 10px 0px;
}

.todo-list .task-count span {
 color: red;
 font-weight: bold;
 margin-left: 10px;
}

.todo-list .task-content .through{
 text-decoration: line-through;
}