@font-face {
  font-family: "Source Sans 3";
  src:
    url("../fonts/SourceSans3.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src:
    url("../fonts/SourceSans3-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

h1 {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 3.3rem;
  text-wrap: balance;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* font-variant: small-caps; */
  /* padding-bottom: 0.6rem; */
  /* border-bottom: 5px dotted black; */
}

#one {
  color: #0000ff;
}

#two {
  color: #008000;
}

#three {
  color: #ff0000;
}

#four {
  color: #000080;
}

#five {
  color: #800000;
}

#six {
  color: #008080;
}

#seven {
  color: #000000;
}

#eight {
  color: #808080;
}

#nine {
  color: #c0c0c0;
}

body {
  background-color: #efefef;
}

article {
  max-width: min(79ch, 100%);
  margin: 0 auto;
  padding: 0rem 0.6rem;

  line-height: 1.4;
  font-size: 1.2rem;

  color: #222;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-style: normal;
}

::selection {
  background-color: orange;
}

a {
  color: blue;
  text-decoration: underline blue;
}

a:visited {
  color: darkblue;
  text-decoration: underline darkblue;
}

.llama {
  display: block;
  width: 66%;
  height: auto;
  margin: 0 auto 0.5em;
}

@media (max-width: 768px) {
  .llama {
    width: 100%;
  }
}