header {background-color: #ffff99;
	color: #000000;
	text-align: center;}

body {font-family: Arial, helvetica, sans-serif;
	background-image: url("camera.jpg");
	background-color: #cccccc;
	background-repeat: no-repeat;}

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

form {display: flex;
	flex-flow: column nowrap;}
		
input, textarea {margin-bottom: .5em;}

h1 {text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: .5em;
	padding-top: .5em;}
	
h2 {text-align: center;
	padding-bottom: .5em;
	padding-top: .5em;}
	
h3 {text-align: center;
	padding-bottom: .5em;
	padding-top: .5em;}
	
footer {background-color: #ffffff;
		text-align: center;}

@media (min-width: 600px) {

	h2 {grid-row: 1/2; grid-column: 1/5;}
	
	footer {grid-row: auto; grid-column: 1/5;}
	
	form {display: grid;
			grid-gap: 1em;
			grid-template-columns: 6em 1fr;
			grid-template-rows: auto;
			width: 60%;}
	
	input[type="submit"] {grid-column: 2/3;
							width: 9em;}
}

@media (min-width: 1024px) {

	nav ul {display: flex;
			flex-flow: column;
			padding-top: 1em;}

	nav {text-align: center;
		padding-left: 1em;}

	#wrapper {margin: auto;
				width: 80%;
				border: 1px solid #000033;
				box-shadow: 3px 3px 3px #333333;
				display: grid;
				grid-template-columns: 190px auto;
				grid-template-rows: auto;}

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

}