body, html {
  background-image: url("../images/background.jpg");
  background-size: cover;
}

.title { 
  font-family: 'Amatic SC', cursive;
  font-size: 75px;
  font-weight: bold;
}

#map {
   height: 100%; 
   width: 100%;
   font-family: 'Font Awesome\ 5 Free';
}

#map-div {
  margin: 0;
  padding: 0;
  font-family: 'Source Code Pro', monospace;
}

#front-page {
  height: 100%; 
  width: 100%;
  background-color: rgba(255,240,165,0.8);
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

#results-page {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden
}

#sidebar { 
  padding-right: 0;
  background-color: rgba(142,40,0,0.3);
  text-align: center;
}

#currentLocationWeather {
  text-align: center;
  background-color: #FFF9DE;
  border: 1px solid #B64926;
  border-radius: 20px;
  font-family: 'Source Code Pro', monospace;
  padding: 10px;
}

#current-location {
  text-align: center;
  margin: 10px;
}

#current-weather-icon {
  width: 10%;
}

.firstHeading {
  font-size: 24px;
  font-family: 'Source Code Pro', monospace;
  color: #8E2800;
}

.gm-style-iw {
  font-family: 'Source Code Pro', monospace;
}

.trailResultsList {
  border: 1px solid #B64926;
  padding: 10px;
  background-color: #FFF9DE;
  padding-left: 20px;
} 

.trail-info-results {
  text-align: left;
}

.trailResultsTitle {
  font-size: 18px;
  font-weight: bold;
}

.trailResultsDesc {
  font-size: 12px;
  line-height: 20px;
}

.trailImage {
  height: 100px;
  width: 100px;
}

div.trails {
  height: 800px;
  overflow: scroll;
  font-family: 'Source Code Pro', monospace;
}

.trail-weather {
  font-size: 12px;
}

.stars-empty {
  display: inline-block;
  position: relative;
  font-family: FontAwesome;
}
 
.stars-empty::before {
  content: "\f006 \f006 \f006 \f006 \f006";
}
 
.stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
}
 
.stars-fill::before {
  content: "\f005 \f005 \f005 \f005 \f005";
  color: #FFB03B;
}

#inputArea {
  margin-top: 20px;
}

#return {
  font-size: 24px;
  position: fixed;
  top: 10px;
  right: 50px;
  z-index: 1;
  background-color: #468966;
  margin: 2px solid #FFB03B;
}

#instructions {
  line-height: 35px;
  font-family: 'Source Code Pro', monospace;
}

.container-title {
  font-size: 35px;
  color: #468966;
  font-family: 'Amatic SC', cursive;
  -webkit-text-stroke: 2px #FFB03B;
}

.button {
  background-color: #8E2800;
  color: white;
  font-family: 'Amatic SC', cursive;
  font-size: 20px;
  margin: 1px solid #B64926;
}

.fav-button {
  color: #B64926;
  margin-right: 10px;
}

.fav-button:hover {
  color: #8E2800;
  margin-right: 10px;
}

#address {
  width: 50%;
}

#geolocate-button {
  font-size: 35px;
}

.marker-img {
  width: 150px;
}

#bodyContent {
  font-family: 'Source Code Pro', monospace;
}

legend { 
  font-family: 'Source Code Pro', monospace;
  font-size: 18px;
  margin-top: 20px;
}

form {
  font-family: 'Source Code Pro', monospace;
}

a {
  color: #8E2800;
}

a:hover {
  color: #B64926;
}

 #trails::-webkit-scrollbar {
  width: 1em;
}

#trails::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#trails::-webkit-scrollbar-thumb {
background-color: #468966;
outline: 1px solid #468966;
}

#trails::-webkit-scrollbar-corner {
  background-image: url("../images/background.jpg");
}

html::-webkit-scrollbar {
  width: 1em;
}

html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  background-image: url("../images/background.jpg");
}

html::-webkit-scrollbar-thumb {
background-color: #468966;
}