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: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 48px 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;
		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 0;
            width: 45vw;
            height: auto;
            max-height: 300px;
            max-width: 500px;
		}

	section {
		height: auto;
		max-height: 200px;
		grid-template: 30vw / 22% 22% 22% 22%;
		padding: .5em 0;
		background-image: url("../images/stars2.jpg");
		background-repeat: repeat;
		color: white;
		justify-content: space-evenly;
	 }
		.container {
			position: relative;
			width: 90%;
			height: 12em;
			max-height: 300px;
	 	 } 
	  	.image {
			opacity: 1;
			display: block;
			width: 100%;
			height: auto;
			transition: .5s ease;
			backface-visibility: hidden;
	  	} 
	  	.middle {
			transition: .5s ease;
			opacity: 0;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			text-align: center;
	  	}  
	  	.container:hover .image {
			opacity: 0.4;
	  	}
	  	.container:hover .middle {
			opacity: 1;
	  	}

	  	.text a:link, a:visited, a:hover, a:focus {
			color:white;
			text-decoration: none;
	  	}
	 
	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; 
	}