html,body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin:0;
  overflow-x: hidden;

} 
 body {
  background-color:#fefae0;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  color:rgb(45, 79, 21); 
}

.topnav{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #dda15e;
  z-index: 1;
}
.topnav a {
  float: left;
  font-size: 20px;
  color: #fefae0;
  background-color: #dda15e;
  display: block;
}
.topnav a:hover{
  background-color: #bc6c25;
}
.topnav .icon{
  display: none;
}
a {
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

h1 {
  color: #bc6c25;
  top: 25px;
  left: 0px;
  text-align: center;
  
}
#subheader {
  color:rgb(45, 79, 21);
  width: 100%;
  text-align: center;
  left: 0px;
}
#trees {
  max-width: 100%;
  height: auto;
}
.trees {
  position: relative;
  top: -25px;
}
form {
  color: #fefae0;
  border: 0px solid black;
  border-radius: 15px;
  background-color:  #bc6c25;
  padding: 50px 75px;
  margin: 20px;
  text-align: center;
  align-self: center;
}
#get-carbon {
  background-color: #dda15e;
  color: #fefae0;
  border: 2px solid ;
  padding: px 10px;
  border-radius: 10px;
}

#error-a {
  color:rgb(45, 79, 21);
}
#error-a:hover {
  color:blue;
  text-decoration: underline;
}
#carbon-data a:hover {
  color: blue;
  text-decoration: underline;
}
/* This loading circle code came from
 https://dev.to/vaishnavme/displaying-loading-animation-on-fetch-api-calls-1e5m */
#loading-circle {
  height: 30px;
  width: 30px;
  border: 5px solid #fefae0;
  border-top: 5px solid rgb(121, 169, 70);
  border-radius: 100% ;
  margin: auto;
  visibility: hidden;
  animation: spin 1s infinite linear;
}
#loading-circle.display {
  visibility: visible;
}
@keyframes spin {
  from{
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* End of loading circle code */
input, label{
  margin: 10px 0px;
}

h2 {
  margin: 30px;

}
article{
  width: 85%;
  align-self: center;
}
p.body {
  margin: 30px;
  padding: 5px;
  text-align: justify;
  line-height: 22px;
}
p image {
  margin: 25px;
}
a.blog-link {
  text-decoration: underline;
  padding: 0px;
}
#graph {
  float: right;
  width: 46%;
  height: auto;
  margin: 10px -10px 10px 10px;
}

#nasa {
  float: left;
  width: 46%;
  height: auto;
  margin: 10px 10px 10px -10px;
}
#nasa:hover{
  width: 100%;
}
#plane {
  position: relative;
  top: 0px;
  left: 0px;
  max-width: 30px;
  max-height: auto;
  overflow-x: hidden;

}
#plane-landing {
  max-width: 30px;
  max-height: auto;
}
#footer {
  text-align: center;
  background-color:  #dda15e;
  margin: 0;
  padding: 10px;
}
#footer p {
  margin: 5px;
  color:rgb(45, 79, 21); 
}
.social {
  height: 30px;
  width: 30px;
  padding: 5px;
  margin:0 ;
  
}
/* Below are my media queries to make more responsive. A lot of these
are to change the nav at the top to a hamburger drop down menu which I
learned at: 
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float:right;
    display: block;
    
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  form {
    padding: 15px;
  }

}