/* Theme CSS Custom Properties */
:root {
  /* Light theme colors (default) - Minimal black/white theme */
  --color-bg: #ffffff;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-link: #333333;
  --color-link-underline: #333333;
  --color-link-visited: #666666;
  --color-border: #333333;
  --color-border-dark: #333333;

  /* Accent colors - subtle grays instead of purple */
  --color-accent-bg: #f8f9fa;
  --color-accent-border: #333333;
  --color-accent-light: #f0f0f0;
  --color-accent-hover: #e8e8e8;
  --color-blockquote-border: #dddddd;

  /* Code syntax highlighting */
  --color-code-bg: #f8f9fa;
  --color-code-comment: #6a737d;
  --color-code-constant: #005cc5;
  --color-code-entity: #6f42c1;
  --color-code-variable: #24292e;
  --color-code-tag: #22863a;
  --color-code-keyword: #d73a49;
  --color-code-string: #032f62;
  --color-code-value: #e36209;

  /* Quote mark color */
  --color-quote-mark: %23333333;

  /* Tag styles */
  --color-tag-bg: #f8f9fa;
  --color-tag-text: #333333;
  --color-tag-border: #333333;
  --color-tag-count: #666666;

  /* Search/form */
  --color-search-border: #333333;
  --color-search-bg: #333333;
  --color-selected-tag-bg: #e8e8e8;

  /* Comments */
  --color-comment-warning-bg: #f8f9fa;
  --color-comment-warning-border: #333333;

  /* Misc */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-help-bg: #f8f9fa;
  --color-help-border: #333333;
}

/* [[[cog
# Dark theme CSS variables - defined once, used twice
# Note: avoid CSS comments inside this string as they break the outer cog comment
dark_theme_vars = [
    ("", [
        ("--color-bg", "#1a1a2e"),
        ("--color-text", "#e8e8e8"),
        ("--color-text-muted", "#a0a0a0"),
        ("--color-link", "#7eb8ff"),
        ("--color-link-underline", "#5a9fd4"),
        ("--color-link-visited", "#c9a0dc"),
        ("--color-border", "#444"),
        ("--color-border-dark", "#888"),
    ]),
    ("Purple theme colors - darker variants", [
        ("--color-purple-gradient-start", "rgb(100, 67, 114)"),
        ("--color-purple-gradient-mid", "rgb(62, 47, 84)"),
        ("--color-purple-gradient-end", "rgb(65, 44, 85)"),
        ("--color-purple-accent", "rgb(100, 56, 127)"),
        ("--color-purple-light", "#2d2640"),
        ("--color-purple-hover", "#3d3355"),
        ("--color-purple-border", "#6a4580"),
        ("--color-purple-blockquote", "#6a4a7a40"),
    ]),
    ("Code syntax highlighting - dark theme", [
        ("--color-code-bg", "#161b22"),
        ("--color-code-comment", "#8b949e"),
        ("--color-code-constant", "#79c0ff"),
        ("--color-code-entity", "#d2a8ff"),
        ("--color-code-variable", "#c9d1d9"),
        ("--color-code-tag", "#7ee787"),
        ("--color-code-keyword", "#ff7b72"),
        ("--color-code-string", "#a5d6ff"),
        ("--color-code-value", "#ffa657"),
    ]),
    ("Quote mark color for dark theme", [
        ("--color-quote-mark", "%23b19cd9"),
    ]),
    ("Tag styles", [
        ("--color-tag-bg", "#2d2640"),
        ("--color-tag-text", "#e8e8e8"),
        ("--color-tag-border", "#555"),
        ("--color-tag-count", "#a0a0a0"),
    ]),
    ("Search/form", [
        ("--color-search-border", "#8a5ab0"),
        ("--color-search-bg", "#5a3a76"),
        ("--color-selected-tag-bg", "rgba(140, 90, 180, 0.35)"),
    ]),
    ("Comments", [
        ("--color-comment-warning-bg", "rgb(80, 50, 100)"),
        ("--color-comment-warning-border", "rgb(100, 56, 127)"),
    ]),
    ("Misc", [
        ("--color-shadow", "rgba(0, 0, 0, 0.4)"),
        ("--color-help-bg", "rgb(40, 80, 40)"),
        ("--color-help-border", "#4a8a4a"),
    ]),
]

comment_start = "/" + "*"
comment_end = "*" + "/"

def output_vars(indent="  "):
    first_section = True
    for comment, variables in dark_theme_vars:
        if not first_section:
            cog.outl("")
        first_section = False
        if comment:
            cog.outl(f"{indent}{comment_start} {comment} {comment_end}")
        for name, value in variables:
            cog.outl(f"{indent}{name}: {value};")

cog.outl(f"{comment_start} Dark theme {comment_end}")
cog.outl("[data-theme=\"dark\"] {")
output_vars("  ")
cog.outl("}")
cog.outl("")
cog.outl(f"{comment_start} Auto dark theme based on system preference (only when no explicit theme is set) {comment_end}")
cog.outl("@media (prefers-color-scheme: dark) {")
cog.outl("  :root:not([data-theme]) {")
output_vars("    ")
cog.outl("  }")
cog.outl("}")
]]] */
/* Dark theme */
[data-theme="dark"] {
  --color-bg: #1a1a2e;
  --color-text: #e8e8e8;
  --color-text-muted: #a0a0a0;
  --color-link: #7eb8ff;
  --color-link-underline: #5a9fd4;
  --color-link-visited: #c9a0dc;
  --color-border: #444;
  --color-border-dark: #888;

  /* Purple theme colors - darker variants */
  --color-purple-gradient-start: rgb(100, 67, 114);
  --color-purple-gradient-mid: rgb(62, 47, 84);
  --color-purple-gradient-end: rgb(65, 44, 85);
  --color-purple-accent: rgb(100, 56, 127);
  --color-purple-light: #2d2640;
  --color-purple-hover: #3d3355;
  --color-purple-border: #6a4580;
  --color-purple-blockquote: #6a4a7a40;

  /* Code syntax highlighting - dark theme */
  --color-code-bg: #161b22;
  --color-code-comment: #8b949e;
  --color-code-constant: #79c0ff;
  --color-code-entity: #d2a8ff;
  --color-code-variable: #c9d1d9;
  --color-code-tag: #7ee787;
  --color-code-keyword: #ff7b72;
  --color-code-string: #a5d6ff;
  --color-code-value: #ffa657;

  /* Quote mark color for dark theme */
  --color-quote-mark: %23b19cd9;

  /* Tag styles */
  --color-tag-bg: #2d2640;
  --color-tag-text: #e8e8e8;
  --color-tag-border: #555;
  --color-tag-count: #a0a0a0;

  /* Search/form */
  --color-search-border: #8a5ab0;
  --color-search-bg: #5a3a76;
  --color-selected-tag-bg: rgba(140, 90, 180, 0.35);

  /* Comments */
  --color-comment-warning-bg: rgb(80, 50, 100);
  --color-comment-warning-border: rgb(100, 56, 127);

  /* Misc */
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-help-bg: rgb(40, 80, 40);
  --color-help-border: #4a8a4a;
}

/* Auto dark theme based on system preference (only when no explicit theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1a1a2e;
    --color-text: #e8e8e8;
    --color-text-muted: #a0a0a0;
    --color-link: #7eb8ff;
    --color-link-underline: #5a9fd4;
    --color-link-visited: #c9a0dc;
    --color-border: #444;
    --color-border-dark: #888;

    /* Purple theme colors - darker variants */
    --color-purple-gradient-start: rgb(100, 67, 114);
    --color-purple-gradient-mid: rgb(62, 47, 84);
    --color-purple-gradient-end: rgb(65, 44, 85);
    --color-purple-accent: rgb(100, 56, 127);
    --color-purple-light: #2d2640;
    --color-purple-hover: #3d3355;
    --color-purple-border: #6a4580;
    --color-purple-blockquote: #6a4a7a40;

    /* Code syntax highlighting - dark theme */
    --color-code-bg: #161b22;
    --color-code-comment: #8b949e;
    --color-code-constant: #79c0ff;
    --color-code-entity: #d2a8ff;
    --color-code-variable: #c9d1d9;
    --color-code-tag: #7ee787;
    --color-code-keyword: #ff7b72;
    --color-code-string: #a5d6ff;
    --color-code-value: #ffa657;

    /* Quote mark color for dark theme */
    --color-quote-mark: %23b19cd9;

    /* Tag styles */
    --color-tag-bg: #2d2640;
    --color-tag-text: #e8e8e8;
    --color-tag-border: #555;
    --color-tag-count: #a0a0a0;

    /* Search/form */
    --color-search-border: #8a5ab0;
    --color-search-bg: #5a3a76;
    --color-selected-tag-bg: rgba(140, 90, 180, 0.35);

    /* Comments */
    --color-comment-warning-bg: rgb(80, 50, 100);
    --color-comment-warning-border: rgb(100, 56, 127);

    /* Misc */
    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-help-bg: rgb(40, 80, 40);
    --color-help-border: #4a8a4a;
  }
}
/*[[[end]]]*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
h5 {
  margin-bottom: 0.7em;
}
q:before,
q:after {
  content: "";
}
pre {
  white-space: pre-wrap;
  overflow: auto;
  width: 98%;
  margin-bottom: 1.6em;
}
a:link {
  color: var(--color-link);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--color-link-underline);
}

.blogmark-image {
  display: block;
  margin: 1em auto;
  box-shadow: 0px 0px 6px 3px var(--color-shadow);
}

a:visited {
  color: var(--color-link-visited);
  border-color: var(--color-link-visited);
}

a:link:focus,
a:link:hover,
a:link:active {
  text-decoration: none;
  border-bottom-style: dotted;
}

a.a-img:link,
a.a-img:link:focus,
a.a-img:link:hover,
a.a-img:link:active {
  /* No border on links that just contain an image */
  border-bottom: none;
}

body {
  font-family: 'Nunito', "Helvetica Neue", helvetica, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
strong {
  font-weight: bold;
}
em,
em strong {
  font-style: italic;
}
dl {
  margin-bottom: 1em;
}
dt {
  font-weight: bold;
}
dd {
  padding-left: 1.5em;
}
p.smallhead-toolbar {
  width: 940px;
  margin: 0 auto 3px auto;
}
a#atomfeedlink {
  float: right;
  border-bottom: none;
}
a#atomfeedlink svg {
  height: 20px;
  width: 20px;
}
p.bighead-toolbar img,
p.smallhead-toolbar img {
  vertical-align: top;
  padding-top: 2px;
}
p.bighead-toolbar a.signin,
p.smallhead-toolbar a.signin {
  text-decoration: none;
}
img.bubble {
  vertical-align: top;
}
.date-and-tags {
  font-size: 0.85rem;
}
div#sidead {
  margin-top: 2em;
}
div#ft {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
  text-align: center;
  margin: 15px 0 0.4em 0;
  padding: 10px 0;
  clear: both;
  font-size: 0.85em;
  margin-top: auto;
}
div#ft ul,
div#ft li {
  display: inline;
  padding-right: 1em;
  color: var(--color-text);
}
div#ft a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
p#previouslyhosted {
  clear: both;
  padding: 0.5em 0 0.5em 35px;
  font-size: 0.8em;
  color: var(--color-text-muted);
}
div#wrapper {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: hidden;
  flex: 1;
}
div#primary {
  width: 560px;
  margin-right: 35px;
  float: left;
}
div#primary blockquote,
.item-link blockquote,
div#primary .quote blockquote blockquote {
  margin: 1em 0;
  border-left: 0.75em solid var(--color-blockquote-border);
  padding-left: 0.75em;
}
div#primary blockquote blockquote,
.item-link blockquote blockquote {
  border-left: none;
  padding-left: 1.5em;
}
div#secondary {
  width: 280px;
  float: left;
}
div#secondary img.bubble {
  vertical-align: top;
  padding-top: 1px;
}
div#secondary h3 {
  font-family: 'Caveat', georgia, serif;
  margin: 0.5em 0;
}
div#secondary ul li {
  margin-bottom: 0.56em;
  font-size: 0.9em;
}
div#secondary div.photos {
  clear: both;
}
div#secondary a.photolink {
  position: relative;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  width: 40px;
  height: 40px;
}
div#secondary div.photos img {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  position: absolute;
  top: 0px;
  left: 0px;
}
div#secondary ul {
  clear: both;
  margin-top: 0.5em;
}
.item-quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  text-indent: 23px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  word-break: break-word;
}
.item-quote > blockquote p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
.quote .context {
  font-weight: normal;
}
p.cite {
  text-indent: 16px;
  font-weight: bold;
}
div.metabox {
  font-size: 0.9em;
}
div.metabox p {
  margin-bottom: 0.8em;
}
div.series-info {
  margin: 2em 0;
}
div.series-info li {
  margin-left: 1.5em;
  list-style-type: decimal;
}
div.entryPage {
  border-bottom: none;
}
.entry img,
.blogmark img,
.note img,
.entry video,
.blogmark video,
.note video {
  max-width: 100%;
}
/* Center embedded tweets in articles */
div.entry div.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}
div.entry a {
  word-break: break-word;
}
div.entry table,
div.blogmark table {
  margin: 1em 0;
}
div.entry table th,
div.entry table td,
div.blogmark table th,
div.blogmark table td,
div.note table th,
div.note table td {
  font-size: 0.9em;
  padding-right: 0.5em;
}
div.entry table td,
div.blogmark table td,
div.note table td {
  vertical-align: top;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
}
div.entry table th,
div.blogmark table th,
div.note table th {
  font-weight: bold;
  border-bottom: 1px solid var(--color-border-dark);
}
div.entry span.textago {
  font-family: helvetica, sans-serif;
  color: var(--color-text-muted);
  font-size: 0.75em;
  font-weight: normal;
  white-space: nowrap;
}
div.entry h2 {
  font-size: 1.8em;
  line-height: 1.4;
  font-family: 'Caveat', georgia, serif;
  margin: 0 0 0.8em 0;
}
div.entry h2 a {
  margin-left: -27px;
  padding-left: 27px;
  text-decoration: none;
}
div.entry h2 a:hover {
  background: url(/static/css/img/arrow.png);
  background-repeat: no-repeat;
  background-position: 0 3px;
}
div.entry h3,
div.entry h4 {
  line-height: 1.4;
  font-family: 'Caveat', georgia, serif;
  font-size: 1.4em;
  margin: 1.2em 0 0.5em 0;
}
div.entry h4 {
  font-size: 1.1em;
}
div.entry p,
div.day p {
  margin: 0 0 0.8em 0;
}
div.entry ul,
div.entry ol,
div.blogmark ul,
div.blogmark ol,
div.quote ul,
div.quote ol,
div.note ul,
div.note ol {
  margin-bottom: 0.8em;
}
div.entry li,
div.blogmark li,
div.quote li,
div.note li {
  margin-left: 1em;
  list-style-type: square;
}
div.entry ol li,
div.blogmark ol li,
div.note ol li,
div.quote ol li {
  list-style-type: decimal;
  margin-left: 2em;
}
div.entry ol li ul li,
div.blogmark ol li ul li {
  list-style-type: square;
}
div.entry iframe {
  width: 100%;
}
div.entry div.entryFooter {
  font-size: 0.9em;
  margin-top: 1em;
  border-top: 1px solid var(--color-border);
  padding-top: 0.5em;
}
div.entry p.mobile-date {
  color: var(--color-text-muted);
  margin-bottom: 0.5em;
  margin-top: -0.5em;
  display: none;
}
div#bighead {
  width: 940px;
  margin: 0 auto;
  padding: 25px 10px 15px 10px;
}
div#bighead h1 {
  font-size: 1.6em;
  margin-bottom: 0.4em;
  font-size: 2em;
  line-height: 1;
  font-family: 'Caveat', georgia, serif;
  font-weight: 700;
}
div#bigheadcontainer {
  position: relative;
}
div#band {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
  margin-bottom: -1.55em;
  line-height: 1em;
  height: 1.55em;
}
div#secondary div.day {
  border-bottom: 1px solid var(--color-border);
  clear: both;
}
div#searchbox {
  width: 280px;
  position: absolute;
  top: 0px;
  left: 485px;
}
div#searchbox input.text {
  border: 1px solid var(--color-search-border);
  vertical-align: middle;
  width: 150px;
  padding: 1px 1px 2px 1px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#searchbox input.image {
  vertical-align: middle;
}
h2.overband,
div#primary h2.overband {
  color: white;
  padding: 4px 0px 3px 0;
  margin: 0;
  line-height: 1em;
  margin-bottom: 0.98em;
  font-weight: normal;
  vertical-align: middle;
}
h2.overband img.feedicon {
  vertical-align: middle;
  position: relative;
  top: -2px;
}
h2.overband span {
  font-size: 0.8em;
  vertical-align: middle;
}
h2.overband a {
  color: #fff;
}
div#smallhead {
  margin-bottom: 15px;
  text-align: left;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
}
div#smallhead #smallhead-inner {
  width: 940px;
  margin: 0 auto;
  padding: 8px 0px;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
}
div#smallhead #smallhead-inner h1 {
  font-weight: 700;
  font-family: 'Caveat', georgia, serif;
  font-size: 1.8em;
}
div#smallhead a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
#smallhead-about {
  padding-right: 1em;
}
div#smallhead span {
  float: right;
  padding: 2px 5px 1px 0px;
  font-size: 0.9em;
  vertical-align: middle;
}
div#smallhead span u {
  font-family: "courier";
}
div#smallhead span input {
  padding: 0 0 0 5px;
  vertical-align: middle;
}
div#smallhead span form {
  display: inline;
  margin: 0;
  padding: 0;
}
body.smallhead div#smallhead {
  margin-bottom: 0px;
  padding: 2px 0;
}
body.smallhead div#ft {
  margin-top: 0px;
}
body.smallhead h2.band {
  margin-top: 0px;
}
body.smallhead div#wrapper {
  padding: 15px 0;
}
h2.band {
  padding-left: 35px;
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  padding: 3px 0 2px 35px;
  clear: both;
  background-image: url(/static/css/img/purple-gradient.png);
  color: white;
  font-weight: normal;
}
p#commentwarning {
  padding: 0.4em;
  border: 1px dotted var(--color-comment-warning-border);
  background-color: var(--color-comment-warning-bg);
}
div#comment-wrapper {
  width: 940px;
  margin-left: 35px;
}
div#comments {
  float: left;
  width: 620px;
  padding-right: 35px;
  padding-top: 1em;
}
div#comments p {
  overflow: auto;
  margin-bottom: 0.6em;
}
div#comments ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div#comments li {
  margin: 0 0 1em 0;
  font-size: 0.9em;
}
div#comments li li {
  font-size: 1em;
}
div#comments li ul {
  list-style-type: square;
  padding-left: 1em;
}
div#comments li ol {
  padding-left: 1em;
  list-style-type: decimal;
}
div#comments blockquote {
  margin: 1em 1.5em;
}
div#comments em {
  font-style: italic;
}
div#comments q {
  font-style: italic;
}
div#comments p.commentFooter {
  font-size: 0.85em;
  position: relative;
  top: 5px;
  margin: 10px 0 0 45px;
  color: var(--color-text-muted);
}
div#comments ol li {
  background-image: url(/static/css/img/comment-top-grey.gif);
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 0 2em 0;
}
div#comments ol li li {
  background: none;
  margin: 0 0 1em 0;
}
div#comments div.comment {
  padding: 1em 1em 0 1em;
  background-image: url(/static/css/img/comment-bottom-grey.gif);
  background-repeat: no-repeat;
  background-position: bottom;
}
div#comments ol li.openid {
  background-image: url(/static/css/img/comment-top-orange.gif);
}
div#comments ol li.openid div.comment {
  background-image: url(/static/css/img/comment-bottom-orange.gif);
}
div#comments ol li.simon {
  background-image: url(/static/css/img/comment-top-purple.gif);
}
div#comments ol li.simon div.comment {
  background-image: url(/static/css/img/comment-bottom-purple.gif);
}
div#comments p.commentFooter a:link,
div#comments p.commentFooter a:visited {
  color: var(--color-text);
}
div#comments p.commentFooter a:hover,
div#comments p.commentFooter a:active {
  color: var(--color-text-muted);
}
div.commentpreview {
  font-size: 0.9em;
  padding: 0.5em;
  border: 2px solid var(--color-border);
  margin-bottom: 1em;
}
div#addcomment {
  float: left;
  padding: 1em 0;
  width: 280px;
}
div#addcomment p {
  font-size: 0.9em;
}
div#addcomment p.formrow {
  clear: both;
}
div#addcomment p.formrow label {
  float: left;
  width: 70px;
}
div#addcomment input.text {
  border: 1px solid var(--color-search-border);
  font-size: 1.05em;
  float: left;
  width: 206px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
div#addcomment textarea {
  border: 1px solid var(--color-search-border);
  padding: 3px;
  width: 270px;
  background-color: var(--color-bg);
  color: var(--color-text);
}
body form.commentpreview ul.errorlist li {
  list-style-type: none;
  margin: 0;
  background-color: var(--color-accent-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 3px 3px 1px 3px;
}
form.commentpreview p.formrow {
  margin-top: 5px;
  clear: both;
}
form.commentpreview p.formrow label {
  width: 4em;
  display: block;
  float: left;
}
form.commentpreview ul li {
  list-style-type: none;
  margin: 0 0 0 4em;
}
table.monthcalendar {
  border: 1px solid var(--color-border);
  width: 241px;
  margin-left: 1px;
  margin-bottom: 25px;
}
table.monthcalendar caption {
  text-align: center;
  font-weight: bold;
  margin: 0 auto;
  padding-bottom: 4px;
}
table.monthcalendar caption a.nextprev {
  text-decoration: none;
  padding: 0 7px;
  border-bottom: none;
}
table.monthcalendar td,
table.monthcalendar th {
  font-size: 0.9em;
  border: 1px solid var(--color-border);
  text-align: center;
  width: 14.28%;
}
table.monthcalendar td strong {
  font-size: 1.1em;
}
table.monthcalendar td.today {
  border: 2px solid #888;
}
table.monthcalendar td a {
  display: block;
  padding: 1px 4px 0px 4px;
  text-decoration: none;
  border-bottom: none;
}
table.monthcalendar td a:link:focus,
table.monthcalendar td a:link:hover,
table.monthcalendar td a:link:active {
  border-bottom: none;
}
div#primary h2 {
  margin-bottom: 0.5em;
  line-height: 1.4em;
}
div#primary div.photoset {
  font-size: 0.9em;
  position: relative;
}
div#primary div.photoset p.meta {
  font-size: 0.9em;
}
div#primary div.segment {
  clear: both;
  padding: 0 0 0.75em 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75em;
}
div#primary div.blogmark {
  font-size: 0.9em;
}
div#primary div.blogmark p,
div#primary div.quote p,
div#primary .elsewhere-in-primary p:not(:last-child) {
  margin-bottom: 0.8em;
}
div#primary div.photoset img.primary {
  background-image: url(/static/css/img/set_case.png);
  padding: 8px 8px 12px 8px;
  background-repeat: no-repeat;
  margin-right: 8px;
}
div#primary div.photoset a.primary:link,
div#primary div.photoset a.primary:visited,
div#primary div.photoset a.primary:hover,
div#primary div.photoset a.primary:active {
  float: left;
}
div#primary div.quote > blockquote {
  clear: both;
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: 9px -5px;
  border-left: none;
}
/* The text-indent is ignored on the first paragraph if it
is also the last paragraph (because it is inline), so in
the case where there is only one contained paragraph we
indent the blockquote itself. */
div#primary div.quote > blockquote:has(p:only-child),
div#primary div.quote > blockquote p:first-child {
  text-indent: 23px;
}
/* But not on nested blockquote */
div#primary div.quote blockquote blockquote:has(p:only-child),
div#primary div.quote blockquote  blockquote p:first-child {
  text-indent: 0;
}

div#primary div.quote > blockquote p:last-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='11' y='171' font-family='Times New Roman, serif' font-size='180' fill='%238A2BE2'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  padding-right: 25px;
  display: inline;
}
div#primary div.quote p.cite {
  font-size: 0.9em;
  text-indent: 16px;
}

div#primary div.note p:not(.date-and-tags) {
  margin-bottom: 1em;
}

ul#searchorder {
  border-bottom: 1px solid var(--color-text);
  margin: 0 0 0.5em 0;
  padding: 0;
  height: 1em;
}
ul#searchorder li {
  display: block;
  float: left;
  border: 1px solid var(--color-text);
  margin: 0 0 0 1em;
  line-height: 1em;
  position: relative;
  top: -2px;
  padding-top: 1px;
}
ul#searchorder li.selected {
  border-bottom: 1px solid var(--color-bg);
}
ul#searchorder a {
  line-height: 1em;
  padding: 0.2em 1em;
  text-decoration: none;
  font-size: 0.8em;
}
.quote blockquote br,
div#secondary div.day br {
  display: block;
  line-height: 0;
  margin-bottom: 0.3em;
}
div.paginator {
  clear: both;
  padding: 0.5em 0;
  font-size: 0.9em;
}
.pagination {
  margin-bottom: 1em;
}
.paginator a {
  text-decoration: none;
}
.paginate-pages {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-first,
.paginate-last {
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  font-weight: bold;
}
.paginate-previous,
.paginate-next {
  padding: 2px 3px;
  border: 1px solid var(--color-border);
}
.paginate-link {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
}
.paginate-current {
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  font-weight: bold;
  background-color: var(--color-accent-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
p#tagcloud {
  font-size: 1.2em;
  line-height: 1.9em;
  text-align: center;
  margin-top: 1.5em;
}
p#tagcloud .not-popular-at-all {
  font-size: 0.7em;
}
p#tagcloud .not-very-popular {
  font-size: 0.89em;
}
p#tagcloud .somewhat-popular {
  font-size: 1.07em;
}
p#tagcloud .somewhat-more-popular {
  font-size: 1.26em;
}
p#tagcloud .popular {
  font-size: 1.44em;
}
p#tagcloud .more-than-just-popular {
  font-size: 1.63em;
}
p#tagcloud .very-popular {
  font-size: 1.81em;
}
p#tagcloud .ultra-popular {
  font-size: 2em;
}
p#currenttags .more {
  text-decoration: none;
  border: none;
}
div#wrapper div.wide {
  width: 640px;
}
div.help {
  font-size: 0.9em;
  border: 1px solid var(--color-help-border);
  background-color: var(--color-help-bg);
  padding: 0.5em 45px 0 0.8em;
  background-image: url(/static/css/img/questionmark.png);
  background-repeat: no-repeat;
  background-position: top right;
}
div.help p {
  margin: 0 0 1em 0;
}

.search-input,
.search-submit {
  border: 1px solid var(--color-search-border);
  padding: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
.search-input {
  width: 80%;
  background-color: var(--color-bg);
  color: var(--color-text);
}
.search-submit {
  background-color: var(--color-search-bg);
  color: white;
  cursor: pointer;
}
div p.search-selections {
  margin-top: 0.5em;
  font-size: 0.8em;
}
a.selected-tag {
  border: 1px solid var(--color-border-dark);
  text-decoration: none;
  padding: 2px 5px;
  background-color: var(--color-selected-tag-bg);
  color: var(--color-text);
}
div p.search-selections .filters {
  padding-right: 0.6em;
}

.archive-h2 {
  font-size: 1.4em;
}
h3.blog-mixed-list-year {
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-size: 1.2em;
}

.elsewhere-date {
  display: none;
}

#primary .elsewhere-in-primary {
  display: none;
}

@media (max-width: 964px) {
  div.entry {
    max-width: 680px;
  }
  div.entry p.mobile-date {
    display: block;
  }
  #primary .elsewhere-in-primary {
    display: block;
  }
  .elsewhere-date {
    display: inline;
  }
  .hide-secondary-on-mobile {
    display: none;
  }
  div#secondary {
    float: none;
    width: auto;
    padding-top: 15px;
    clear: both;
  }
  div#primary {
    width: 100%;
  }
  div#wrapper {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 10px;
  }
  body.smallhead div#wrapper {
    width: auto;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    background-image: none;
  }
  div#bighead {
    width: 100%;
    box-sizing: border-box;
  }
  div#bighead h1 {
    font-size: 1.5em;
  }
  div#smallhead #smallhead-inner {
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
  }
  div#searchbox {
    display: none;
  }
  p.this-is {
    display: none;
  }
  object,
  img {
    max-width: 100%;
  }
  p#currenttags {
    width: auto;
  }
  #secondary h2.overband {
    /* No longer on purple background */
    color: black;
    font-weight: bold;
    font-size: 1.2em;
  }
}

/*!
 * GitHub Light v0.5.0
 * Copyright (c) 2012 - 2017 GitHub, Inc.
 * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
 */

.pl-c /* comment, punctuation.definition.comment, string.comment */ {
  color: var(--color-code-comment);
}

.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
  color: var(--color-code-constant);
}

.pl-e /* entity */,
.pl-en /* entity.name */ {
  color: var(--color-code-entity);
}

.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
  color: var(--color-code-variable);
}

.pl-ent /* entity.name.tag, markup.quote */ {
  color: var(--color-code-tag);
}

.pl-k /* keyword, storage, storage.type */ {
  color: var(--color-code-keyword);
}

.pl-s /* string */,
.pl-pds /* punctuation.definition.string, source.regexp, string.regexp.character-class */,
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
.pl-sr /* string.regexp */,
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
  color: var(--color-code-string);
}

.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
  color: var(--color-code-value);
}

.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
  color: #b31d28;
}

.pl-ii /* invalid.illegal */ {
  color: #fafbfc;
  background-color: #b31d28;
}

.pl-c2 /* carriage-return */ {
  color: #fafbfc;
  background-color: #d73a49;
}

.pl-c2::before /* carriage-return */ {
  content: "^M";
}

.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
  font-weight: bold;
  color: #22863a;
}

.pl-ml /* markup.list */ {
  color: #735c0f;
}

.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
  font-weight: bold;
  color: #005cc5;
}

.pl-mi /* markup.italic */ {
  font-style: italic;
  color: #24292e;
}

.pl-mb /* markup.bold */ {
  font-weight: bold;
  color: #24292e;
}

.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
  color: #b31d28;
  background-color: #ffeef0;
}

.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
  color: #22863a;
  background-color: #f0fff4;
}

.pl-mc /* markup.changed, punctuation.definition.changed */ {
  color: #e36209;
  background-color: #ffebda;
}

.pl-mi2 /* markup.ignored, markup.untracked */ {
  color: #f6f8fa;
  background-color: #005cc5;
}

.pl-mdr /* meta.diff.range */ {
  font-weight: bold;
  color: #6f42c1;
}

.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
  color: #586069;
}

.pl-sg /* sublimelinter.gutter-mark */ {
  color: #959da5;
}

.pl-corl /* constant.other.reference.link, string.other.link */ {
  text-decoration: underline;
  color: #032f62;
}

/* Custom page templates */
.entry-wide div#primary {
  width: auto;
  margin: 0 1em;
  float: none;
  max-width: 98%;
}
.entry-wide div#wrapper {
  overflow: visible;
}

body.homepage .hide-on-homepage {
  display: none;
}

#h1-nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
#h1-nav-wrapper h1 {
  margin-right: 3em;
}
#h1-nav-wrapper ul {
  list-style-type: none;
  margin: 0;
  padding: 0 1em 0 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 0.5em;
}
#h1-nav-wrapper li {
  display: inline;
  padding-right: 0.5em;
}
#h1-nav-wrapper li a {
  border-bottom: none;
  font-weight: bold;
}

/* Tag styles */
a.item-tag {
  display: inline-block;
  background-color: var(--color-tag-bg);
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--color-tag-border);
  border-bottom: 1px solid var(--color-tag-border);
  text-decoration: none;
  color: var(--color-tag-text);
  margin-right: 0.3em;
  margin-bottom: 0.5em;
}
a.item-tag:hover {
  background-color: var(--color-accent-hover);
}
#bighead a.item-tag {
  padding: 0px 8px;
}
.item-tag span {
  color: var(--color-tag-count);
  font-size: 0.6em;
  vertical-align: middle;
}

/* Nested lists - used on /2020/ page

/* Inline #3 | http://0.0.0.0:8033/2019/ */

div.entry li li {
  margin-bottom: 0.2em;
}
div.entry ul ul {
  margin-bottom: 0;
}
div.entry li li:first-of-type {
  margin-top: 0.2em;
}

.card-container img {
  display: block;
  max-width: 100%;
}

a:link.photoswipe-img,
a:visited.photoswipe-img,
a:hover.photoswipe-img,
a:focus.photoswipe-img,
a:active.photoswipe-img {
  border: none;
}

div.ea-placement a:link {
  border-bottom: none;
}

.recent-articles {
  margin-top: 1em;
}
.recent-articles li {
  list-style-type: square;
  margin-left: 1em;
  margin-bottom: 0.1em;
}

.tag-description {
  margin-bottom: 1em;
}

/* Theme toggle button */
#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5em;
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
#theme-toggle:hover {
  opacity: 1;
}
#theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Edit page link */
body div .edit-page-link {
  margin-top: 0.5em;
}
a.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  padding: 3px 8px;
  background-color: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.edit-link:hover {
  background-color: var(--color-accent-hover);
}
a.edit-link svg {
  flex-shrink: 0;
}
a.random-post-link {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-top: 0.3em;
  margin-right: 0.75em;
  background-color: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
}
a.random-post-link:hover {
  background-color: var(--color-accent-hover);
  border-bottom: 1px solid var(--color-border);
}
a.random-post-link svg {
  flex-shrink: 0;
}
a.random-tag-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  padding: 4px 10px;
  margin-right: 1em;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}
a.random-tag-nav:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
a.random-tag-nav svg {
  flex-shrink: 0;
}