body, html {
  height: 100%;
  background-color: white;
  color: black;
  min-height: 300px;
  width: 100%;
  min-width: 300px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-size: 2.0em;
  line-height: 1.4em;
  font-family: Roboto;
}

#span300 {
  display: block;
  width:50px;
  height:100px;
  background-color: black;
}

#span400 {
  display: block;
  width:100px;
  height:50px;
  background-color: yellow;
}


/* Responsive design. Put this at the bottom of this file. */
@media screen and (min-height: 300px) {
  body, html {
    background-color: red;
    font-size: 3.0em;
  }
  #span300 {
    display: block;
  }
  #span400 {
    display: none;
  }
}

@media screen and (min-height: 400px) {
  body, html {
    background-color: blue;
  }
  #span400 {
    display: block;
  }
  #span300 {
    display: none;
  }
}