/*******************************************************************************

System font availability: fontfamily.io

*******************************************************************************/
html
{
  font-size: 18px;
}

body
{
        width: 600px;
    max-width: calc(100% - 2rem);
       margin: 0 auto;
  font-family: Iowan Old Style, Palatino, Palatino Linotype, serif;
    font-size: 1rem;
  line-height: 1.33;
        color: #333;
}
/******************************************************************************/
nav
{
    text-align: center;
     font-size: 1.19rem;
   line-height: 2;
        margin: 1rem 0;
}

footer
{
  text-align: center;
   font-size: 0.84rem;
      margin: 1rem 0;
}

/* Vertical alignment, see: stackoverflow.com/a/56324860 */
.centered
{
    position: fixed;
         top: 50%;
        left: 50%;
   transform: translate(-50%,-50%);
  text-align: center;
}
/******************************************************************************/
a
{
  text-decoration: none;
      font-weight: bold;
}

a:link
{
  color: #3366cc;
}

a:hover,a:focus
{
  background-color: #ddd;
     border-radius: .125rem;
}

nav a
{
           color: #222;
    font-variant: small-caps;
         padding: .125rem .5rem .25rem .5rem;
  letter-spacing: -.0625rem;
}

nav a:link
{
  color: #222;
}

nav a:hover,nav a:focus
{
            color: #222;
  text-decoration: none;
}
/******************************************************************************/
p,ul,ol
{
   margin: 1rem 0;
}

ul.left, ol.left
{
  padding-left: 1rem;
}

ul.nomargin, ol.nomargin
{
  margin: 0;
}

li
{
  margin: .25rem 0;
}
/******************************************************************************/
h1
{
  font-weight: bold;
    font-size: 1.68rem;
       margin: 0;
}

.title-container
{
  text-align: center;
      margin: 2rem 0;
}

.subtitle
{
  font-weight: bold;
    font-size: 1rem;
}

h2
{
    font-weight: bold;
     text-align: left;
      font-size: 1.19rem;
 padding-bottom: .25rem;
  border-bottom: 2px solid;
         margin: 2rem -.5rem 1rem -.5rem;
}
/******************************************************************************/
hr
{
  color: #333;
  background-color: #333;
  height: 2px;
  border: 0;
  margin: 1rem -.5rem;
}

blockquote
{
        margin: 0;
  padding-left: 1rem;
   border-left: .35rem solid #bbb;
   margin-left: 1rem;
}

pre
{
           display: block;
       white-space: pre;
        overflow-x: auto;
            margin: 1rem 0;
       font-family: Menlo, Consolas, monospace;
         font-size: .84rem;
  background-color: #fafafa;
           padding: .5rem 1rem;
            border: 1px solid #ccc;
     border-radius: .5rem;
}

code
{
  font-family: Menlo, Consolas, monospace;
}
/******************************************************************************/
.meta-container
{
  text-align: center;
  overflow-x: auto;
      margin: -2rem auto 3rem auto;
}

.meta
{
           display: inline-block;
       white-space: pre;
        text-align: left;
       font-family: Menlo, Consolas, monospace;
         font-size: .84rem;
  background-color: #eee;
           padding: .5rem 1rem;
     border-radius: .5rem;
}
/******************************************************************************/
figure
{
  display: table;
   margin: 0;
}

figcaption
{
       display: table-caption;
  caption-side: bottom;
    text-align: center;
     font-size: .84rem;
        margin: -.25rem .5rem 1rem .5rem;
}
/******************************************************************************/
.record
{
  page-break-inside: avoid;
             margin: 1rem 0;
        line-height: 1.2;
}

.record ul
{
  margin: 0;
}