body.dev-mode:before {
  z-index: 999;
  position: fixed;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  content: "F";
  text-align: center;
  font: 400 0.8em/20px 'Montserrat', sans-serif, sans-serif;
  color: #FFF;
  background: pink;
}
@media only screen and (max-width: 1440px) {
  body.dev-mode:before {
    background: pink;
    content: "W";
  }
}
@media only screen and (max-width: 1280px) {
  body.dev-mode:before {
    background: blueviolet;
    content: "D";
  }
}
@media only screen and (max-width: 1024px) {
  body.dev-mode:before {
    background: blue;
    content: "LT";
  }
}
@media only screen and (max-width: 900px) {
  body.dev-mode:before {
    background: green;
    content: "N";
  }
}
@media only screen and (max-width: 768px) {
  body.dev-mode:before {
    background: greenyellow;
    color: #000;
    content: "LS";
  }
}
@media only screen and (max-width: 600px) {
  body.dev-mode:before {
    background: yellow;
    content: "T";
  }
}
@media only screen and (max-width: 480px) {
  body.dev-mode:before {
    background: orange;
    content: "S";
  }
}
@media only screen and (max-width: 320px) {
  body.dev-mode:before {
    background: red;
    content: "P";
  }
}