#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Size everything for mobile */
#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 7px;
  margin: 10px;
  border: 3px solid #000;
  font-size: 3em;
}

#legend img {
  width: 45px;
  background: #fff;
  height: auto;
  vertical-align: middle;
  margin-right: 5px;
}

#legend h3 {
  margin-top: 0;
  margin-bottom: 7px;
  font-size: 1em;
}

/* Adjust font/image sizes on desktop */
@media screen and (min-width: 1024px) {
  #legend {
    font-size: 1.2em;
  }

  #legend img {
    width: 25px;
  }
}

/* Adjust for mobile landscape... without this, legend takes up half the screen */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  #legend {
    font-size: 1.5em;
  }

  #legend img {
    width: 25px;
  }
}