header, main, nav, footer {display: block;}

body { background-color: #EAEAEA;
       font-family: Arial, Helvetica, sans-serif; }
	   
	   * { box-sizing: border-box; }
	   
#wrapper { background-color: #90C7E3;
           background-image: linear-gradient(#FFFFFF, #90C7E3);
           padding: 2em; }

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

header a:visited { color: #FFFFFF; }

header a:hover { color:#90C7E3; }

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

nav a { text-decoration: none; }

nav a:link { color: #5C7FA3; }

nav a:visited { color: #344873; }

nav a:hover { color: #A52A2A; }

nav ul { list-style-type: none;
         margin: 0;
		 padding-left: 0;
         font-size: 1.2em; }
		 
nav li { border-bottom: 1px solid darkblue; }

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

main { background-color: #FFFFFF;
       padding-top: 1px;
	   padding-bottom: 20px;
	   padding-left: 30px;
	   padding-right: 20px;
       display: block;
       overflow: auto; }
	  
h2 { color: #1976D2; 
     font-family: Georgia, "Times New Roman", serif; 
	 text-shadow: 1px 1px 1px #CCCCCC; }
	 
 h3 { color: #000033;
      font-family: Georgia, "Times New Roman", serif; }

dt { color: #002171; }

.resort { color: #1976D2; 
          font-weight: bold; 
		  font-family: Georgia, "Times New Roman", serif; }
		  
main ul { list-style-type: none;
          list-style-image: url(marker.gif);
	      list-style-type: bullet; }
	 
footer { background-color: #FFFFFF;
         text-align: center;
		 font-style: italic;
		 font-size: .75em;
         font-family: Georgia, "Times New Roman", serif; 
         padding: 2em; }
		 
#homehero { height: 300px;
            background-image: url(coast2.jpg);
            background-size: 100% 100%; 
            background-repeat: no-repeat; }
			
#yurthero { height: 300px;
            background-image: url(yurt.jpg);
			background-size: 100% 100%;
            background-repeat: no-repeat; }
			
#trailhero { height: 300px;
             background-image: url(trail.jpg);
			 background-size: 100% 100%;
             background-repeat: no-repeat; }
			
#content {}

#contact { font-size: .90em; }

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

td { text-align: center; }

.text { text-align: left;}

tr:nth-of-type(odd) { background-color: #F5FAFC }

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

@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; }
			
  .content main { display: grid;
                  grid-template-rows: auto;
                  grid-template-columns: 1fr 1fr 1fr; }
				  
  h2 { grid-row: 1 / 2; grid-column: 1 / 5; }
  
  section { grid-row: 2 / 3; grid-column: auto; }
  
  #special { grid-row: auto; grid-column: 1 / 5; }
  
  footer { grid-row: auto; grid-column: 1 / 5; }
  
  form { display: grid;
         grid-template-rows: auto;
		 grid-template-columns: 6em 1fr;
		 grid-gap: 1em; gap: 1em;
         width: 60%; }
		 
  input[type="submit"] { grid-column: 2 / 3;
                         width: 9em; }
	
}

@media (min-width: 1024px) {
	
	nav ul { display: flex;
	         flex-direction: column;
	         padding-top: 1em; }
			 
	nav { text-align: left;
	      padding-left: 1em; }
		  
	#wrapper { width: 80%;
	           margin: auto;
			   border-color: darkblue;
			   box-shadow: 5px 5px 5px darkgray;
			   display: grid;
			   grid-template-columns: 180px auto;
	           grid-template-rows: auto auto auto auto; }
		
		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; }
			   
		footer { grid-row: 4 / 5; grid-column: 2 / 3; }
				 
}