body {
  background-color: red;
  border-top: 10px solid red;
}

/**
 * 1 Mobile Large 620px
 */

@media screen and (min-width: 38.75em) {
  body {
    background-color: black;
    border-top: 10px solid black;
  }
}


/**
 * 2 Tablet Small 740px
 */

@media screen and (min-width: 46.25em) {
  body {
    background-color: pink;
    border-top: 10px solid pink;
  }
}


/**
 * 3 Tablet Large 880px
 */

@media screen and (min-width: 55em) {
  body {
    background-color: purple;
    border-top: 10px solid purple;
  }
  
}


/**
 * 4 Desktop Small 955px
 */

@media screen and (min-width: 59.6875em) {
  body {
    background-color: orange;
    border-top: 10px solid orange;
  }

}


/**
 * 5 Desktop Medium 1100px
 */

@media screen and (min-width: 68.75em) {
  body {
    background-color: blue;
    border-top: 10px solid blue;
  }
}


/**
 * 6 Desktop Large 1240px
 */

@media screen and (min-width: 77.5em) {
  body {
    background-color: green;
    border-top: 10px solid green;
  }
}


/**
 * 7 Desktop X-Large 1403px
 */

@media screen and (min-width: 87.6875em) {
  body {
    background-color: yellow;
    border-top: 10px solid yellow;
  }

}