/* breakpoint reference for the site */

html {
  --screen-size: "NA";
}

/* reporter */
html.report:before {
  content: var(--screen-size);
}

/* style of the reporter */
html.report:before {
  display: block; opacity: 0.3;
  position: fixed;
  top: 10px; right: 10px; z-index: 1000;
  background-color: #000; color: #fff;
  border-radius: 4px; border: 1px solid white;
  padding: 2px 4px;
  font-family: monospace;
}

/* Each of the following breakpoints have a corresponding css file in the project
which should be included in the same order as below into the
html pages during dev, and combined+minified in final deployment */

@media screen and (min-width: 280px) {
  html, .iPhone, .xsmallScreens {
    --screen-size: 'For 280px to 320px (for iPhones and smaller)'
  }
}

@media screen and (min-width: 321px) {
  html, .iPad, .smallScreens {
    --screen-size: 'For 321px to 768px (iPads)'
  }
}

@media screen and (min-width: 769px) {
  html, .mediumScreens {
    --screen-size: 'For 769px to 1024px'
  }
}

@media screen and (min-width: 1025px) {
  html, .largeScreens {
    --screen-size: 'For 1025px and above';
  }
}