html {
	background-color: navy;
	max-width: 1200px;
	margin: 0 auto;
	border: 3px solid #028a6c;
}
	header, nav, main, section, footer {
		display: grid;
		width: 100%;
		font-family: Arial, Helvetica, sans-serif;
    	font-size: 100%;
	}
	a:link {
		color:rgb(82, 194, 238);
	}
	a:visited {
		color:rgb(218, 102, 218);
	}
	a:focus, a:hover {	
		font-style: italic;
	}
	
	header {
		grid-template-rows: 5px;
		background-image: linear-gradient(
			30deg, #33e468 0%, #aebe53 30%, white 50%, #df3833 80%, #12108f 100%);
	}
		header img {
			float: left;
			padding: 10px 300px 0 30px;
		}
		header h2 {
			float: left;
			padding: 0 10px;
			align-content: top;
			color: midnightblue;
			text-align: center;
			font-size: 400%;
			text-indent: 10%;
			text-shadow: 5px 5px 5px rgb(155, 56, 142);
		}

	nav {
		grid-template: 0px / 100%;
		padding: 0px 0px 0px 0px;
	}
		nav div:nth-of-type(2) {
			height: 50px;
		}
		#nav_menu ul {
			list-style-type: none;
			width: 100%;
			position: relative;
			margin: 0;
			padding: 0;
			font-size: 100%;
		}
		#nav_menu ul li {
			float: left;
			width: 20%;
		}
		#nav_menu ul li a {
			display: block;
			width: 100%;
			text-align: center;
			padding: 1em 0;
			text-decoration: none;
			background-color: #04AA6D;
			color: black;
			font-weight: bold;
		}
		#nav_menu a.current {
			color: yellow;
		}
		#nav_menu ul ul {
			display: none;
			position: absolute;
			top: 100%;
		}
		#nav_menu ul ul li {
			float: none;
			position: relative;
		}
		#nav_menu ul li.lastitem ul li ul {
			position: absolute;
			left: -100%;
			top: 0;
		}
		#nav_menu ul li:hover > ul {
			display: block;
			position: relative;
			left: 30%;
			width: 30em;
		}
		#nav_menu > ul::after {
			content: "";
			clear: both;
			display: block;
		}

	main {
		height: auto;
		min-height: 500px;
		padding: 1.5em 3em .5em;
		width: auto;
		background-color: rgb(97, 207, 156);
		background-image: url("../images/stars2.jpg");
		background-repeat: repeat;
		color: white;
		font-size: 1.5em;
	}
		main img {
			float: left;
			padding: 0 30px 0 20px;
			width: 50vw;
			height: auto;
			max-height: 300px;
			max-width: 500px;
		}
		main iframe {
			width: 100%;
			height: 400px;
			padding: 100px 0px;
		}

	section {
		height: auto;
		max-height: 380px;
		grid-template: 30vw / 45% 45%;
		padding: .5em 0 5em;
		background-image: url("../images/stars2.jpg");
		background-repeat: repeat;
		justify-items: center;
		justify-content: space-evenly;
	 }
	 	section img {
			width: 100%;
			height: auto;
			max-height: 350px;
		}
	
	footer {
		grid-template-rows: 40px;
		background-image: linear-gradient(
			30deg, #33e468 0%, #aebe53 30%, white 50%, #df3833 80%, #12108f 100%);
		align-items: center;
		justify-items: center; 
	}