*, html{
	padding: 0;
	margin: 0;
}

	#chart{
		background: url('map/paper.jpg') repeat top center;
		background-size: cover;
		overflow-y: hidden;
		text-align: center;
		height: 826px;
	}

	#waves{
		background: transparent url('map/waves.png') repeat-x;
		background-size:contain;
	}

	section{
		min-height: 100vh;
	}
	
	#map{
	    margin: 0 auto;
	}

	#top{
		background:  url('map/wave.jpg') no-repeat top center;
		background-size: cover;
		overflow-x: hidden;
	}

	#loot{
		background:  url('map/bedrock.jpg') no-repeat top center;
		background-size: cover;
		overflow-x: hidden;
		position: relative;
		color: #fdefd6;
		font: normal 1em 'Cormorant Garamond', serif;
	}

	#journey{
		background: #2f4b5c;
		background-size: contain;
		overflow-x: hidden;
		height: 150%;
	}


	nav{
		text-align: center;
		margin-top: 20%;
		color: #2b5f79;
		font: normal 6em 'Cookie', cursive;
		text-shadow: 1px 1px 0px #f4ede0, -1px -1px 0px #f4ede0, 1px -1px 0px #f4ede0, -1px 1px 0px #f4ede0;

	}

	nav a{
		display: inline-block;
		margin: 0 30px;
	}

	nav a:link, nav a:visited{
		color: #2b5f79;
		text-shadow: 1px 1px 0px #f4ede0, -1px -1px 0px #f4ede0, 1px -1px 0px #f4ede0, -1px 1px 0px #f4ede0;
		text-decoration: none;
	}

	nav a:hover{
		color: #f4ede0;
		text-shadow: 1px 1px 0px #2b5f79, -1px -1px 0px #2b5f79, 1px -1px 0px #2b5f79, -1px 1px 0px #2b5f79;
	}

	sub{
		position: relative;
  display: inline-block;
  font-size: 0.5em;
  padding: 0;
  margin-left: -1em;
  font: normal 0.3em 'Inconsolata', monospace;
  color: #f4ede0;
		text-shadow: 1px 1px 0px #4c707c, -1px -1px 0px #4c707c, 1px -1px 0px #4c707c, -1px 1px 0px #4c707c;
	}
	
	ul#nav{
	    list-style-type: none;
	    -webkit-padding-start: 0!important;
	    -moz-padding-start: 0!important;
	    padding-start: 0;
	    text-align: center;
	}
	
	ul#nav li{
	    display: inline-block;
	    width: 100px;
	}
	
	iframe ul{
	    text-transform: lowercase;
	}
	
	iframe img{
	    max-width: 100%;
	}

	#loot p{
		padding: 20px 0 0;
	}

	#loot a:link, #loot a:visited{
		color: #fdefd6;
		font-style: italic;
	}

	#loot a:hover, #loot a:active, #loot a:focus{
		font-style: normal;
		text-decoration: none;
	}

	#loot ul{
		list-style-type: none;
	}

	#loot .nav{
		position: absolute;
		top: 10px;
		left: 10px;
		color: #1f3d4c;
		font-size: 1.5em;
	}

	#loot .nav a:link, #loot .nav a:visited{
		color: #1f3d4c;
		text-decoration: none;
		font-style: normal;
		display: inline-block;
		padding: 0 10px;
	}

	#loot .nav a:hover, #loot .nav a:active, #loot .nav a:focus{
		color: #fdefd6;
	}

	.links{
		bottom: 10px;
		right: 10px;
		position: absolute;
		text-align: right;
	}

	domains{
		display: block;
		text-align: center;
		font: normal 1.2em 'Inconsolata', monospace;
		color: #2b5f79;
		margin: 20px 0;
				text-shadow: 1px 1px 0px #f4ede0, -1px -1px 0px #f4ede0, 1px -1px 0px #f4ede0, -1px 1px 0px #f4ede0;

	}
	
	
	@media (max-width: 1200px) {
		nav {
			font-size: 4em;
			margin-top: 15%;
		}
		ul#nav li {
			width: 80px;
		}
		#chart {
			height: 600px;
		}
	}

	@media (max-width: 800px) {
		nav {
			font-size: 2.5em;
			margin-top: 10%;
		}
		ul#nav li {
			width: 60px;
		}
		#chart {
			height: 400px;
		}
		#loot .nav {
			font-size: 1em;
			top: 5px;
			left: 5px;
		}
		.links {
			font-size: 0.9em;
			bottom: 5px;
			right: 5px;
		}
	}

	@media (max-width: 500px) {
		nav {
			margin-top: 5%;
		}
		ul#nav li {
			width: 40px;
		}
		#chart {
			height: 200px;
		}
		section {
			min-height: 100vh;
		}
		#loot p {
			padding: 10px 0 0;
			font-size: 0.9em;
		}
		#loot .nav {
			font-size: 0.8em;
		}
		.links {
			font-size: 0.8em;
		}
	}