body {
  background-color: black;
  background-size: cover;
  overflow: hidden;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}

.container-fluid {
  margin-top: 30px;
  padding: 10px;
}

.jumbotron {
 opacity:0.8;
 margin: 0 auto;
 box-shadow: inset 0 0 25px 5px rgba(0,0,0,0.2);
}

.jumbotron h1 {
  font-weight: 600;
}

#temp, #temp_c, #summary {
  text-align: center;
}

#temp h2 {
  margin-top: 0.7em;
}

.footer {
  font-size: 9px;
  padding: 20px;
}

@media screen and (min-width: 300px) {
  .jumbotron h1 {
    font-size: 2em;
  }
  #temp h2 {
    font-size: 1.5em;
  }
}


@media screen and (min-width: 700px) {
  .container-fluid {
    width: 650px;
  }
  .jumbotron h1 {
    font-size: 2.5em;
  }
  #temp h2 {
    font-size: 2em;
  }
}