*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
main {
  width: 100vw;
  height: 100vh;
  background-image: url('https://cdn.pixabay.com/photo/2017/10/27/15/12/geeks-2894621_960_720.jpg'); /* The image used */
  background-size: cover;
}
.main-box{
  height: 100vh;
  background-color: rgba(124, 124, 124, 0.4);
}
section{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.first{
  padding-top: 15px;
}

.container{
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 2%
}
.container.input{
  justify-content: space-around;
  width: 50%;
}
#todo{
  width: 50%;
}
input{
  padding: 5px;
  border-radius: 5px;
  border-color: rgb(213, 248, 55,0.5);
}
input:focus{
  border-color: rgb(213, 248, 55,0.5);
  color: blue;
  font-weight: bold;
}
.btn{
  background-color: rgb(213, 248, 55,0.7);
  font-weight: bold;
  border: medium none;
  color: blue;
  padding: 11px 20px;
  border-radius: 5px;
  text-transform: uppercase;
}
.btn:hover{
  cursor: pointer;
  background-color: blue;
  color:rgb(213, 248, 55) ;
}

.container.todolist-box{
  background-color: lightgray;
  justify-content: space-around;
}
ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  list-style-type: none;
}
ul li{
  display: flex;
  background-color:rgb(213, 248, 55,0.5); 
  justify-content: space-between;
  align-items: center;
  width: 60%;
  padding: 1%;
  margin-bottom: 3px;
  border-radius: 5px;
}
.left{
  display: flex;
  align-items: center;
  width: 90%;
}
.left span{
  font-size: 16px;
  font-weight: bold;
  color: blue;
}
.left input{
  margin-right: 10px;
}
ul li input:hover{
  cursor: pointer;
  transform: scale(1.4);
}
.right i:hover{
  cursor: pointer;
  transform: scale(1.4);
}
.linecomplete{
background-color: rgb(144,238,144, 0.6);
}
.complete{
  text-decoration: line-through;
}
span i{
  color: red;
  font-size: 20px;
}