* {box-sizing: border-box; } 


header {
	
	background-color: #002171;
	color: #FFFFFF;	
	text-align: center;
}
	

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


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


nav {
  text-align: center; 
  padding: 0;
  font-weight: bold;
  font-size: 120%; 
  
}

nav a {
  text-decoration: none;
  padding-left: .5em;
  padding-right: .5em;
  
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	font-size: 1.2em;
}

body {
	background-color: #EAEAEA;
	color: #FFBF00;
font-family: Arial, Helvetica, sans-serif; }


    
	
header {
		background-color: #FFBF00;
		color: #ffffff;
		text-align: center; }
		

   
header a{
	text-decoration: none;
	color: #FFFFFF;
}
header a:link{
 color: #FFFFFF;
 }
 
header a:visited{
 color: #FFFFFF;
 }
 
header a:hover{
color: #FFcccc;
}		
		
h1 {
  padding-top: 0.5em;
  padding-bottom: 0.5em; 
  margin-bottom: 0; 
  margin-top: 0;
  font-family: Georgia, "Times New Roman", sans-serif; 
  letter-spacing: 0.25em; 
}		
		
nav {
  text-align: center; 
  padding: 0;
  font-weight: bold;
  font-size: 120%; }
  
 nav a {
  text-decoration: none;
  padding-left: .5em;
  padding-right: .5em; } 


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

nav li {
border-bottom: 1px darkblue solid; }


nav a:link{
	color: #5C7FA3
}

nav a:visited{
	color: #344873;
}
nav a:hover{
	color: #FFcccc;
	
}


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

main ul{
  list-style-image: url(marker.gif);
}


h2 {
  color:#1976D2;
  font-family:Georgia, Times New Roman, serif;
   text-shadow: 1px 1px 1px #CCCCCC; }



h3 {
  font-family:Georgia, Times New Roman, serif;
  color:#000033;
}

table {
	border-spacing: 0;
	border: 2px solid #3399CC;
	border-collapse: collapse; }
	
td, th {
	padding: 0.5em;
	border: 2px solid #3399CC;

}
td {
	text-align: center;
}	
  
 
footer { 

  padding: 2%;
  background-color: #FFFFFF;
  
  text-align: center;
  font-style: italic;
  font-size: 75%; 
  font-family: Georgia, Times New Roman, serif; 
  
}
		



#dogs{ 
 
  height:300px;
  background-image: url(Dogs.jpg);
  background-size: 100% 100%; 
  background-repeat: no-repeat; 
}  

#cap{ 

  width: 500px;
  height: 500px;
  background-image: url(cap.jpg);
  background-size: 100% 100%; }
  
  
 #capcap{ 
	width: 500px;
	height: 500px;
	background-image: url(capcap.jpg);
	background-size: 100% 100%; }
	
#pip{ 
	width: 500px;
	height: 500px;
	background-image: url(pip.jpg);
	background-size: 100% 100%; }
  

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

video, embed {
			 float: right;
			 margin: 1em; }

@media (min-width:600px) {
	nav ul{ 
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin: 0.25em;
		justify-content: space-between; }
	
	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; }
	
	
	
	.flow {
		display: flex;
		flex-direction: row;
	}
	
}


@media (min-width:1024px) {
	#wrapper {
		margin: auto;
		width: 80%;
		border: 1px solid #002171;
		box-shadow: 3px 3px 3px #002171;
	}
	nav { 
		text-align: left;
		padding-left: 1em;
	}
	@supports (display: grid){
		nav ul { 
		    flex-direction: column;
		}

		header{ grid-area: header;}
		nav { grid-area: nav;}
		.hero {grid-area: hero;}
		main { grid-area: main;}
		footer { grid-area: footer;}
		#wrapper{
			display: grid;
			grid-template:
						 "header header" 100px
						 "nav hero" auto
						 "nav main" auto
						 "nav footer" 50px / 180px 1fr ;
			
		}
	}
}