Exercise1.css

*{
	box-sizing: border-box;
}
h1{
	text-align: center;
}

.thumbnail{
	display: block;
	margin: 20px auto;
}

.thumbnail:hover{
	cursor: pointer;
	box-shadow: 0px 0px 50px black;
}

p{
	text-align: left;
}

#cover{
	display: none;
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color: rgba(0,0,0,0.8);
}

#container{
	color: white;
	display: block;
	position: absolute;
	margin: auto;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

#cover img{
	top:0;
	right:0;
	bottom:0;
	left:0;
	max-height: 90%;
	max-width: 100%;
	display: block;
	margin: auto;
}


#container span:first-child{
	float: left;
	clear: left;
}


#container span:last-child{
	float: right;
}

#closeBttn{
	color: white;
	font-family: Arial;
	font-size: 20px;
	float: right;
	right: 20%;
	bottom: 10%;
}

#closeBttn:hover{
	cursor: pointer;
}

.loading{
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background: rgba( 0,0,0,0)
                url('http://i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}