* {
	margin: 0;
	padding: 0;
}

body {
	background: linear-gradient(5deg, rgba(250,235,200,1) 0%, rgba(250,235,200,1) 38%, rgba(124,214,222,1) 100%);
  background-repeat: no-repeat;
  height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
  margin: 0 auto;
}

.bkg{ 
  width:100%;
  height: 100vh;
  display: flex;
	justify-content: center;
	align-items: center;    
  background:url("../svg/bkg-vista_tvx6l0.svg")   no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  background-position: center bottom;
 
}
.landscape{
   width:100%;
   height: 100%;
  display: flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items: center;
  background-image: url(../svg/bkg-mountain-left_tdq9io.svg),
    url(../svg/bkg-trees-right_qs1cw9.svg) ;
  background-attachment: fixed;
  background-position:  left bottom, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 20vw, 30vw, auto;
}

.trail-sign{
  height: auto;
  width:75vw;
  max-width:800px;
  background-image: url('../svg/woodgrain_pykyre.svg');
  background-color: #491727;
  background-blend-mode: lighten; 
  background-repeat:no-repeat;
  background-size:cover;
  color:ffffff;
  border-radius: 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:left;
  padding:24px; 
  postition: absolute; 
  bottom 0;
  filter: drop-shadow(15px 10px 10px rgba(0,0,0,.5));
}

.sign-post{
  height:25vh;
  width:75px;
  background:#222222;
}
h1{font-size:3em;letter-spacing:6px;line-height:1em;margin:0;padding: 16px 0;}
h3{font-size:1em; letter-spacing:4px;line-height:1.4em; padding: 0 0 10px 0;margin:0;}
h1, h3{
  font-family: 'John Muir Sans Wide';    
  font-weight: normal; 
  font-style: normal;
  text-align:center;
  /*inset shadow effect */
  background-color: #111111;
  color: transparent;
  text-shadow: 2px 3px 0px white;
  -webkit-background-clip: text;
  background-clip: text;
  text-stroke: 1px #000;
  
 
}
ul{
  list-style-type: none;
  font-family: 'National Park'; 
  font-weight: normal; 
  font-style: normal; 
  font-size:1.8em;
  padding:36px 32px 52px 32px;
  /*inset shadow effect */
  background-color: black;
  color: transparent;
  text-shadow: 0px 2px 0px white;
  -webkit-background-clip: text;
  background-clip: text;
  text-stroke: 1px #000;
}


li{
  display: flex;
  justify-content: space-between;
  padding:8px 0;
}
li span img{
    height:1.5rem;
}

@media only screen and (max-width: 800px) {
  ul {font-size:1.65em;
    letter-spacing:2px;
    padding:16px 8px 32px 8px;
  }
  h3 {font-size:.85em;letter-spacing:4px;line-height:1.45em;}
    li span img{
    height:1rem;
  }
  .sign-post{
     height:20vh;
  }
}


@media only screen and (max-width: 650px) {
  .trail-sign{
    height: auto;
    width:60vw;
   
  }
  h1{font-size:2.5em;line-height:1em;padding:0;margin:0;letter-spacing:6px}
  h3 {font-size:.65em;letter-spacing:4px;line-height:1.45em;}
  ul {font-size:1.25em;
    letter-spacing:2px;
    padding:24px 8px;
 
  }
  li span img{
    height:.75rem;
}
  
  .sign-post{
  width:8vw;
  }
}