/* Copyright 2018 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 (max-width: 640px) {
  h1 {
    color: red;
  }

  .desc:before {
    content: "This browser window is smaller than 640px wide.";
  }
}

@media (min-width: 640px) {
  h1 {
    color: blue;
  }

  .desc:before {
    content: "This browser window is at least 640px wide!";
  }
}

@media (min-width: 500px) and (max-width: 600px) {
  h1 {
    color: fuchsia;
  }

  .desc:after {
    content: " In fact, it's between 500px and 600px wide.";
  }
}

@media (orientation: portrait) {
  .orientation:after {
    content: " Portrait.";
  }
}

@media (orientation: landscape) {
  .orientation:after {
    content: " Landscape.";
  }
}