html {
  padding: 0;
}

body {
  color      : #fff;
  font-family: 'Biwa',"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
  font-size  : 16pt;
  line-height: 1.2em;
  margin     : 0;
  padding    : 0;
  overflow   : hidden;
  }

section {
  display: flex;
  width  : 100vw;
  }

div {
  height    : 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  width     : 50%;
  }

div.split {
  padding: 0.8em;
  }

div.left {
  background-color: #800080;
  }

div.right {
  background-color: red;
  }

h1 {
  color      : #fff;
  font-family: 'Biwa-BlackStencilDisplayLow', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size  : 1.6em;
  font-weight: 900; /* matches the one weight we loaded */
  line-height: 1.2em;
  }

h1 img {
  border-radius: 50%;
  display      : block;
  margin       : auto;
  max-width    : 300px;
  width        : 100%;
  }

h2 {
  font-weight: 900;
  color      : black;
  font-family: 'Biwa-BlackStencilDisplayLow', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size  : 1.4em;
  }

p {
  line-height  : 1.4;
  margin-bottom: 2em;
  white-space  : pre-wrap;
  }

blockquote {
  font-size  : 1.2em;
  line-height: 1.3;
  white-space: pre-wrap;
  }

ol {
  color     : red;
  list-style: lower-alpha;
  }

li {}

a { color: black; }

a:hover { color: white; }

.red    { color: red; }

.purple { color: #800080; }

@media only screen and (max-width: 780px) {

  blockquote { margin: 0.5em; }

}

@media only screen and (max-width: 550px) {
  body { font-size: 11pt; }
  blockquote {
    font-size: 0.9em;
    line-height: 1.1;
  }

  ol { padding-inline-start: 20px; }

}