pacific.css
/* Global styles */
body {
background-color: :#90C7E3;
background-image: :linear-gradient(to bottom, #ffffff, #90C7E3);
color: #666666
font-family: Arial, Helvetica, sans-serif;

}

#wrapper {
  margin-left: auto; margin-right: auto;
  width: 80%;
  min-width: 960px;
  max-width: 2048px;
  background-color: #90c7e3;


}
header {
  /*configure background*/
  background-color: #002171;


  height: 120px;
  padding-top: 20px;
  padding-left: 2em;
/*text properties*/
  color:#ffffff;
  text-align: center;
}
 header a {
   text-decoration: none;
   color: white;

 }

header a:link{
  color: white;
}
header a:visited{
  color: white;
}
header a:hover{
  color: #90c7e3;
}

h1 {
  margin-bottom: 0;
  margin-top: 0;
  font-family:Georgia, "TIME New";
  font-size: 3em;
  letter-spacing:0.25em;


}

nav {

  font-weight: bold;
  padding: 1.5em;
  /*text properties*/
  font-weight: bold;



}

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 a :link{
  color: #5C7FA3;
  }

  nav a :visited{
    color: #344873;

  }
  nav a:hover{
    color: #A52A2A;

  }

main{
  /*Layout properties*/
  margin-left: 190px;
  padding: 1px 20px 20px 30px; /*top right bottom left*/
  display: block;
  overflow: auto;
  /*style properties*/
  background-color: #FFFFFF;
}

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

section{
  width: 33%;
  padding-left: 2em;
  padding-right: 2em;
}

h2{
  color: #1976D2;
  font-family:Georgia, "TIME New";
  text-shadow: 1px 1px 1px #cccccc;

}

h3{
  font-family:Georgia, "TIME New";
  color: #000033;

}
dt{
  color: #002171;

}
 footer{
   margin-left: 190px;
   padding: 2em;
   /*text style*/
   font-family:Georgia, "TIME New";
   font-size: 75%;
   font-style: italic;
   text-align: center;
 }

/*classes and ids*/
.resort {
  color: #1976D2;
  font-weight: bold;

}

#contact {
  font-size: 90%
}

#homehero {

  height: 300px;
  background-image: url(coast.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;
}

/*medium styles*/
@meadia (min-width:600px){
  nav ul { display:flex;
  flex-direction: row;
  justify-content: space-around;
}
  nav li{border-bottom:none;}

  section {margin-left: :2em;
  margin-right: 2em;
flex: 1;}
.flow {display:flex;
flex-direction: row;}

/*large style*/
@@media (min-width:600px) {
  nav ul{display: flex;
  flex-direction: row;
flex-wrap: nowrap;
justify-content:space-between;

}
nav li {border-bottom: none;
}
section{padding-left: 2em;
padding-right: 2em;}
{
  #wrapper {margin: auto;
  width: 80%;
  border:1px solid #002171;
box-shadow: 3px 3px 3px #002171;}

}
nav {text-align: left;
padding-left: lem;}
nav ul {flex-direction: column;
padding-top: lem;}

@@supports (display:grad) {
  Nav ul {flex-direction: column;
  padding-top: 1em;
}


    header{grid-area:header header}
    nav{grid-area: nav;}
    .hero{grid-area: hero;}
    main{grid-area: main}
    footer{grid-area: footer;}
    #wrapper{
      display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 100px auto 50px;
    grid-template-areas:
          "header header"
          "nav hero" auto
          "nav main"auto
          "nav footer";
  }
  /* Configure the table */
  table {
      border: 2px solid #3399CC;
      border-collapse: collapse;
  }

  /* Configure the table cells */
  td, th {
      padding: 0.5em;
      border: 2px solid #3399CC;
  }

  /* Center the td content */
  td {
      text-align: center;
  }

  /* Configure the text class */
  .text {
      text-align: left;
  }

  /* Configure alternate-row background color */
  tr:nth-of-type(odd) {
      background-color: #F5FAFC;
  }