*{ box-sizing:border-box; }

body{	background-color: #EAEAEA;
		color:#666666;
		font-family:Arial, Helvetica, sans-serif;
}
#wrapper {	background-color: #90C7E3;
			background-image:linear-gradient(to bottom, #FFFFFF, #90C7E3);
}

/* header */
header {	background-color: #002171;
			color: #FFFFFF;
			text-align: center;  
}
header a	    {text-decoration: none; }
header a:link   { color: #FFFFFF; }
header a:visited{ color: #FFFFFF; }
header a:hover  { color: #90C7E3; }

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

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

nav li { border-bottom: 1px solid #00008b; }
nav a { text-decoration: none;  }
nav a:link    { color: #5C7FA3; }
nav a:visited { color: #344873; }
nav a:hover   { color: #A52A2A; }

/* main  - section  */
main   { background-color: #FFFFFF;
         display: block;
         overflow:auto;
	     padding: 1px 20px 20px 30px;
}
main ul { list-style-image: url(marker.gif); }

/* headings */
h1	{ margin-bottom: 0;
      margin-top: 0;
	  letter-spacing: 0.25em;
      font-family:Georgia, 'Times New Roman', serif;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
}
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;
}

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

/* classes and ids */
.resort  { color: #1976D2;
           font-weight: bold;
}
#contact { font-size: 90%; }

#homehero { height: 300px;
            background-image: url(coast2.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
}
#yurthero { background-image:url(yurt.jpg);
	        height: 300px;
	        background-size: 100% 100%;
	        background-repeat: no-repeat;
}
#trailhero { background-image:url(trail.jpg);
             height: 300px;
             background-size: 100% 100%;
             background-repeat: no-repeat;
}

/* medium style layout */
@media (min-width: 600px){
	nav ul  { display: flex;
		      flex-direction:row;
		      flex-wrap: nowrap;
		      justify-content: space-around; }
	nav li { border-bottom: none; }
	section { padding-left:2em;
		      padding-right: 2em; }
.content main { display: flex;
	            flex-direction: row;
}
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; }
}

/*-----large layout-----*/
@media (min-width: 1024px){
  nav ul { flex-flow: column;
           padding-top: 1em;
           text-align: left; }
#wrapper        { margin: auto;
                  width: 80%;
                  border: 1px solid darkblue;
				  box-shadow: 3px 3px darkblue;
                  display:grid;
                  grid-columns: 180px auto;
                  grid-rows: auto; }
#wrapper header { grid-row: 1 / 2;
                  grid-column: 1 / 3; }
#wrapper nav    { grid-row: 2 / 5;
                  grid-column: 1 / 2; }
#wrapper div    { grid-row: 2 / 3;
                  grid-column: 2 / 3; }
#wrapper main   { grid-row: 3 / 4;
                  grid-column: auto; }
#wrapper footer { grid-row: auto;
                  grid-column: auto; }
}