html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  font-family: helvetica, arial, sans-serif;
  /* background-color: #cccccc; */
  width: 90%;
  margin: 0 auto;
}

/* set background image per page */
.home-bg {
  background: url("https://cdn.glitch.com/7a1b2075-2814-4a87-9156-3a7f88830028%2FClimateChange7.jpg?v=1582059140781");
}

.graph-bg {
  background: url("https://cdn.glitch.com/7a1b2075-2814-4a87-9156-3a7f88830028%2Fwater2.jpg?v=1583332975356");
}

.info-bg {
  background: url("https://cdn.glitch.com/7a1b2075-2814-4a87-9156-3a7f88830028%2Fgrass.jpg?v=1582729955193");
}

.ifr {
  width: 100%;
  float: left;
  text-align: center;
}

div.sub, iframe {
    width: 500px;
    height: 315px;
    margin: 0 auto;
    background-color: #777;
}

h1 {
  font-style: sans-serif;
  color: black;
}

.pageHeading {
  text-align: center;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
}

#navbar li {
  float: left;
}

#navbar li a {
  display: block;
  color: #000066;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

#navbar .right {
  font-style: italic;
  float: right;
}

/* Change the color of links on hover */
#navbar li a:hover {
  background-color: #66ccff;
}

/* Add a color to the active/current link */
#navbar li a.active {
  background-color: #66ccff;
  color: black;
}

/* Change the color of links on hover */
#navbar #info li a:hover {
  background-color: #00e64d;
}

/* Add a color to the active/current link */
#navbar #info li a.active {
  background-color: #00e64d;
  color: black;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 90%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

#para1 {
  text-align: center;
}

#graphDrop {
  padding-bottom: 10px;
}

h3 {
  font-style: italic;
  color: black;
}

h4 {
  font-style: italic;
  font-size: 18px;
  color: black;
}

p {
  font-style: italic, bold;
  font-size: 18px;
  color: black;
}