/* comment */

/*
 * comment
 * comment
 * comment
 */

@font-face {
  font-family: sans-serif;
  src: url(https://example.com/sans-serif.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

:root {
  --r: 0;
  --g: 255;
  --b: 255;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  border: 1px solid #ffa500;
}

#div {
  border-radius: .25em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.div {
  color: red;
}

[div="div"] {
  color: rgba(var(--r), var(--g), var(--b), var(--a, 1));
}

@media (max-width: 450px) {
  body {
    font-size: 80% !important;
  }
}

/* selector test */
div#div.foo[bar='baz']::qux {}
#foo\:bar:hover {}
foo, bar, [baz], #qux, .foo:bar {}

@media only screen and (max-width: 100px) and (max-height: 100px) {}

@keyframes test-1 {
  0% {
    top: 0;
  }
  100% {
    top: 50px;
  }
}

@keyframes test-2 {
  from {
    top: 0;
  }
  to {
    top: 50px;
  }
}