body{
	font-family: 'Roboto';
	background-color: #232323;
}

#container{
	box-shadow: 0 0 3px #000000;
	width:360px;
	background:#f7f7f7;
	margin:100px auto 100px auto;
}

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

h1{
	background:#2980b9;
	color:white;
	margin:0;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size:24px;
	font-weight:normal;
}

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

li{
	background: #ffffff;
	height:40px;
	line-height:40px;
	color: #666;
	cursor: pointer;
}

li:nth-child(2n){
	background:#f7f7f7;
}

input{
	box-sizing: border-box;
	font-size:18px;
	color:#2980b9;
	background:#f7f7f7;
	width:100%;
	padding:13px 13px 13px 20px;
	border: 3px solid rgba(0,0,0,0);
}

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

.fa-plus{
	float:right;
}

#addItem{
	cursor:pointer;
}
#trashCan{
	background:#e74c3c;
	height:40px;
	margin-right:20px;
	text-align:center;
	color:white;
	width:0;
	display:inline-block;
	opacity:0;
}

li:hover #trashCan{
	width:40px;
	opacity:1.0;
	transition:0.2s linear;
}