body {
    background: #fffeee;
    font-family: "Goudy Stout", "Bookman Oldstyle", serif;
    font-size:0.93rem;
    }
  
  h1 {
    font-size: 2.15rem;
    }  
  
  h2 {
    font-size: 1.4rem;
    }
  
  h3 {
    font-size: 1.1rem;
    }
  
  h4 {
    font-size: 1rem;
    }
  
  /* Container/wrapper for "page" content. */
  .main {
    width: 750px;
    margin: 0 auto;
    }
  
  .title {
    text-align: center;
    padding: 0.1rem 0.1rem 0 0.1rem;
    }
    
  .title p {
    font-weight:bold;
    }
  
  /* Left/right split subtitles. Used for top and bottom of page (date/subtitle, est./page #).*/
  .sub {
    width: 100%;
    }
    
  .heading {
    border-bottom:1px #000 solid;
    border-top: 3px #000 double;
    padding-bottom: -2px;
    font-weight: bold;
    }
    
  .footer {
    border-bottom: 3px #000 double;
    border-top:1px #000 solid;
    }
  
  .sub-left {
    float: left;
    }
  
  .sub-right {
    text-align:right;
    float: right;
    }
    
  .sub-left, .sub-right {
    padding: 0.5em 0.375em 0.2em 0.375em;
    }
    
  /* Make a bunch of things display in all-caps without actually being all-caps.*/
  .title, .heading, h1, h2, h3, h4, readmore, .first-word {
    text-transform: uppercase;
    }
    
  /* Column layout for main text. */
  .columns {
    columns: 3;
    }
  
  /* Container for content, including splash images.*/  
  .articles {
    display: block;
    padding: 1rem 0.275rem;
    }
    
  .articles p {
    text-indent: 1em;
    line-height:1.375em;
    margin: 0.1em;
    text-align:justify;
    }
    
  .articles h1, .articles h2, .articles h3, .articles h4 {
    margin-top:0.1em;
    margin-bottom:0.375em;
    display: table; /* so headlines they don't get broken up across columns*/
    }
  
  .block-column-article {
    display: table; /*special use case? currently unused*/
    }
  
  /* For big front-page images that take up full width.*/
  .splash {
    padding-bottom: 0rem;
    }
  
  /* Gap between pages. */
  hr {
    max-width: 750px;
    border: 0px;
    height: 2px;
    background: none;
    margin: 1.25rem auto;
    }
  
  /* Line break between articles, sections etc. */
  .main hr {
    height:1px;
    border:0px;
    background: #000;
    margin: 0.8rem 0 1rem 0;
    }
  
  /* Blockquote with fancy curly quote decoration. */
  .articles blockquote {
    margin:0;
    display: block;
    }
  
  .blockquote-inner {
    font-weight: bold;
    margin: 0.1rem;
    margin: 1rem 2rem 0 2rem;
    display: block;
    font-size: 1.2em;
    border: 0px solid red;
    }
  
  .articles .blockquote-inner p {
    text-indent: 0;
    text-align: center;
    }
  
  .articles blockquote:before, .articles blockquote:after {
    font-size: 4.5rem;
    margin: 0;
    padding: 0 0.25rem;
    position: relative;
    height: 1.5rem;
    border: 0px solid green;
    }
  
  /* Insert the fancy curly quotes */
  .articles blockquote:before {
    content: "“";
    float: left;
    top:-0.35rem;
    }
  
  .articles blockquote:after {
    content: "”";
    float: right;
    top:-1.35rem;
    }
  
  /* Put this after blockquotes and the sub-left, sub-right pairs
   * to make the 'float' effect work correctly without messing up
   * the parent element and/or breaking subsequent formatting.
   */
  clearfix {
    content: "";
    display: block;
    clear: both;  
    margin: 0;
    padding: 0;
    height: 0;
    }
  
  /* "continued..." */
  .articles .readmore p, .articles .continued p {  
    font-size: 0.89em;
    text-indent: 0;
    }
  
  .articles .readmore p {
    font-weight: bold;
    text-align: right;
    margin: 0.5rem 0 0 0;
    }
    
  .articles .readmore:after {
    display: block;
    height: 0.1rem;
    content: "";
    }
  
  /* "continued from..." */
  .continued p {
    font-style: italic;
    margin: 0.5rem 0;
    }
    
  .articles img {
    display: block;
    max-width: 100%;
    height: auto;
    text-align: center;
    margin: 0.5rem auto;
    filter: grayscale(90%); /*make images almost black-and-white*/
    }
  
  /* Optional hover effect on images.*/
  .articles img:hover {
    filter: grayscale(75%);
    }
  
  
  /*Tweaks for smaller screens + mobile devices.*/
  
  @media (max-width: 754px) {
    .main {
      width: 100%;
      }
    .columns {
      columns: 2;
      }
    }
  
  @media (max-width: 500px) {
    h1 {
    font-size: 1.95rem;
    }  
    
    h2 {
      font-size: 1.1rem;
      }
    
    h3 {
      font-size: 0.975rem;
      }
  
    h4 {
    font-size: 0.92rem;
      }
    .sub-left, .sub-right {
      max-width: 50%;
      }
  
    body {
      font-size: 0.87rem;
      }
    }
    
  @media (max-width: 400px) {
    .columns {
      columns: 1;
      }
    }