body {
  background-color: yellowgreen;
}

@media screen and (min-width: 480px) {
  body {
    background-color: red;
  }
  /* Change background color on small screens */
}

@media screen and (min-width: 680px) {
  body {
    background-color: darkkhaki;
  }
  /* Change background color on larger screens */
}

@media screen and (min-height: 600px) {
  body {
    background-color: lightcyan;
  }
  h1,
  h2,
  h3 {
    color: darkorange;
  }
  /* Change background color with the viewport height
  This is the last media query so it takes precedence over the previous ones */
}

.text-caps {
  text-transform: uppercase;
}

h1 {
  text-align: center;
  color: darkblue;
}

h2,
h3 {
  text-align: center;
  color: lightgreen;
}
/* Change text color for headings, this takes precedence over the previous ones */

div {
  border-color: black;
  border-style: solid;
  border-width: 1px;
}