/* Copyright 2020 Google LLC.
SPDX-License-Identifier: Apache-2.0 */

/* CSS files add styling rules to your content */

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

.desc {
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 10px;
}

@media (hover: hover) {
  .desc::before {
    content: "Your device allows you to hover.";
  }
}

@media (hover: none) {
  .desc::before {
    content: "Your device does not allow you to hover.";
  }
}

@media (pointer: fine) {
  .desc::after {
    content: " You are using a fine pointer, a mouse or trackpad perhaps?";
  }
}

@media (pointer: coarse) {
  .desc::before {
    content: "You are using a touchscreen and reporting a coarse pointer.";
  }
}