@keyframes bg-scroll {
  from { background-position-y: 0px; }
  to { background-position-y: 192px; }
}
@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
* > :first-child { margin-top: 0; }
* > :last-child { margin-bottom: 0; }

html {
  background-color: #677;
  background-image: url("/assets/bafkreidcywd7crfrrxhb6rr77e4zu4lzobsemo2ggu5qcrwpxf4pg7um3q.png");
  background-size: 192px 192px;
  color: #000;
  font-family: "Noto Serif", "Times New Roman", sans-serif;
  font-size: 15px;
  image-rendering: crisp-edges;
  line-height: 1.3;
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
  scroll-behavior: smooth;
}
body {
  background: #fff5ee;
  height: 100vh;
  margin: 0 auto;
  max-width: 800px;
  overflow-y: scroll;
  padding: 1rem;
  transition: linear .15s filter;
}
html.htmx-request::after {
  animation: mulShdSpin 0.8s infinite ease;
  border-radius: 50%;
  bottom: 50%;
  content: "";
  display: inline-block;
  font-size: 0.5rem;
  height: 1em;
  left: 50%;
  position: sticky;
  transform: translateZ(0);
  width: 1em;
}
html.htmx-request body {
  cursor: default;
  filter: grayscale() contrast(0.667) brightness(0.667);
  -webkit-user-select: none;
  user-select: none;
}
html.htmx-request body * { pointer-events: none; }
body > article {
  display: grid;
  grid-template-areas:
    "header"
    "hr1"
    "top"
    "hr2"
    "bottom"
    "hr3"
    "footer";
}
body > article > header,
body > article > main,
body > article > nav,
body > article > hr,
body > article > footer {
  min-height: 0;
  min-width: 0;
}
body > article > header,
body > article > main,
body > article > nav,
body > article > footer { margin: 0; }
body > article > header { grid-area: header; }
body > article > header > img { filter: drop-shadow(2px -2px .333rem #000); }
body > article > header + hr { grid-area: hr1; }
body > article > main { grid-area: top; }
body > article > main + hr { grid-area: hr2; }
body > article > main ~ nav { grid-area: bottom; }
body > article > main ~ nav + hr { grid-area: hr3; }
body > article > nav { grid-area: top; }
body > article > nav + hr { grid-area: hr2; }
body > article > nav ~ main { grid-area: bottom; }
body > article > nav ~ main + hr { grid-area: hr3; }
body > article > footer { grid-area: footer; }

:target > h1,
:target > h2,
:target > h3,
:target > h4 {
  background: #8882;
  border: 2px dotted #2228;
  margin-left: -.5rem;
  margin-right: -.5rem;
  padding-left: .5rem;
  padding-right: .5rem;
}
::selection {
  background: #06f;
  color: #fff;
}

a {
  color: #04b;
  text-underline-offset: 2px;
}
a:active, a:hover { color: #f03; }
a:has(img) { contain: layout; }
a:has(img)::after {
  align-items: center;
  background-color: #fff;
  border-radius: .125rem;
  bottom: -0.2rem;
  content: url("/img/external.svg");
  display: flex;
  height: 0.8rem;
  image-rendering: smooth;
  justify-content: center;
  position: absolute;
  right: -0.2rem;
  transition: linear .15s transform;
  width: 0.8rem;
}
a:has(img):hover::after {
  box-shadow: 0px 0px .333rem 0px #222;
  transform: translate(-.4rem, -.4rem) scale(2);
}
a::selection, a ::selection { background: #f06; }
article, aside, blockquote, details, div, figure, footer, header, main, nav, section {
  display: flow-root;
  margin-bottom: .5rem;
}
dl, h1, h2, h3, h4, ol, p, pre, ul { margin-bottom: .5rem; }
blockquote, details, figure, li, section { break-inside: avoid-column; }
blockquote {
  background: #eee;
  border: 1px solid #111;
  padding: .5rem 2rem;
}
code { font-size: .8rem; }
del { background-color: #000; }
del:hover { color: #fff; }
details {
  border: 1px solid;
  padding: .5rem;
}
details > summary {
  margin: -.5rem !important;
  padding: .5rem;
}
h1, h2, h3, h4 {
  clear: both;
  line-height: 1;
  margin-top: 1rem;
}
h2, h3, h4 { font-weight: normal; }
h1 { font-size: 3.0rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
hr {
  border: none;
  border-bottom: 1px solid #999;
  column-span: all;
  margin: 1rem 0;
}
img {
  box-sizing: content-box;
  display: block;
  height: auto;
  max-width: 100%;
}
pre {
  background: #eee;
  font-size: .8rem;
  overflow: auto;
  padding: .5rem;
}
q { font-style: italic; }
sub, sup { font-size: .8rem; }
ol, ul { padding-left: 1.25rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
ol ol { list-style: lower-alpha; }

.block-center { margin: 0 auto; }
.clear-both { clear: both; }
.column-rule {
  column-rule: 1px solid #999;
  column-gap: 2rem;
}
.column-span-all { column-span: all; }
.contents { display: contents; }
.flex, .flex-center {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.flex-center { justify-content: center; }
.float-left, .float-right { margin-bottom: 0; }
.float-left {
  float: left;
  margin-right: 1rem;
}
.float-right {
  float: right;
  margin-left: 1rem;
}
.hidden { display: none; }
.inline-block { display: inline-block; }
.italics { font-style: italic; }
.no-text-wrap { text-wrap: nowrap; }
.secondary { color: #666; }
.text-center { text-align: center; }
.text-center-last { text-align-last: center; }
.text-justify { text-align: justify; }
.text-justify-last { text-align-last: justify; }
ul.list-item-margin > li { margin-bottom: .5rem; }
ul.list-item-margin > li:last-of-type { margin-bottom: 0; }
[hidden] { display: none; }
[title] {
  cursor: help;
  text-decoration: 1px dashed underline;
  text-underline-offset: 2px;
}

@media not (prefers-reduced-motion) {

html {
  animation: linear infinite 30s bg-scroll;
  background-attachment: fixed;
}

} /* @media not (prefers-reduced-motion) */

@media (min-width: 800px) {

body {
  border-left: 1px solid #444;
  border-right: 1px solid #444;
  /*
   * box-shadow:
   *   inset .5rem 0px .667rem -.5rem #446,
   *   inset -.5rem 0px .667rem -.5rem #446,
   *   0px 0px .25rem .25rem #444;
   */
}
body > article {
  column-gap: 1rem;
  grid-template-areas:
    "header ."
    "hr1    ."
    "main   nav"
    "hr3    ."
    "footer .";
  grid-template-columns: 3fr 2fr;
}
body > article > main { grid-area: main; }
body > article > main + hr { display: none; }
body > article > main ~ nav { grid-area: nav; }
body > article > main ~ nav + hr {
  display: initial !important;
  grid-area: hr3;
}
body > article > nav { grid-area: nav; }
body > article > nav + hr { display: none; }
body > article > nav ~ main { grid-area: main; }
body > article > nav ~ main + hr {
  display: initial !important;
  grid-area: hr3;
}

} /* @media (min-width: 800px) */

@media (prefers-color-scheme: dark) {

html {
  background-color: #444;
  background-image: repeating-linear-gradient(to bottom,
    #112 0px,
    #224 .333rem,
    #112 .667rem,
    #226 .667rem,
    #226 1rem);
  background-size: 1rem 1rem;
  color: #ddd;
}
body {
  background: #112;
  border-color: #666;
}

::selection {
  background: #48f;
  color: #000;
}

a { color: #6af; }
a:active, a:hover { color: #f46; }
a:has(img):hover::after { box-shadow: 0px 0px .333rem 0px #fff; }
a::selection, a ::selection { background: #f06; }
blockquote {
  background: #222;
  border-color: #aaa;
}
del { background-color: #ddd; }
del:hover { color: #111; }
details { border-color: #888; }
hr { border-bottom-color: #555; }
pre { background: #222; }

.column-rule { column-rule-color: #555; }
.secondary { color: #999; }

} /* @media (prefers-color-scheme: dark) */