#wrapper{
display:grid;
grid-auto-rows: minmax(0, auto);
grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}
header{

grid-row: 1 / 2;
grid-column: 2 / -2;
height:116px;
font-size:15px;
font-family: 'Aclonica'; 
text-align: center;
background-image: url('wawonai/tree.jpg');
}





h2{
  text-align: center;
  color:hsl(85, 90%, 4%);
  font-family:'Alef';
}

a {
  outline:none;
  text-decoration-line: none;
  color:hsl(85, 90%, 4%);
}


nav{
  top:0;
  grid-row:  2 / 3;
  grid-column: 2 / -2;
  height: 50px;
  padding-top: 1rem;
  background-color:hsl(85, 90%, 4%);
  list-style: none;
  position: sticky; 
  
  
}
nav a{
  display: inline;
  padding-right: 30px;
  padding-left: 30px;
  text-decoration-line:none;
  color:#F3F3F3;
  letter-spacing: normal;
  text-align:center;
  margin:0px;
  font-size: 22px;
  font-family: 'Alef';
  transition: background-color 0.5s ease-out;
  }
nav a:hover{
background-color:#7A3C02;
}
  nav ul{
    flex-flow:row, nowrap;
    list-style-type:none;
    padding:0;
    margin:0;
    text-align:center;
  }
  
  



main{
  grid-row:  4 / 5;
  grid-column: 2 / -2;  
 height:600px;
  background-color:#7A3C02;

}


#campground1{
grid-row: 3 / 3;
grid-column: 2 / -2;
background-image: url(wawonai/campground1.jpg);
height:300px;
background-size:cover;
background-repeat:no-repeat;
background-position: 20% 50%;




}

footer{

text-align: center;
font-size: .70rem; 
grid-row: 5 / 6;
grid-column: 2 / -2;
background-color: #7A3C02;



}

#tree{
  background-image: url('wawonai/tree.jpg');
  background-repeat:no-repeat;
}
p{
  font-family:'Alef';
  color:hsl(85, 90%, 4%);
  text-align:center;
  margin: 0px;
 padding-right:80px;
 padding-left:80px;
  word-wrap: normal;
  line-height: 35px;
}

@media screen and (max-width:900px){
  
  
  nav{
      grid-row: 2 / 3;
      grid-column: 1 / 8;
      
      position:static;
}
nav ul{
  flex-flow:column nowrap;
}

#campground1{
  grid-row: 3 / 3;
  grid-column: 2 / -2;
  height: auto;
}

section{
  float:none;
  width:100%;
  padding-right:0px;
}

}

@media screen and (max-width:600px){
  header h1{
      background-image: none;
      text-align:center;
    
  }
  
nav{
grid-row: 2 / 3;
grid-column: 1 / -1;
}
#campground1 {
display:none;

}

}