body {

	font-family: 'roboto';
	margin: 0;
	padding-top: 40px;
}

#container{
  height: 50%;
  width: 50%;
}
h1 {
 
   background: #2980b9;
   color: white;
   margin: 0;
   text-transform: uppercase;
   padding: 10px 24px;
   font-weight: normal;

}

ul{
 
   list-style: none;
   margin: 0;
   padding:0;

}

li {

	background: #fff;
	height: 40px;
	line-height: 40px;
	color: #666;
}

li:nth-child(2n){

	background: #f7f7f7;
}

 input {
     
     color: #2980b9;
     background: #f7f7f7;
     width: 100%;
     padding: 13px 13px 13px 24px;
     box-sizing: border-box;

  }

  input:focus {
  	outline: none;
  	background: #fff;
  	border: 3px solid #2980b9;
  }

 

  span {
  	background: #e74c3c;
  	height: 40px;
  	margin-right: 20px;
  	text-align: center;	
  	display: inline-block;
  	color: white;
  	width: 0;
  	transition: 0.2s linear;
  	opacity: 0;
  }

  li:hover span {
  	width: 40px;
  	opacity: 1.0;
  }

  .fa-plus {
  	float: right;
  }

#container {
	 
	width: 50%;
	margin: auto;
	background: #f7f7f7;
	box-shadow: 0 0 3px rgb(0 ,0, 0, 0.1);
}

.completed {
	color: gray;
	text-decoration: line-through;
}