body {
  font-family: Verdana, Helvetica, 'Bitstream Vera Sans', Arial, sans-serif;
  font-size: 95%;
  text-align: center;
  overflow-y: scroll;
  margin: 0;
}

/* chrome sometimes doesn't navigate if we have this on... buggy
@view-transition {
  navigation: auto;
}
*/

#links a:hover, .post-info a:hover {
  text-decoration: underline;
}

#container, #_ {
  margin: 0 auto .5em auto;
  text-align: left;
}

@media screen and (max-device-width: 640px) {
  #container, #_ {
    width: 95%;
  }
}

@media screen and (min-device-width: 641px) {
  #container, #_ {
    width: 68%;
    min-width: 550px;
    max-width: 940px;
  }
}

header, #header {
  width: 100%;
  height: 48px;
  position: sticky;
  z-index: 1;
  padding: 0;
  margin: 0;
  top: 0;
  border-top: calc(5px + .5em) solid white;
  background: transparent;
  border-bottom: 12px solid transparent;
  border-image: linear-gradient(white, white 80%, rgba(255,255,255,0)) 10;
}

header .background {
  margin: 0;
  background: black;
  border-radius: 6px;
  height: 48px;
}

#links {
  float: right;
  padding: 0.1em 1ex;
}

#links a {
  text-shadow: #000 1px 0 8px;
  color: #fff;
  text-decoration: none;
}

#links a::after {
  content: "|";
  padding-left: .6ex;
  display: inline-block;
  color: #ddd;
  text-shadow: none;
}

#links a:hover::after {
  text-decoration: none;
}

#links a + a::after {
  content: "";
}

main, #content {
  padding: 0 0.5em;
}

#date-links {
  float: right;
}

#date-links a {
  color: #888;
  text-decoration: none
}

#date-links a + a {
  color: #aaa;
}

#date-links a:hover {
  text-decoration: underline;
}

:target {
  scroll-margin-top: 70px;
}

:not(#_):target::before {
  display: inline-block;
  margin-left: -2ex;
  margin-right: .5ex;
  content: "↦";
  color: goldenrod;
  text-decoration: none;
}

main h2.scroll:first-child {
  position: sticky;
  z-index: 1;
  top: 1.1em;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

main h2.scrollable:first-child a {
  text-decoration: none;
}

h2.header:first-child a {
  color: white;
  text-shadow: #000 1px 0 8px;
}

h2.header-full:first-child {
  height: 1.25em;
}

footer {
  margin-top: .5em;
}

footer a, #footer a {
  color: #777;
  text-decoration: none;
}

footer img, #footer img {
  margin: 1em .4em;
  height: 24px;
  width: 24px;
  filter: grayscale(1);
  opacity: .5;
}

footer img:hover, #footer img:hover {
  filter: none;
  opacity: 1;
  transition: opacity 500ms, filter 500ms;
}

footer, #footer {
  text-align: center;
  font-size: 65%;
  color: #777;
}

@font-face {
  font-family: Gentium;
  src: local("Gentium"), local("Gentium Basic"), url(/static/GenBasR.woff);
  font-display: swap;
}

h1, h2, h3, h4 {
  font-family: Gentium,Georgia,'Lucida Grande',serif;
  font-weight: normal;
  letter-spacing: -0.05em;
}

h2 a, h3 a, h4 a {
  color: #000;
}

h1 {
  float: left;
  font-size: 190%;
  letter-spacing: -0.04em;
  line-height: 1.428;
  padding: 0.1em 0.5em;
  margin: 0;
  text-shadow: #000 1px 0 8px;
}

h1 a {
  text-decoration: none;
  color: #fff;
}

h2 {
  font-size: 20px;
  line-height: 1.32;
  margin: 0.2em -0.3em;
  clear: both;
}

.post-summary, .post-byline {
  margin: 0.2em auto;
}

.post-byline {
  font-style: italic;
}

.post-body {
  margin-bottom: 1em;
}

.post-info {
  font-size: 80%;
  text-align: right;
  color: #777;
}

.post-info a {
  color: #77f;
  text-decoration: none;
}

.post-details {
  border-top: 1px dotted #ccc;
}

.post-date {
}

pre code {
  display: block;
  color: #333;
  background-color: #f9f9f9;
  padding: 4px 6px;
  border: 1px solid #eee;
  border-left-width:20px;
  line-height: 1.1;
  overflow: auto;
}

tt, pre, code, samp, kbd {
  color: #000;
  font-size: 13px;
  font-family: 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono',
    'Courier New', monospace;
}

td {
  vertical-align: top;
}

.str{color:#080} .kwd{color:#008;font-weight:bold;} .com{color:#800} .typ{color:#606} .lit{color:#066} .pun{color:#660} .pln{color:#000} .tag{color:#008} .atn{color:#606} .atv{color:#080} .dec{color:#606} @media print{.str{color:#060} .kwd{color:#006;font-weight:bold} .com{color:#600;font-style:italic} .typ{color:#404;font-weight:bold} .lit{color:#044} .pun{color:#440} .pln{color:#000} .tag{color:#006;font-weight:bold} .atn{color:#404} .atv{color:#060} }