* { box-sizing: border-box;}

body { background-color: #D3D3D3;
	   color: #000000; 
	   font-family: Arial, Helvetica, sans-serif; }
	   
#wrapper { background-color: #D3D3D3;
		   border: 1px solid #000033;
}

header { background-color: #006400;
	   color: #FFF; 
	   background-image: url(images/logo.png);
	   background-position: Left;
	   background-repeat: no-repeat;
	   text-align: Center;
	   letter-spacing: 2px;
	   padding-left: 1em;
 }

header a {
	text-decoration: none;
	}
header a:link {color: #FFFFFF; }
header a:visited{ color: #FFFFFF; }
header a:hover{ color: #000000; }

	   
h1 { margin-bottom: 0;
	margin-top: 0;	
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-family: Georgia, "Times New Roman", serif; 
	letter-spacing: 0.05em;
	padding-left: 3em;
	}

nav { text-align: center;
	margin-top: 0;
	font-weight: bold;
	padding: 0;	
	font-size: 120%;
}
nav li { border-bottom: 1px solid #000000;
	}	
nav a { text-decoration: none;
	}

nav ul { list-style-type: none;
		 margin: 0;
		 padding-left: 0;
		 font-size: 1.2em;
}

nav a:link{ color: #000000; }
nav a:visited{ color: #000000; }
nav a:hover{ color: #FFFFFF; }


main { background-color: #D3D3D3;
	   padding-left: 30px;
	   padding: 1px 20px 20px 20px;
	   display: block;
	   overflow: auto;		   
}


	
h2 { color: #006400;
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #CCC;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
	}
	 
h3 { color: #FFFFFF; 
	font-family: Georgia, "Times New Roman", serif; }

h4 { color: #006400; 
	font-size: 1.5em;
	font-family: Allura;
	text-shadow: 1.5px 1.5px 1.5px #CCC;
	text-align: center;
	margin-bottom: 0;
	margin-top: 0.5em;	
	padding-top: 0.5em;
	padding-bottom: 0;
	}
h4 a:link{ color: #006400; text-decoration:none;}
h4 a:visited{ color: #006400; text-decoration:none;}
h4 a:hover{ color: #FFFFFF; text-decoration:none;}

h5 { font-size: 1em;
	text-align: left;
	color: #000000;
	padding-top: 0;
	padding-bottom: 0;
	font-family: Arial, Helvetica, sans-serif; }

h6 { font-size: 1.75em;
	color: #006400;
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #CCC;
	padding-top: 0;
	padding-bottom: 0;
	}	
form { 	display: flex;
		flex-flow: column nowrap;
}

input, textarea { margin-bottom: 0.5em;
}

input {padding: .5em;
}

footer { 
		  background-color: #D3D3D3;
		  font-size: 75%;
		  font-style: italic;
		  text-align: center;
		  font-family: Georgia, "Times New Roman", serif;
		  padding: 2em;
		  }
		  
footer a:link{ color: #000000; }
footer a:visited{ color: #000000; }
footer a:hover{ color: #FFFFFF; }

#homehero { height: 600px;
			background-image: url(images/wallart.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}		
#ideashero { height: 200px;
			background-image: url(images/zipline.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}  
#abouthero { height: 600px;
			background-image: url(images/meinshop.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}
#aboutdog { height: 300px;
			background-image: url(images/kunuandi.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}
#projectshero { height: 350px;
			background-image: url(images/capitan-suizo-beachfront.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}
#projectsindex { height: 350px;
			background-size: 100% 100%;
			background-image: url(images/lightpost.jpg);
}
#rackshero { height: 450px;
			background-image: url(images/racks.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;	
}
#racksindex { height: 350px;
			background-size: 100% 100%;
			background-image: url(images/lightpost.jpg);
}
#ideasindex { height: 350px;
			background-size: 100% 100%;
			background-image: url(images/shelves.jpg);
} 
#aboutindex { height: 300px;
			background-image: url(images/me.jpeg);
			background-size: 100% 100%;
}

table { border-spacing: 0;
		border: 2px solid #3399CC;
	    border-collapse: collapse;
		Text-align: Center;
		margin-left: auto;
		margin-right:auto;
		}
		
table a:link{ color: #00205B; text-decoration:none;}
table a:visited{ color: #00205B; text-decoration:none;}
table a:hover{ color: #EF3340; text-decoration:none;}		

td, th { padding: 0.5em; border: 2px solid #3399CC; }
td { text-align: center; }
.text { text-align: left; }
tr:nth-of-type(odd) { background-color: #bfc2c7; }



@media ( min-width: 600px) {
	nav ul { display: flex;
		    flex-flow: row nowrap;
			justify-content: space-around;		
	}
	
	nav li { border-bottom: none;
	}
	
	section { padding-left: 2em;
			  padding-right: 2em;
}
	
	form { display: grid;
		  grid-template-columns: 6em 1fr;
		  grid-template-rows: auto;
		  grid-gap: 1em;
	}
	
	#submit { grid-column: 2 / 3;
			  width: 9em;		
	}
	.content main {
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	h1 {padding-left: 5em;}
	h2 { grid-row: 1 / 2; grid-column: 1 / 5;		
		}
	h4 { grid-row: 1 / 2; grid-column: 1 / 5;		
		}
	h5 { grid-row: 1 / 2; grid-column: 1 / 5;		
		}
	h6 { grid-row: 1 / 2; grid-column: 1 / 5;		
		}
	#homehero { height: 500px;
				width: 400px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				}
	#abouthero { height: 452px;
				width: 325px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				}
	#aboutdog { height: 300px;
				width: 400px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				}
	#rackshero { height: 350px;
				width: 500px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				}
	#indexpurpose { grid-row: 5; grid-column: 1 / 4;}
	#indextableheader { grid-row: 6; grid-column: 1 / 4;}
	#indextableprojects { grid-row: 7; grid-column: 1;}
	#indextableracks { grid-row: 7; grid-column: 1;}
	#indextableideas { grid-row: 7; grid-column: 2;}
	#indextableabout { grid-row: 7; grid-column: 3;}
	#projectsindex {height: 250px; }
	#rackssindex {height: 250px; }
	#ideasindex {height: 200px; }
	#aboutindex {height: 200px; }
	#projectslinks { grid-row: auto; grid-column: 1 / 5;
		}
	footer { grid-row: auto; grid-column: 1 / 5;	
		}
	#rackslinks { grid-row: auto; grid-column: 1 / 5;
		}
	footer { grid-row: auto; grid-column: 1 / 5;	
		}
	
}

@media ( min-width: 1024px) {
	nav ul { display: flex;
		flex-flow: column;
		padding-top: 1em;
	}
	nav {text-align: left;
		padding-left: 1em;
	}
	h1 {padding-left: 3em;}
	#wrapper {
		margin: auto;
		width: 80%;
		border: 1px solid #000033;
		box-shadow: 1px 1px #000033;
		display: grid;
		grid-template-columns: 180px auto;
		grid-template-rows: auto;
	}
	
	#aboutmain { padding-left: 5em;
	}
	header { grid-row: 1 / 2; grid-column: 1 / 3; }
	nav { grid-row: 2 / 5; grid-column: 1 / 2; }
	div { grid-row: 2 / 3; grid-column: 2 / 3; }
	main { grid-row: 3 / 4; grid-column: 2 / 3; }
	#indexpurpose { grid-row: 4; grid-column: 1 / 4;}
	#indextableheader { grid-row: 5; grid-column: 1 / 4;}
	#indextableprojects { grid-row: 6; grid-column: 1;
						 Text-align: center;}
	#indextableracks { grid-row: 6; grid-column: 1;
					   Text-align: center;}
	#indextableideas { grid-row: 6; grid-column: 2;
					   Text-align: center;}
	#indextableabout { grid-row: 6; grid-column: 3;
					   Text-align: center;}
	#racksmain { grid-row: 1 / 2; grid-column: 1 / 3;
				 Text-align: center;	}
	section { grid-row: 2 / 3; grid-column: auto;}

	footer { grid-row: 4 / 5; grid-column: 2 / 3; }
}