@import url(http://fonts.googleapis.com/css?family=Lato:400);
body {
  background-color: #009966;
  /* a green color */

  font-family: "Lato", sans-serif;
}

body:after {
  color: white;
  display: block;
  content: "Green background applied to all media types and screen sizes.";
  text-align: center;
  font-size: 1.2em;
  margin-top: 2em;
}

@media screen and (max-width: 1024px) {
  body {
    background-color: purple;
  }
  body:after {
    content: "Purple background applied when viewport size is less than 1024px.";
  }
}

@media screen and (max-width: 600px) {
  body {
    background-color: orange;
  }
  body:after {
    content: "Orange background applied when viewport size is less than 600px.";
  }
}