body {
  background: white;
  color: #000000;
  font-family: sans-serif;
}

/* Overall layout */

  /* Note that p1k3-grid is only dropped into the template for / - other
     pages get p1k3-column. */

  /* Be "responsive" and set up the grid on displays >= 38em wide. */
  @media (min-width: 38em) {
    #p1k3-grid {
      display: grid;
      grid-template-columns: 65% 33%;
      grid-template-rows: 2em auto auto;
      grid-template-areas:
        "header ."
        "entries linkdump"
        "footer footer"
    }

    #p1k3-grid header {
      grid-area: header;
      /* background-color: purple; */
    }

    #p1k3-grid .entries {
      grid-area: entries;
      padding: .5em;
      /* z-index: 1; */
      /* background-color: green; */
    }

    #p1k3-grid .linkdump {
      grid-area: linkdump;
      padding: .5em;
      overflow-x: hidden;
      /* z-index: 0; */
      /* background-color: red; */
    }

    #p1k3-grid footer {
      grid-area: footer;
      /* background-color: yellow; */
    }
  }

  header nav {
    max-width: 38em;
    margin-right: auto;
    margin-left: auto;
  }

  #p1k3-column header {
    margin-bottom: 1.2em;
  }

  /* Container for the header image on the front page */
  #imagehere {
    text-align: center;
  }

/* Footer type, etc.*/

  footer {
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
    max-width: 38em;
    padding-left: 1em;
    padding-right: 1em;
  }

  footer p {
    color: gray;
    font-size: smaller;
    font-style: italic;
    /* text-align: center; */
  }

  footer p img {
    vertical-align: middle;
  }

/* Linkdump type, etc. */

  div.linkdump h1 { margin-bottom: .5em; }

  div.linkdump { font-size: smaller; }

  div.linkdump p { margin: 0.25em 0 0.5em 0; }

  div.linkdump ul {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  div.linkdump blockquote {
    margin-left: .6em;
    margin-right: .6em;
  }

  div.linkdump p.centerpiece img,
  div.linkdump p.centerpiece {
    margin: 0;
    padding: 0;
  }

/* Individual entries */

  div.entry, div.entry-metadata {
    border: none;
    line-height: 1.5;
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
    max-width: 38em;
    padding-left: 1em;
    padding-right: 1em;
  }

  div.retcon {
    background-color: #6699CC;
    border-style: outset;
    border: 1px;
    margin-bottom: .5em;
    margin-top: .5em;
    max-width: 90%;
    padding: 1em;
  }

  /* Headers */

  h1, h2, h3, h4, h5, h6 {
    font-family: "Georgia", "DejaVu Serif", "Bistream Vera Serif", "Lucida Bright", serif;
    margin-top: 0;
    margin-bottom: 0.4em;
  }

  /* For entry date headers and other things... */
  h1 {
    font-size: 2.2em;
    font-weight: normal;
    /* font-weight: bold; */
  }

  /* <h2> for icons, titles on entries ... */
  h2 {
    font-size: 1.9em;
    font-weight: normal;
    padding-left: 0em;
  }

  h3 {
    clear: none;
    font-size: 1.8em;
    font-style: italic;
    font-weight: normal;
    /* margin-bottom: .5em; */
    text-align: left;
  }

  /* And so on. */
  h4 {
    font-size: 1.6em;
    font-style: italic;
    font-weight: normal;
  }

  h5 {
    font-size: 1.4em;
    font-style: italic;
    font-weight: normal;
  }

  h6 {
    font-size: 1.2em;
    font-style: italic;
    font-weight: normal;
  }


/* Block level elements */

  hr {
    color: gray;
    height: 1px;
  }

  pre {
    font-family: monospace;
    margin-left: .5em;
    margin-bottom: 2em;
    margin-top: 2em;
  }

  pre code {
    /* white-space: pre-wrap; */
    background-color: #EEEEF5;
    border-left: 3px solid #D1D1D4;
    display: block;
    font-size: 85%;
    overflow: auto;
    padding-left: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
  }

  /* List items: */
    li { margin-bottom: .3em; }
    dl { margin-left: 2em; }

  /* Paragraph formatting. */
    p {
      margin-bottom: 1em;
      text-indent: 0em;
    }

    p.centerpiece {
      clear: both;
      text-align: center;
    }

    .massive {
      font-size: 6em;
    }

    .bigletters {
      font-size: 2em;
      font-weight: bold;
    }

    p.signature { text-align: right; }

    p.left {
      clear: none;
      float: left;
    }

    p.right {
      clear: none;
      float: right;
    }

    p.code {
      font-family: "Consolas", "Courier", monospace;
      font-size: smaller;
      margin-left: 3em;
      text-indent: -2em;
    }

    p code {
      border: 1px solid #EEEEF5;
      border-radius: 3px;
      padding: 1.5px;
      background-color: #EEEEF5;
    }

    .footnote { font-size: smaller; }

  /* previous / next navigation */

    .datenav {
      max-width: 38em;
      margin-left: auto;
      margin-right: auto;
    }

    .datenav p.datenav-prev {
      float: left;
    }

    .datenav p.datenav-next {
      float: right;
    }

    .datenav::after { 
      content: "";
      display: block; 
      clear: both;
    }

/* Within-paragraph markup: */

    sup {
      line-height: 0;
      vertical-align: text-top;
    }

    em strong, strong em {
       font-style: normal;
       font-variant: small-caps;
       font-weight: bolder;
    }

    /* Link formatting */

      a:link    { color: #3333FF; text-decoration: none; }
      a:visited { color: #004DE6; text-decoration: none; }
      a:active  { color: #004DE6; text-decoration: underline; }
      a:hover   { color: #004DE6; text-decoration: underline; }
      a:focus   { color: #004DE6; text-decoration: underline; }

      img, img a { border: none; }

/* Navigation links to dates and topics... */

  /*
  p.datestamp {
     font-size: smaller;
     text-align: left;
     background: linear-gradient(180deg,
         rgba(0,0,0,0) calc(50% - 1px),
         rgba(200,200,200,1) calc(50%),
         rgba(0,0,0,0) calc(50% + 1px)
     );
  }

  p.datestamp i {
    padding-left: .5em;
    padding-right: .5em;
    background: white;
  }
  */

  p.datestamp {
     font-size: smaller;
     text-align: right;
     border-top: 1px solid rgba(200,200,200,1);
  }


  p.datelink, p.topiclinks {
     clear: both;
     font-size: smaller;
     text-align: right;
     margin-top: .5em;
     margin-bottom: 2em;
  }

  /* .datelink a:link { color: gray; text-decoration: none; } */
  .datelink a:hover,
  .datelink a:active { text-decoration: underline; }

  ul.datelink li img { padding: 5px; }

/* Quoting */

  blockquote {
    border-left: 3px solid #D1D1D4;
    border-right: 3px solid #D1D1D4;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 0.75em;
    margin-top: 0.75em;
    margin-left: 1.5em;
    margin-right: 1.5em;
  }

  blockquote.chat p { text-indent: -.5em; }

  /* A page-like box for wrapping around things quoted from books and such. */
  div.pagebox {
    border: 1px solid black;
    font-size: smaller;
    margin-bottom: .5em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 2em;
  }

  div.pagebox p.number {
    font-size: small;
    text-align: right;
  }

  /* booklike: Initial text indents, no spacing between paragraphs. */

  .booklike {
     padding-bottom: .2em;
     padding-top: .2em;
  }

  .booklike p {
     margin-bottom: 0em;
     margin-top: 0em;
     text-indent: 2.5em;
  }

  /* For poetry and stuff within booklike blockquotes. */
  .booklike p.stanza {
     margin-bottom: 1em;
     margin-top: 0em;
     text-indent: 0em;
  }

  blockquote.booklike {
     padding: .2em 1em .2em 1em;
  }

  blockquote.booklike p {
     margin-bottom: 0em;
     margin-top: 0em;
     text-indent: 2em;
  }

  blockquote.booklike p.stanza {
     margin-bottom: 1em;
     margin-top: 0em;
     text-indent: 0em;
  }

  blockquote.booklike p.cite,
  blockquote p.cite {
    text-align: left;
    text-indent: 3em;
  }

  address {
    font-style: italic;
    font-weight: bolder;
  }

/* Comics */

  .comics img {
    width: 100% !important;
    height: auto !important;
  }

/* Photo gallery stuff - technique from Chris Coyier at:
   https://css-tricks.com/seamless-responsive-photo-grid/ */

  .photos {
    /* Prevent vertical gaps */
    line-height: 0;

    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;
    margin-top:           1.5em;
    margin-bottom:        1.5em;
  }

  .photos img {
    /* Just in case there are inline attributes: */
    width: 100% !important;
    height: auto !important;
  }

  @media (max-width: 1000px) {
    .photos {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
  }
  @media (max-width: 400px) {
    .photos {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
  }

/* collapsible thingies with "show" buttons */

  .details .clicker-button {
    margin-left: 15px;
    vertical-align: middle;
  }

  button.clicker-button {
    background-color: white;
    border: 1.5px solid #ddc;
    border-radius: 3px;
  }

  button.clicker-button:active {
    background-color: #ddc;
    border-left: 1px solid black;
    border-top: 1px solid black;
  }

  .details .full {
    background-color: white;
    border-left: 2px solid #ddc;
    border-bottom: 2px solid #ddc;
    border-right: 2px solid #ddc;
    border-top: 2px solid #ddc;
    border-radius: 3px;
    padding: 1.5em;
  }

/* Table stuff */

  table.clean {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
  }

  table.clean td, table.clean th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
  }

  table.clean th {
    background-color: rgb(235,235,235);
  }

  table.clean td {
    vertical-align: top;
  }

  table.clean tr:nth-child(even) td {
    background-color: rgb(250,250,250);
  }

  table.clean tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
  }

  table.census { border-collapse: collapse; }

  table.census tr td {
    border: 1px dashed black;
    font-size: small;
    padding: 3px;
  }

  table.census tr th { padding: 5px; }

  table.side-by-side {
    border-spacing: 1em;
    margin-left: auto;
    margin-right: auto;
  }

  table.side-by-side th {
    font-style: italic;
    font-weight: normal;
  }

  table.side-by-side td {
    border: 1px dashed black;
    font-family: "Courier", monospace;
    font-size: small;
    padding: 1em;
  }

  table.tags {
    border-collapse: collapse;
  }

  table.tags th, table.tags td {
    padding: .5em;
    vertical-align: top;
  }

  table.tags th {
    text-align: left;
    font-weight: normal;
  }

/* Syntax highlight stuff - I used this somewhere. */

  .num { color:#2928ff; }
  .esc { color:#ff00ff; }
  .str { color:#ff0000; }
  .dstr { color:#818100; }
  .slc { color:#a020f0; font-style:italic; }
  .com { color:#838183; font-style:italic; }
  .dir { color:#008200; }
  .sym { color:black; }
  .lin { color:#555555; }
  .kwa, .kwc { color:#000000; font-weight:bold; }
  .kwb { color:#008b8b; }

  .green { color: green; }
  .yellow { color: yellow; }