body {
  background: repeating-linear-gradient(90deg, #fcdb78, #fcdb78 12px, #ffcc33 12px, #ffcc33 24px);
}

p { line-height: 1.6em; }

hr {
  border: solid #c7b591;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.center { display: block; margin-right: auto; margin-left: auto; text-align: center; }

a:hover { background-color: #ffffff; }

h1, h2, h3, h4, h5 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #463421;
}

.horizontal-list {
  display: flex;
  list-style: none;
  justify-content: center;
}
.horizontal-list li { margin-right: 10px; }
.horizontal-list img { width: 32px; }

/* box */
#container {
  margin: 3em auto;
  width: 90%;
  max-width: 700px;
  background-color: #ffffff;
  color: #151515;
  outline: 4px ridge #000000;
}

#content { padding: 10px 5% 20px 5%; }

#internals {
  outline-style: double;
  text-align: center;
  padding-bottom: 20px;
}
#internals img { width: 160px; border: 2px solid #555; }

/* menu */
#header {
  background-color: #ee9429;
  padding: 0 5%;
  border-color: #000000;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul { list-style-type: none; padding: 0.5em 0; margin: 0; }
#header li { font-size: 1em; display: inline-block; margin: 0.2em 1.5em 0.2em 0; }
#header li a { color: #463421; text-decoration: none; background-color: inherit; }
#header li a:hover { text-decoration: underline; }

/* posts */
.postlist ul { font-size: 1.2em; padding: 0; list-style-type: none; }

#nextprev { text-align: center; margin-top: 1.4em; }

.portrait { width: 256px; border: 2px solid #555; }
.duck { display: block; margin: 0 auto; width: 128px; }

/* comics */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px;
  outline-style: double; padding: 20px;
}
.cover { text-decoration: none; text-align: center; }
.cover img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid #555; margin: 0; }
.cover span { display: block; margin-top: 6px; text-decoration: underline; }
.cover:hover img { border-color: #ee9429; }

/* reader */
.page { display: none; }
.anchor { position: absolute; top: 0; }
.anchor:target + .page,
.reader:not(:has(.anchor:target)) > .page:first-of-type { display: block; }
/* Every page is the same height (a normal page fills the box's width);
   wider pages like spreads keep that height and extend past the box, up to the screen width. */
.stage { container-type: inline-size; aspect-ratio: 81 / 100; display: flex; justify-content: center; align-items: flex-start; }
.frame { position: relative; flex: none; }
.page img {
  display: block; box-sizing: border-box; border: 2px solid #555; margin: 0; width: auto;
  height: min(calc(100cqw * 100 / 81), calc((100vw - 32px) / var(--r, 0.8)));
}
.zone { position: absolute; top: 0; bottom: 0; }
.zone.back { left: 0; width: 25%; }
.zone.fwd { left: 25%; right: 0; }
.zone:hover { background: none; }
.pager { display: flex; justify-content: space-between; margin-top: 12px; }
.pager a, .pager span {
  border: 2px solid #555; padding: 0 14px; text-decoration: none; color: #463421;
  font-family: Tahoma, Geneva, sans-serif;
}
.pager span { opacity: .3; }
.pager a:hover { background: #ee9429; }
.count { text-align: center; color: #777; margin: 6px 0 0; }
.goto input { width: 3.2em; font: inherit; text-align: center; border: 2px solid #555; padding: 0 2px; }

/* all pages */
.allpages { display: none; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; outline-style: double; padding: 20px; }
.anchor:target + .allpages { display: grid; }
.thumb { text-align: center; }
.thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid #555; margin: 0; }
.thumb:hover img { border-color: #ee9429; }
.thumb span { display: block; margin-top: 4px; }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 1em; }
.contact-form { border-right: 2px solid #000; padding-right: 24px; display: flex; flex-direction: column; }
.contact-form input, .contact-form textarea { font: inherit; box-sizing: border-box; width: 100%; }
.message { border: 2px solid #000; }
.message input { border: 0; border-bottom: 2px solid #555; border-radius: 0; padding: 4px 8px; }
.message textarea { border: 0; border-radius: 0; padding: 8px; resize: vertical; display: block; }
.contact-form button {
  align-self: flex-end; margin-top: 10px; padding: 0 16px; cursor: pointer;
  border: 2px solid #555; border-radius: 0; background: #fff; color: #463421; font-family: Tahoma, Geneva, sans-serif;
}
.contact-form button:hover { background: #ee9429; }
.contact-art img { width: 100%; margin: 0; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 600px) {
  .contact { grid-template-columns: 1fr; }
  .contact-form { border-right: 0; padding-right: 0; }
}