@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/* 
@font-face {
  font-family: OpenSansLight;
  src: url("./fonts/OpenSans-Light.ttf") format('truetype');
  font-style: normal;
} 
*/

/* 
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} 
*/

body {
  /* font-family: "Open Sans Light", OpenSansLight, "Open Sans", "Open Sans Regular", Arial, sans-serif; */
  font-family: 'Open Sans', Arial, sans-serif;
  max-width: 50rem;
  margin: 1rem auto;
}

section.examples {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

section.examples.two {
  flex-wrap: wrap;
}

  section.examples > figure {
    width: 15rem;
    padding: 0.5rem 2px;
  }

  section.examples > figure.avoid {
    outline: 2px dashed crimson;
  }

  section.examples.two > figure {
    width: 40%;
    padding: 0.5rem 0;
  }

  figcaption {
    text-align: center;
  }

  figcaption > span.lead {
    text-transform: uppercase;
    font-weight: bold;
  }


  /* section.large > img {
    width: 20rem;
    padding: 0.5rem 0;
  } */

    section.large > figure.readable_font,
    section.large > figure.readable_font img {
      width: 30rem;
      /* flex-grow: 4; */
    }

    section.large > figure.unreadable_font img {
      width: 15rem;
      /* flex-grow: 1; */
    }

img.palette {
  height: 50px;
}

.draft {
  color: #505759;;
  background-color: #DFE1E1;
  padding: 0.1rem 0.5rem;
}

/* remove print-to-pdf headers and footers */
@media print {
  @page { 
    margin: 0; 
  }

  body { 
    margin: 1.6cm; 
    size: 8in 9.5in;
  }

  article {
    break-before: always;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

summary {
  font-size: 1.25rem;
  font-weight: bold;
}