/*main layout styles*/

  html,
  body,
  .container-fluid {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  
  #navbar {
    background-color: rgba(245, 222, 179, 0.775);
    font-family: 'BenchNine', sans-serif;
    font-size: 20px;
    position: fixed;
    width: 100%;
    z-index: 1;
    margin: 0px;
    padding: 0px;
  }
  
  .nav {
    width: 100%;
  }
  
  .nav-link {
    color: darkgreen;
    font-weight: bold;
  }
  
  .nav-link:hover {
    color: crimson;
  }
  
  #single-page-app {
    width: 100%;
  }
  
  .page {
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 55px 0px 0px 0px;
    margin: 0px;
    background-attachment: fixed;
    background-position: bottom right;
    background-size: cover;
  }
  
  .sub-page {
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.683);
    height: 100%;
    margin: 0px 30px;
  }
  
  .intro {
    margin-bottom: 40px;
  }
  
  #more-info {
    padding: 50px;
    text-align: left;
  }
  
  h1 {
    color: firebrick;
    font-family: 'BenchNine', sans-serif;
    font-size: 80px;
    font-weight: bold;
    line-height: 1;
    padding: 10px 0px 0px 0px;
  }
  
  h4 {
    font-family: 'Kreon', serif;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
  }
  
  p {
    font-family: 'Kreon', serif;
    letter-spacing: 1px;
  }
  
  .highlight {
    background-color: red;
    color: white;
    padding: 0px 10px;
  }

/*page-one map styles*/

  #page-one {
    background-image: url(images/amazonia.jpg);
    display: flex;
    height: 100%;
  }
  
  #map {
    width: 100%;
    height: 90%;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    margin: 30px 0px;
  }
  
  #map-info {
    margin: 30px 0px;
    background-color: rgba(255, 255, 255, 0.683);
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;;
  }

/*page-two chart styles*/

  #page-two {
    background-image: url(images/amazon.jpg);
    height: 100%;
    width: 100%;
  }
  
  .charts {
    margin: 10px 30px;
    height: 55%;
    width: 45%;
    padding: 0px;
  }
  
  .y-axis-label {
    font-size: 16px;
  }
  
  .dc-chart .axis text {
    font-size: 10px;
  }
  
  .x-axis-label {
    font-size: 20px;
  }


/*page-three styles*/

  #page-three {
    background-image: url(images/trees.jpg);
    justify-content: center;
  }
  
  #effects {
    padding: 20px;
  }
  
  span {
    font-weight: bold;
  }

/*page-four news*/

  #page-four {
    background-image: url(images/forest.jpg);
  }
  
  #news {
    padding: 20px 100px;
  }
  
  .card {
    display: inline;
  }
  
  .card-body {
    padding: 10px 1px;
    background-color: rgba(255, 255, 255, 0.483);
  }
  
  .read-more {
    color: green;
    font-weight: bolder;
  }
  
  .read-more:hover {
    color: crimson;
  }

/*footer style*/
  #footer {
    background-color: rgba(245, 222, 179, 0.775);
    font-family: 'BenchNine', sans-serif;
    font-size: 20px;
    position:fixed;
    right:0px;
    margin-right: 30px;
    bottom:0px;
    height:40px;
  }

/*Media Query*/

  @media screen and (max-width: 770px) {
    h1 {
      font-size: 27px;
    }
  
    h5 {
      font-size: 17px;
    }
  
    p {
      font-size: 14px;
    }
    
    #page-one {
      height: 950px;
    }
  
    .mapboxgl-popup {
      width: 50%;
    }
  }

/*main styles*/

  @media screen and (max-width: 574px) {
    h1 {
      font-size: 30px;
    }
  
    h3 {
      font-size: 17px;
    }
    h4 {
      font-size: 17px;
    }
  
    h5 {
      font-size: 14px;
    }
  
    h6 {
      font-size: 10px;
    }
    
    #navbar {
    font-size: 11px;
    }
  
    .nav {
      justify-content: center;
    }
  
    .sub-page {
      margin: 10px 0px 0px 0px;
    }
  
    .intro {
      margin-bottom: 20px;
    }

/*page-one styles*/
  
    #page-one {
      height: 1050px;
      flex-direction: column;
    }
  
    #map {
      position: absolute;
      width: 100%;
      height: 450px;
      padding: 0px;
      margin-top: 480px;
    }
  
    #map-info {
      margin: 10px 0px 0px 0px;
      flex: none;
      height: 430px;
    }

/*page-two styles*/
  
    .charts {
      margin: 10px 0px;
      height: 65%;
      width: 75%;
    }

/*page-three styles*/
  
    .images {
      height: 200px;
    }
  
    #fireimg {
      width: 100%;
      margin: 0px;
    }
  
    #tableimg {
      width: 100%;
    }
  
    #smokeimg {
      width: 100%;
      margin: 0px;
    }

/*page-four styles*/
  
    #news {
      padding: 20px 30px;
    }
}