body {
  font: normal 100% Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0px;
  padding: 5px 15px;
}

h1 {
  font-size: 1.4rem;
}

div#log {

  /* Element stays in place during scrolling. */
  position: fixed;
  /*top: 4px;*/
  bottom: 4px;
  right: 4px;

  /* It is above all other elements. */
  z-index: 9999;

  /* Semi-transparent black background. */
  background-color:
    rgba(0, 0, 0, 0.7);

  padding: 5px 10px;
  color: yellowgreen;
  min-width: 200px;
  max-width: 50%;

  /* Allows clicks to pass through. */
  pointer-events: none;
}

/* Spacing within and between paragraph. */
div#log p {
  line-height: 0.9rem;    
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

@media all and (display-mode: browser) {
  body { color: saddlebrown; }
}

/* Text is blue when viewed fullscreen as a regular page. */
@media all and (display-mode: fullscreen) {
  body { color: blue; }
}

/* Text is green when application is installed on a device. */
@media all and (display-mode: standalone) {
  body { color: green; }
}

@media all and (display-mode: minimal-ui) {
  body { color: red; }
}

/* Modes like "fullscreen" and "browser" above are automatically determined, but
 * can also be declared in the "manifest.json" file of the PWA. */

/* Big screen. */
@media screen and (min-width: 500px) {
  body { font-size: 15px; }
  div#log p { font-size: 1.0rem; }

/* vim: set tw=80 sw=2 ts=2 fdm=marker : */