body {
  font-size: 6vw;
  padding: 0 2%;
}

.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.mono {
  font-family: monospace;
}
.fantasy {
  font-family: fantasy;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
.oblique {
  display: inline-block;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
}
.oblique.reverse {
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
}

.extend {
  display: inline-block;
  -webkit-transform: scale(2, 1);
  transform: scale(2, 1);
  margin: 0 1.5em; /* based on word length */
}

.compress {
  display: inline-block;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
  margin: 0 -0.9em; /* based on word length */
}

.outline {
  color: white;
}
@supports not (-webkit-text-stroke: 1px black) {
  .outline {
    text-shadow:
      -0.02em -0.02em 0 #000,
      0.02em -0.02em 0 #000,
      -0.02em 0.02em 0 #000,
      0.02em 0.02em 0 #000;
  }
}
@supports (-webkit-text-stroke: 1px black) {
  .outline {
    -webkit-text-stroke: 0.02em black;
    text-stroke: 0.02em black;
  }
}

.uppercase {
  text-transform: uppercase;
}

.double-x {
  text-shadow: 0.15em 0em black;
  letter-spacing: 0.125em;
}
.double-y {
  text-shadow: 0em 0.15em black;
  letter-spacing: 0.125em;
}

.translation {
  text-shadow: 
    0.025em -0.025em black,
    0.0125em -0.0125em black,
    -0.0125em 0.0125em black,
    -0.025em 0.025em black;
  letter-spacing: 0.05em;
}

.blur {
  filter: blur(0.05em);
}

.emphasis {
  text-emphasis: filled black;
  -webkit-text-emphasis: filled black;
}

.underline {
  text-decoration: underline;
}
.overline {
  text-decoration: overline;
}
.dotted {
  text-decoration: underline dotted;
}
.wavy {
  text-decoration: underline wavy;
}
.wavy.overline {
  text-decoration: overline wavy;
}
.wavy.underline.overline {
  text-decoration: underline overline wavy;
}

.invert {
  background: black;
  color: white;
}

.shadow {
  text-shadow: 0.1em 0.1em 0em black;
}