/***************/
/* MEYER RESET */
/***************/
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, small, strike, strong, sub, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, 

body {
  line-height: 1.1;
}

ol, ul {
  list-style: disc;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}


/**************/
/* BASE RULES */
/**************/

html {
  font-size: 120%;
}

body {
margin: 0 auto;
max-width: 40em;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
font-family: helvetica;
}

p {
text-justify: auto;
}

a {
color: #193A6B;
}

h1, h2, h3, h4 {
margin-top: 1.4em;
}

h1 {
text-align: center;
}

pre {
text-align: center;
}

ul {
padding-left: 1.7em;
margin-top: 1.7em;
}

header {
margin-bottom: 3em;
text-align: center;
}

.banner {
font-size: 12px; 
overflow-y: hidden;
@media (max-width: 800px) {
font-size: 6px;
} 
}

@media print {
html {
background-color: black;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}

nav {
  float: center;
  margin-top: 12px; // @TODO: Vertically middle align
  font-family: helvetica;
  font-size: 18px;

    a {
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;

    }
}

footer {
  font-size: 12px;
}

/********************/
/* FOR SMALL SCREEN */
/********************/


@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 14px;
}
h1 {
font-size: 1.8em;
}
}

/********************/
/* DARK MODE OR NOT */
/********************/

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #000000;
  }

  a {
    color: #C5D7EC;
  }
}


@media (prefers-color-scheme: light) {
  .banner img { filter: invert(1) hue-rotate(180deg); } }