/*Box-sizing*/
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/*header */

body {
	background: url('../images/up-the-stairs_unsplash.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}	

.container {
	background-color: #fff;
	width: 400px;
	min-height: 500px;
	margin-top: 4em;
	margin-left: 8em;
	border-radius: 15px;
}

.masthead {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
}

.masthead h1 {
	font-size: 3rem;
	color: #494949;
	padding-top: 40px;
}

.masthead h3 {
	font-weight: lighter;
	font-size: 1.1rem;
	padding-bottom: 20px;
	color: #e5e5e5;
	margin: auto;
	margin-bottom: 40px;
	border-bottom: 2px dotted #e5e5e5;
	width: 50%;
}

div.list {
	position: relative;
	z-index: 10;
	max-width: 400px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 80px;
	padding: 0 auto;
}

.list-container {
	max-height: 700px;
	overflowY: scroll;
}

/* Adding an item - List input */

input.new-item {
	width: 320px;
	height: 35px;
	border: 2px solid #e5e5e5;
	background-color: #e5e5e5;
	border-radius: 25px;
	padding: 5px 10px;
	margin-bottom: 25px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
	color: #494949;
}

:focus {
	outline: none;
}

/* List items */

ul.list-items {
	width: 320px;
	position: relative;
	list-style-type: none;
	padding-bottom: 50px;
}

li.pending, li.done {
	width: 320px;
	height: 35px;
	vertical-align: baseline;
	font-weight: bolder;
	text-align: left;
	text-indent: 10px;
	border-bottom: 1px solid #e5e5e5;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2rem;
	margin-bottom: 4px;
}

/*pending item*/

li.pending {
	color: #494949;
}

span.tick {
	float: right;
	cursor: pointer;
	margin-top: 5px;
	width: 22px;
	height: 18px;
	background: url('../images/tick.png');
}

/*crossed off item*/

li.done {
	color: #999999;
	text-decoration: line-through;
}

span.delete {
	float: right;
	cursor: pointer;
	margin-top: 5px;
	margin-right: 3px;
	width: 18px;
	height: 18px;
	background: url('../images/delete.png');
}

/*End of list items*/

footer {
	clear: both;
	padding: 3rem;
	width: 100%;
}