/**********************************************************************/
/* font sizes */
html {
  font-family: 'Libre Baskerville', serif;
  font-weight: 400;
  line-height: 1.7;
  color: #333;
  hyphens: auto;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: initial;
  line-height: 1.2;
  margin: 1em 0 0.2em;
}

h1,
nav > h2 {margin: 0;}
p         {margin: 0.5em 0;}

#subcategories h2 {
  margin-top:1rem;
}

h4,
h5,
h6 {
  font-weight: 700;
}

html  {font-size: 16px;}
p     {font-size: 1em;}
h1    {font-size: 3.157em;}
h2    {font-size: 2.369em;}
h3    {font-size: 1.777em;}
h4    {font-size: 1.333em;}
small,
aside,
blockquote,
figcaption {
  font-size: 0.800em;
}
/**********************************************************************/
aside,
blockquote,
figure {
  margin: 0 initial;
  border-style: solid;
  border-color: currentColor;
}

aside {
  border-width: 1px 0;
}

figure img {
  max-height: 100vh;
  max-width: 100%;
}

figure {
  text-align:center;
  padding: 0.5em 0;
  border-width: 1px 0;
  overflow: hidden;
}

figure > figcaption {
  text-align: left;
}

blockquote {
  padding-left: 1em;
  padding-right: 1em;
  border-width: 0 0 0 1px;
}

li {
    margin-bottom: 0.2em;
    margin-left: 1em;
}

li cite::before {
    color: grey;
    content: "—from ";
}

/*****************************POSITIONING******************************/
article {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 0 1em 1em 1em;
}

article > header {
  width: 100%;
  border-bottom: 1px black solid;
}

article > nav {
  float: left;
  margin-top: 1em;
  padding-right: 1em;
}

article > section {
  display: block;
  margin: 0 auto;
  max-width: 40em;
  flex: 1 0 65vw;
  min-width: 20em;
}

#subcategories > ul:empty:before {
    content: 'No topics belong to this category.';
}
#pages > ul:empty:before {
    content: 'No pages belong to this category.';
}
#category {
  max-width: inital;
}
#pages > ul {
  columns: 20em;
  -webkit-columns: 20em;
  -moz-columns: 20em;
}
/**********************************************************************/

body > header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: fixed;
  height: 20vmin;
  width: 100%;
  font-size: 6vmin;
  color: white;
  background: black;
  background-image: url('https://i.imgur.com/U4qgKje.png');
  background-size: cover;
  background-position: center;
}

body > header a {
  color: white;
  text-decoration: none;
}

body > main {
  position: relative;
  background: white;
  top: 20vmin;
  min-height: 100vh;
}
/**********************************************************************/


@media only print {
  /* Print Type Scale (Make headings a little smaller) */
  html  {font-size:    10pt;}
  h1    {font-size: 2.441em;}
  h2    {font-size: 1.953em;}
  h3    {font-size: 1.563em;}
  h4    {font-size: 1.25em;}
  small {font-size: 0.8em;}

  body {
    margin:0;
    overflow:visible!important;
  }

  figure {
    display:none;
    max-height:initial;
    position: static;
  }
  
  /* Avoid Page Breaks inside Headers */
  h1, h2, h3, h4, .gist-file {
    break-after:avoid;
    page-break-after:avoid;
    page-break-inside:avoid;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-column-break-after: avoid;
  }
  
  /* Avoid Orphans & Widows */
  section, p {
    widows: 3;
    orphans: 3;
  }
  
  /* Indent First Paragraph after Header */
  h1 + p, h2 + p, h3 + p, h4 + p, 
  p:first-child {
    text-indent: 1em;
  }

  body > header {
     display:none;
     position:static;
     clear:both;
     height:initial;
     width:initial;
     background: none;
     font-size:1em;
  }

  body > main {
    top:0;
  }

  article {
    display:block;
  }

  article > section {
    display: static;
    max-width: 50em;
  }

  article > nav {
    display:none;
  }
  
  article > header {
    position:relative;
    display:block;
    margin:1em;
    clear:both;
    border: none;
    text-align:center;
  }
  
  
  #site-header {
    font-size: 50%;
    font-variant: small-caps;
  }
  
  /* Since you can't use hyperlinks in print, make them the same color
   * as text */
  a, a:visited {
    color: #000;
    text-decoration: none;
  }
  
  @-moz-document url-prefix() { 
    article > section {
      max-width: initial;
      -moz-column-gap: 2em;  
      -moz-column-width: 20em;
    }
  }
}