body { background-color: #FFFFFF;
color: #000000;
font-family: "Courier New", "Lucida Console", monospace; 
font-size: 1em; }

h1 { font-family: Tahoma, Verdana, sans-serif; }
#header { background-color: #191970;
color: #FFFFFF; }

.species { background-color: #CD5C5C;
color: #900000;
font-size: 3em; }

nav ul { 
	list-style-type: none; 
	padding:5px;
	background-color: #33CCFF;
border-radius: 15px;
text-align: center;	}
nav a { text-decoration: none; padding: 10px; font-weight: bold; }
	nav a:link { color: #000000; }
	nav a:hover { color: #FF3333; }

footer a { text-decoration: none; padding: 10px; font-weight: bold; }
	footer a:link { color: #FFFFFF; }
	footer a:hover { color: #FF3333; }

#flexproducts {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
height: 600px; }

#flexproducts ul {
	background-color: #33CCFF;
list-style-type: none;
border-radius: 15px;
width: 125px; 
 }

#flexproducts li {
width: 100px;
margin-right: 45px;
 }
 
@supports (display:grid) {
	#gridbody {
		display: grid;
		background-color: #5F9EA0;
		background-image: radial-gradient(#5F9EA0, #191970);
		border-radius: 15px;
		grid-template-rows: 75px 30px 150px 500px 20px 20px; 
		grid-template-columns: 20% 20% 20% 20% 20%;
		column-gap: 3%; 
	}
	header { grid-row: 1/3; grid-column: 1/4; }
	nav { grid-row: 3/4; grid-column: 1/2; background-color: #33CCFF; }
	main { grid-row: 3/4; grid-column: 3/7; }
	footer { grid-row: 6/7; grid-column: 1/4; }
	
	main ul { background-color: #33CCFF; } 
}

@media (min-width: 650px) {
	body{
		font-size: 80%;
	}
}


@media (min-width: 800px) {
	body {
		font-size: 120%;
	}
	#wrapper {
		width: 775px;
		margin: auto;
		background-color: #5F9EA0; 
		background-image: radial-gradient(#5F9EA0, #191970); 
		border-radius: 15px;
		color: #FFFFFF
	}
	nav {
		float: left;
		width: 300px;
		font-size: 100%;
	}

}

@media (min-width: 1000px) {
	body { font-size: 125%;
	}
	#wrapper {
		width: 900px;
		margin: auto;
		background-color: #5F9EA0;
		background-image: radial-gradient(#5F9EA0, #191970);
		border-radius: 15px;
		color: #FFFFFF;
	}
	nav {
		float: left;
		width: 175px;
		font-size: 85%;
		margin-right: 15px;
	}
}