html {background-color: #1F2022;}


header {justify-content: center;
		align-items: center;
		display: flex;} 

 
nav { float: left;
      width: 11%;
	  justify-content: center;
	  align-items: center;
	  display: flex;
	  margin-left: 7%;
	  line-height: 220%;
	  font-size: 1.2em;
	  font-family: Palatino Linotype, Georgia, sans-serif;}


nav a:link {color: #7F38EC;}

nav a:hover{color: #FFDD00;}

nav a:visited{color: #82CAFF;}

nav a {text-decoration: none; }


main {margin-left: 34%;
	margin-right: -30%;}


#docsize {width:70%;
		margin-right: auto;
		margin-left: auto;
		background-image: url(hexagon.jpg);}


#subpic {margin-left: 30%;}


#contactinfo {text-align: center;
	margin-left: 39%;
	align-items: center;
	font-size: 0.7em;
	padding-bottom: .3em;}


p {color: #FDD017;
	width: 37%;}


h1 a {text-decoration: none;
	color: #2B65EC;
	font-family: Courier New, Lucida Console, monospace;}


h2 {color: #2B65EC;
	margin-left: 5%;
	font-family: Courier New, Lucida Console, monospace;}


h3 {color: #2B65EC ;
	text-align: center;
	align-items: center;
	font-family: Courier New, Lucida Console, monospace;
	margin-bottom: 1%;}
	
table {color: #FDD017;
border: 1px solid #2B65EC;
width: 70%;
text-align: center;
margin-left: -10%;}

td {border: 1px solid #2B65EC;}

tr {border: 1px solid #2B65EC;}

#story {width: 130%;
margin-left: 30%;}

#storypic {margin-left: 25%;}

#end {margin-left: 27%;}

#creatures {margin-left: 34%;
			color: #FDD017;
			display: flex;
			flex-direction: column;
			justify-content: space-between;}
			
			
#creatureh2 {margin-left: -8%;}

figcaption {margin-right: 50%;
			text-align: center;}
			
iframe {margin-left: 25%;}
			
@media (max-width: 480px) {
	
h1 {font-size: 90%;}

h2 {font-size: 80%;}

h3 {font-size: 70%;}

	p {font-size: 75%;}

}

@media (max-width: 640px) {
	
h1 {font-size: 100%;}

h2 {font-size: 90%;}

h3 {font-size: 80%;}

	p {font-size: 75%;}

}