header {
	height: auto;
	text-align: left;
	background-color:#222222;
	padding: 1px;
}

header h1
{
	color: #DDDDDD;
	font-style: underline;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 2em;
	letter-spacing: 3px;
}

body
{
	font-family: Courier;
	margin: 0;
	background-color: #EEEEEE;
	display: flex; 
	flex-direction: column; 
	min-height: 100vh;
}

button 
{
	display:inline-block;
	cursor:pointer;
	padding:1px;
	text-decoration:none;
	background-color: #222222;
	color: #EEEEEE;
	border: 1px solid #222222;
	margin-right: 1px;
	padding: 2px 5px 2px 5px;
	font-weight:bold;
}
button:hover
{
	color: #222222;
	background-color: #EEEEEE;
	border: 1px solid #222222;
}

a
{
	text-decoration: none;
	color: #0020FF;
}

nav {
	background-color: #222222;
	font-size: 120%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	text-align:center;
}
nav a 
{
	color: #DDDDDD;
	text-decoration: none;	
	padding: 0.5% 1em 0.5% 1em;
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
nav a:hover {
	color: #222222;
	background-color: #EEEEEE;
}
section 
{
	padding: 2%;
	text-align: center;
	height: auto;
	text-align: left;
	position: relative;
	margin-left: 30%;
	width: auto;
	margin-right: 30%;
}

section p {
	text-align: justify;
	text-justify: inter-word;
}

section h1 {
	text-align: center;
}

@media only screen and (max-width: 1000px) {
  .responsive {
	margin-left: 10%;
	margin-right: 10%;
  }
}
@media only screen and (max-width: 600px) {
  .responsive {
	margin-left: 5%;
	margin-right: 5%;
  }
}

.image-example {
	max-width: 40em;
	max-height: 40em;
	margin: 0.5em 0;
	vertical-align: middle;
	border: 1px solid;
	border-radius: 0.5em;
}
.images-block {
	text-align:center;
}


footer {
	color: #AAAAAA;
	background-color: #222222;
	text-align: center;
	font-size: 0.6em;
	
	margin-top: auto;
}