*
{
	margin:0;
	padding:0;
	box-sizing: 	border-box;	
}
body
{
	font-family: 'Roboto', sans-serif;
	background: #23a6d5;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 20s ease infinite;
	-moz-animation: Gradient 20s ease infinite;
	animation: Gradient 20s ease infinite;
	height:100%;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
#container
{
	width: 460px;
	margin:100px auto;
}
#container h1
{
	background: #2980e9;
	color: white;
	margin:0;
	padding:10px 20px;
	text-transform: uppercase;
	font-weight: normal;
	border-top-left-radius:14px; 
	border-top-right-radius: 14px;
}
.fa-plus
{
	float:right;
}
.fa-plus:hover
{
	color:#0bda0b;
}
.fa-info-circle
{
	font-size:20px;
}

.fa-info-circle:hover
{
	color: #ded5d5;
}

#container input
{
	font-size:14px;
	background: #e1efff;
	width:100%; 
	box-sizing: border-box;
	padding:10px 13px 10px 20px;
	color:#000;
	border: 3px solid rgba(0,0,0,0);
	border-bottom-left-radius:14px; 
	border-bottom-right-radius: 14px;
}
input:focus
{
	background: white !important;
	border: 3px solid #2980e9;
	outline: none;
}
ul
{
	margin-top:5px;
	padding:0;
	list-style:none;
	overflow:none;
}
ul li
{
	background: rgba(255, 255, 255, 0.79);
	min-height: 40px;
	line-height: 40px;
	color: #666;
}
ul li:nth-child(1)
{
	border-top-left-radius:14px; 
	border-top-right-radius: 14px;
	overflow:hidden;
}
ul li:last-child
{
	border-bottom-left-radius:14px; 
	border-bottom-right-radius: 14px;
	overflow:hidden;
}
ul li:nth-child(2n)
{
	background: rgba(250, 250, 250, 0.77);
}
span
{
	background: #e74c3c;
	height:40px;
	margin-right: 20px;
	text-align:center;
	color:white;
	width: 10px;
	display: inline-block;
	transition: 0.2s linear;
	color:transparent;
}
li:hover span
{
	width: 40px;
	color:#fff;
}
.completed
{
	text-decoration: line-through;
	color: rgb(194, 192, 192);
}
/*modal*/
.modal
{
	position: absolute;
	top:0;
	width:100%;
	height:100%;
	z-index: 1;
}
.modal::before
{
	content:'';
	z-index:2;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.4)
}
.modal-dialog
{
	display:flex;
	justify-content: center;
}
.modal-content
{
	z-index:2;
	width:600px;
	padding:20px;
	margin-top:100px;
	background:#f5faff;
	border-radius: 14px;
	box-shadow:0 2px 15px 2px rgba(0,0,0,0.8);
}
.modal-header
{
	position: relative;	
	margin-bottom:18px;
	text-align:center;
}
.modal-title
{
	font-size:36px;
	display: inline;
	letter-spacing: 2px;
}
.modal-body h6
{
	font-size:20px;
	font-weight: 400;
}
.modal-footer
{
	text-align: center;
	margin-top:8px;
}
button
{
	padding:5px;
	border:none;
}
button.close
{
	background: #f5faff;
	font-size:24px;
	line-height: 16px;
	position:absolute;
	right:0;
	top:-3px;
	outline:none;
}
button.close:hover
{
	color:#757474;
}
button.btn-close
{
	background:	#f00202;
	color:#fff;
	padding:5px;
	border-radius: 5px;
	margin:0 auto;
	border: 2px solid #f00202;
	color:#f00202;
	background: #f5faff;
	font-width:500;
	outline:none;
}
button.btn-close:hover
{
	background:#f00202;
	color: #f5faff;

}
/*media-queries*/
@media(max-width:768px)
{	
	#container
	{
		width: 90%;
		margin:100px auto;
	}
	.modal-content
	{
		width:90%;
		background:#f5faff;
	}
}