/* goodness me. https://piccalil.li/blog/a-more-modern-css-reset/ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size-adjust: ex-height 0.5;  /* https://matklad.github.io/2025/07/16/font-size-adjust.html */
}

body {
  margin: 0;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: #008;
  text-decoration: underline;
  text-decoration-color: #0083;
}

a:hover {
  color: #00f;
  text-decoration-color: #00f;
}

a img, :link img, :visited img { border: 0; }


body {
  background: #eee;
  color: #000;
  margin: 0em;
  font-family: "Palatino", Garamond, Georgia, Helvetica, Arial, Sans-Serif;
  font-size: 14pt;
}

h1 {
  font-size: 180%;
}

h2 {
  margin-top: 2ex;
  margin-bottom: 0.3ex;
  font-size: 140%;
}

h3 {
  margin-top: 1ex;
  font-size: 110%;
}

P {
  margin-block-start: 0.3ex;
}

.page {
  max-width: 800px;
  background: #fff;
  color: #000;
  padding: 1em;
  margin: 0em 0em 0em calc(max(0px, 50% - 400px));
}

.page h1 {
  margin-bottom: 0px;
}

.tagline {
  color: #444;
  font-style: italic;
  font-size: 90%;
  margin: 3ex 0 3ex 0;
}

.byline {
  color: #444;
  font-size: 70%;
  margin: 0 0 3ex 0;
}

.footnote {
  color: #888;
  font-size: 11pt;
}

IMG {
  width: 100%;
  height: auto;
}

LI {
  margin-bottom: 0.7ex;
}

PRE {
  width: 100%;
  overflow-x: scroll;
  font-size: 13pt;
  padding: 2pt;
}

PRE.z-code {
  color: #66a;
  background-color: #eee;
}

PRE.z-code .z-comment {
  color: #999;
}

PRE.z-code .z-type {
  color: #77f;
}

PRE.z-code .z-name {
  color: #080;
}

PRE.z-code .z-definition {
  font-weight: bold;
}

PRE.z-code SPAN.codechange {
  color: #c2c;
  font-weight: bold;
}

PRE.z-code SPAN.codedeletion {
  color: #f2a;
  text-decoration: line-through;
}

PRE.z-code SPAN.z-error {
  color: #f44;
}

.imagerow {
  display: flex;
  column-gap: 5px;
  margin-bottom: 15px;
}

.imagerow IMG {
  height: auto;
}

.imagecol {
  width: 50%;
  float: right;
  margin: 0 0 10px 10px;

  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

@media screen and (max-width: 850px) {
  .page {
    max-width: none;
    padding: 1.5vw;
    margin: 0em;
  }

  PRE {
    font-size: 10pt;
  }

  .imagecol {
    width: 100%;
    float: none;
    margin: 10px 0 10px 0;
  }

  .imagecol IMG {
    width: 100%;
  }
}