/* desktop nav bar */
.nav {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
  font-size: 21px;
  background-color: #5D7B63;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  padding: 20px; 
}

.nav a {
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}

.highlight {
  text-decoration: underline;
}

nav a:hover {
  text-decoration: underline;
  color: #243627;
}

/* hamburger menu*/
.hamburger-nav {
  display: none;
}
.h-nav {
  font-size: 21px;
  font-family: "Times New Roman", Times, serif;
  position: relative;
  overflow: hidden;
}

.h-nav a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  background:#354035;
  padding: 10px;
}

.h-nav a.icon {
  background:#395436;
  top:0;
  right:0;
  padding: 20px;
  position: absolute;
  display: block;
}

.h-nav #myLinks {
  display: none;
}

#myLinks a:hover {
  background-color: #2c332c;
  color:#ffffff;
  text-decoration: none;
}

.h-title {
  background-color: #5D7B63;
  color: #ffffff;
  padding: 20px;
}

@media (max-width: 850px)
{
  .hamburger-nav{
    display: block;
  }
  .nav {
    display: none;
  }
}


/* display area */
h2 {
  text-align: center;
  padding:10px;
  color:#354035;
}
.display-container {
  display:flex;
/*   grid-template-columns: 1fr 1fr;
  gap: 0px; */
  flex-direction: row;
  margin: auto;
  background-color: #5D7B63;
  max-width:1000px;
  border: 2px solid #395436;
  border-radius: 1px;
  align-items: center; 
}

.display-img {
  max-width:700px;
  width: 500px;
  margin: 20px;
  border: 2px solid #395436;
  border-radius: 1px;
}

.display-info {
  background-color: #ffffff;
  padding: 0px 20px 20px 20px;
  margin: 20px;
  border: 2px solid #395436;
  border-radius: 1px;
  min-height: 230px;
}

.display-info h3 {
  font-family: myFont;
  font-size: 25px;
}


@media (max-width: 1000px) {
  .display-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  .display-info {
    max-width: 700px;
  }
}

@media (max-width:550px){
  .display-img {
    width: 350px;
  }
}

/* disp end */

/* scroll stuff start */
@font-face {
  font-family: myFont;
  src: url(https://assets.codepen.io/t-23458/BebasNeue-Regular.ttf);
} 

.scroll-bar {
  display: flex;
  flex-direction: row;
  gap: 30px;
  overflow:auto;
  white-space:nowrap;
  margin:50px;
  padding:28px;
  background-color:#5D7B63;
  border: 2px solid #395436;
  border-radius: 1px;
}

.scroll-bar a {
  display:inline-block;
  text-align: center;
}

.scrollbutton {
border: 5px solid white;
border-radius:1px;
min-width:300px;
height:200px;
font-size:35px;
font-family: "myFont", "Times New Roman", Times, serif;
text-wrap: wrap;
color: rgb(255, 255, 255);
text-shadow: 2px 2px #395436;
cursor: pointer;
}


.button1{
 background-image: url('https://www.parksconservancy.org/sites/default/files/styles/gallery_2x/public/resource-gallery/A_MUWO_110111_JWe__20.jpg.webp?itok=SCO9STnD');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

.button2 {
  background-image:url('https://www.parksconservancy.org/sites/default/files/styles/gallery_2x/public/JES_8387E_2x1.jpg.webp?itok=xqDJUA45');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.button3 {
  background-image:url('https://www.parksconservancy.org/sites/default/files/styles/gallery_2x/public/field/image/MOPO_161005_KW-5947_2x1.jpg.webp?itok=_iDxS2Ma');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.button4 {
  background-image:url('https://www.parksconservancy.org/sites/default/files/styles/gallery_2x/public/mr_SBE_kwan_ruby_20150317_2x1.jpg.webp?itok=bbsgg8v7');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.button5 {
  background-image:url('https://www.parksconservancy.org/sites/default/files/styles/gallery_2x/public/resource-gallery/MOPO_101006_MCu_410.jpg.webp?itok=-ndSXWgh');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.button6 {
background-image:url('https://baynature.org/wp-content/uploads/2013/06/BenPless_SNPL-leads-chick.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
/* scroll end */

footer {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  background-color: #5D7B63;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;  padding: 20px;
}