body {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  margin: 40px auto;
  background-color: #f9fafb;
}

h1 {
  font-size: 32px;
  margin-left: 45px;
}

.summary {
  margin: 45px;
  font-size: 16px;
  margin-bottom: 80px;
}

.group {
  margin: 45px;
  margin-bottom: 90px;
}

.group h2 {
  margin-top: 0;
  font-size: 25px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.sample {
  margin: 35px 0;
}

.label {
  font-size: 16px;
  color: #555;
}

.normal-weight { font-weight: 400; }
.bold-weight   { font-weight: 700; }

.normal-style  { font-style: normal; }
.italic-style  { font-style: italic; }

.normal-spacing { letter-spacing: normal; }
.wide-spacing   { letter-spacing: 0.3em; }
.tight-spacing  { letter-spacing: -0.06em; }

.transform-none { text-transform: none; }
.uppercase      { text-transform: uppercase; }
.lowercase      { text-transform: lowercase; }
.capitalize     { text-transform: capitalize; }

.deco-none    { text-decoration: none; }
.underline    { text-decoration: underline; }
.overline     { text-decoration: overline; }
.line-through { text-decoration: line-through; }