body {
  font-family:
    Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
  line-height: 1.5;
}

a {
  margin-right: 1rem;
}

main {
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

h1 {
  color: #335d92;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 100;
  line-height: 1.1;
  margin: 2.5rem auto 0 auto;
  max-width: 14rem;
}

p {
  max-width: 14rem;
  margin: 1rem auto;
  line-height: 1.35;
}

@media (min-width: 480px) {
  h1 {
    max-width: none;
  }

  p {
    max-width: none;
  }
}

.loader {
  color: #888;
  margin-top: 1rem;
}

.error {
  color: red;
  margin-top: 1rem;
}

.description {
  max-width: 60rem;
  margin: 3rem auto;
}

.description p {
  line-height: 1.5;
}

.description *:not(:first-child) {
  margin-top: 1rem;
}

.description_img {
  max-width: 100%;
  border-radius: 4px;
}

.example {
  border: 1px solid #ddd;
  padding: 1rem;
  max-width: 50rem;
  text-align: left;
  margin: 1rem auto;
}

.example__header {
  display: flex;
}

.example__title {
  font-size: 1rem;
  font-weight: bold;
  flex-grow: 1;
}

.example--table {
  padding: 0.5rem;
}

.example--table th,
.example--table td {
  padding: 4px 12px;
  white-space: nowrap;
}