#container{
	margin: 100px auto;
	width: 360px;
 	background: #f7f7f7 ;
	box-shadow:  0 0 3px rgba(0,0,0, 0.1);

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

body{
	font-family: "Roboto", sans-serif;
}
h1{
	background: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 20px;
	font-size: 24px;
	text-transform:uppercase;
	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{
	font-size: 18px;
	background-color: #f7f7f7;
	padding:13px 13px 13px 20px;
	width: 100%;
	box-sizing: border-box; 
	color:#2980b9;
	border:3px solid rgba(0,0,0,0);

}
input:focus{
	background: #fff;
	border: 3px solid #2980b9;
	outline:none;
}
body{
	background: #C33764; 
background: -webkit-linear-gradient(to right, #1D2671, #C33764);  
background: linear-gradient(to right, #1D2671, #C33764);

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



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