style.css

/* Text styling */
body {
  font-family: 'Spartan', sans-serif;
}


a:hover {
  color: white;
}

.text-shadow {
  text-shadow: 2px 2px 2px #29472A;
}

.carousel-inner {
  box-shadow: 3px 3px 5px grey;
}

a:link, a:visited {
  color: rgb(63, 85, 63); 
} 

/* Nav */
.nav {
  position: absolute;
  text-align: right;
  top: 10px;
  right: 35px;
  z-index: 1;
}

/* Logo */
.logo {
  position: absolute;
  top: -5px;
  width: 170px;
}

#logo2 {
  top: -32px;
  /* height: 200px; */
}

.logo-link {
  position: absolute;
  top: 0px;
  width: 200px;
  height: 200px;
  z-index: 1;
}

/* Form */
.hike-search {
  position: absolute;
  z-index: 1;
}
.form-control {
  font-size: 12px;
  color: lightslategray;
}
.search-button {
  background-color: rgb(44, 66, 44);
}


/* Plant side bar, Only on larger screens*/
.side-bar {
  background-color: white;
  color: rgb(44, 66, 44);
}
.plant-list {
  list-style-type: none;
  justify-content: space-evenly;
}
.side-icon {
  height: 40px;
  width: 40px;
}

/* Plant bar beneath map (only on smaller screen sizes) */
.bottom-bar {
  display: none;
  color: rgb(44, 66, 44);
}
.bottom-icon {
  height: 60px;
  width: 60px;
}

/* Responsive features to show and nav plant sections by screen size */
@media only screen and (max-width: 991px){
  .side-bar {
  display: none;
  }
  .bottom-bar {
    display: inherit;
  }
}
@media only screen and (max-width: 768px){
  .map-box {
    width: 100%;
    height: 400px;
  }
}
@media only screen and (max-width: 640px){
  .map-box {
    width: 100%;
    height: 300px;
}
  }

/* Hike Results */
.hike-image {
  object-fit: cover;
  width: 100%;
  object-position: 20%;
  overflow: hidden;
}
h2 {
  font-weight: bold;
  color: rgb(44, 66, 44);
  font-size: 30px;
}
.hikeDiv {
  padding: 20px;
  /* background-color:rgba(224, 255, 180); */
}

.background-results {
  background-image: url(./images/yellow-back.jpg);
  background-repeat: repeat;
  /* background: rgba(248, 255, 249, 0.8); */
}

/* Recipe Section */
.card-title {
  position: absolute;
  bottom: 10px;
  z-index: 1;
  background:rgba(245, 255, 247, 0.8);
  padding: 10px 20px 10px 40px;
  font-weight: bold;
  color: rgb(44, 66, 44);
}

/* Footer */
footer {
  background-color: white;
  color: rgb(44, 66, 44); 
  font-size: 25px;
}

/* Page header */
.page-header {
  background-image: url("images/mtns2.jpg");
  width: 100%;
  height: 250px;
  box-shadow: 0px 3px 5px grey;
  margin-bottom: 10px;
}

/* Plant Page */
.plant-space, .contact-space, .about-space {
  background-color: rgb(247, 247, 247);
}
.plant-modal {
  cursor: pointer;
}
.plant-header-box {
  background-image: url("images/photo-1425736317462-a103b1303a35 copy 2.jpeg");
  color: white;
  background-size: cover;
  text-align: center;
  font-size: 60px;
  padding-top: 70px;
  box-shadow: 3px 3px 5px grey;
}

.plant-card {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px;
  box-shadow: 3px 3px 5px grey;
}

.plant-card-title {
  position: absolute;
  bottom: 50px;
  z-index: 1;
  background:rgba(245, 255, 247, 0.8);
  padding: 10px 20px 10px 40px;
  font-weight: bold;
  color: rgb(44, 66, 44);
  text-align: center;
  padding: 10px 15px 10px 15px;
  width: 75%;
  height: 40px;
  float: right;
}

#plant-button {
  color: white;
  font-size: 12px;
  background-color: rgb(32, 53, 37);
}
#modal-button {
  color: white;
  font-size: 12px;
  background-color: rgb(32, 53, 37);
}

/* Contact Page */
.contact-header-box {
  background-image: url("images/juneberry.jpg");
  color: white;
  background-size: cover;
  text-align: center;
  font-size: 60px;
  padding-top: 70px;
  box-shadow: 3px 3px 5px grey;
  background-position: bottom;
}
.contact-btn {
  color: white;
  font-size: 18px;
  background-color: rgb(32, 53, 37);
  margin: auto;
  margin-top: 30px;
}

/* Plant modals */
.modal-img {
  float: left; 
  width: 300px; 
  margin-left: 20px; 
  margin-top: 10px; 
  box-shadow: 3px 3px 5px grey;
}

.modal-text {
  float: right; 
  width: 400px; 
  margin-right: 20px; 
  margin-top: 10px;
}

.modal-recipe-link {
  float: right; 
  width: 400px; 
  margin-right: 20px; 
  margin-top: 10px;
}

/* About page */
.about-header-box {
  background-image: url("images/wild2.jpg");
  color: white;
  background-size: cover;
  text-align: center;
  font-size: 60px;
  padding-top: 70px;
  box-shadow: 3px 3px 5px grey;
  background-position: center;
}
.about-box {
  box-shadow: 3px 3px 5px grey;
  border-radius: 10px;
  margin: 40px;
  padding: 20px;
  font-family: 'Manrope', sans-serif;
  background-color: white;
  height: 500px;
}

.about-image {
  float: right; 
  width: 310px; 
  margin-right: 35px; 
  margin-top: 15px;
  box-shadow: 3px 3px 5px grey;
  margin-left: 15px;
}

.about-text {
  float: left; 
  width: 390px;
  margin-left: 35px;
  margin-top: 15px;
  margin-right: 15px;
  font-size: 18px;
  text-align: center;
}

/* Footer */
footer {
  background-color: white;
  color: rgb(44, 66, 44); 
  font-size: 25px;
  box-shadow: 3px 3px 5px grey;
}

a:hover {
  color: white;
}

a:link, a:visited {
  color: rgb(63, 85, 63); 
} 

.bottom-bar {
  display: none;
  color: rgb(44, 66, 44);
}

.card-title {
  position: absolute;
  bottom: 10px;
  z-index: 1;
  background:rgba(245, 255, 247, 0.8);
  padding: 10px 20px 10px 40px;
  font-weight: bold;
  color: rgb(44, 66, 44);
}

.plant-icons {
  font-size: 25px;
}

.map-plants {
  border-top: 2px solid rgb(188, 196, 190);
  border-bottom: 2px solid rgb(188, 196, 190);
}

.map-box {
  width: 100%;
  height: 500px;
}

@media only screen and (max-width: 991px){
  .side-bar {
  display: none;
  }

  .bottom-bar {
    display: inherit;
  }
}

@media only screen and (max-width: 768px){
  .map-box {
    width: 100%;
    height: 400px;
  }
}

@media only screen and (max-width: 640px){
  .map-box {
    width: 100%;
    height: 300px;
}

  }
      
/* Map */
.map-section {
  border-top: 2px solid rgb(188, 196, 190);
  border-bottom: 2px solid rgb(188, 196, 190);
}
.map-box {
  width: 100%;
  height: 500px;
}
.juneberries {
  background-image: url('images/juneberries.png');
  background-size: cover;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.inkycap {
  background-image: url('images/inkycap.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.sage {
  background-image: url('images/sageleaves.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.spinach {
  background-image: url('images/wildspinach.png');
  background-size: cover;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.asparagus {
  background-image: url('images/asparagus.png');
  background-size: cover;
  width: 5em;
  height: 5em;
  cursor: pointer;
}
.pinecone {
  background-image: url('images/pinecone.png');
  background-size: cover;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.mulberry {
  background-image: url('images/whitemulberry.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.elderberry {
  background-image: url('images/elderberry.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.mapboxgl-popup {
  max-width: 400px;
}
.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Spartan', sans-serif;
}