html { 
	font-size: 100%; // this is usually 16px by default
	height:100%;
	background-color: black;
 }

 .wrapper{
 	min-height: 100%;
 	padding-bottom: 100px;
 	flex-grow: 1;
 }
 header{
	text-align: center;
 }

h1 { 
	font-size: 2rem; // 24px
	text-align: center;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
}
a {
	text-decoration: none;
	color: white;
}
body {
	
	background-color: black;
	color: white;
}
p{
	display: flex;
	justify-content: center;
}
section{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin-bottom: 100px;

}
footer{
	display: flex;
	justify-content: center;
	position: relative;
	height: 100px;
	font-size: .8em;
	margin-top: 100px;
	background-color: black;
	clear:both;
}
footer p{
	padding-right: 16px; 
	font-weight: bold;
	text-decoration: none;
}
footer a{
	color: white;

}
footer a:hover{
	text-decoration: underline;
	color: blue;
}
footer a:hover{
	text-decoration: underline;
	color: blue;
}
@media only screen and (max-width: 950px) {
	.wrapper{
		margin-bottom: 100px;
	}
	section img{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	section{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
}