/* ---- override ---- */

img {
  filter: none;
}

#content p,
#content ul,
#content ol {
  max-width: 50rem;
}

ol li,
ul li {
  /* margin-bottom: 0.25rem; */
}

li ol,
li ul {
  /* margin-top: 0.25rem; */
}

sub,
sup {
  /* all: unset; */
}

/* ---- content ---- */

.container {
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-left: 2px dashed;
    border-right: 2px dashed;
    width: 1128px;
  }
}

/* ---- 404 Page ---- */

.container-404 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 2rem;
  margin-bottom: 1rem;
  width: auto;
  max-width: 920px;
}

div.msg-404 {
  width: auto;
  min-width: 320px;
  max-width: 400px;
}

img.img-404 {
  width: 40%;
}

@media (max-width: 767px) {
  .container-404 {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
  }

  img.img-404 {
    width: 80%;
  }
}

/* ---- headers ---- */

.page-header {
  box-shadow: 0.5rem 0.5rem black;
  margin-right: 0.5rem;
  font-family: DOS, "DotGothic16", Monaco, Menlo, Consolas, "Courier New",
    monospace;
}

h2 {
  text-align: left;
  color: white;
  /* padding-bottom: 1px; */
  border-bottom: 2px solid white;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h2::before {
  font-size: 1rem;
  content: "╭>>>";
  /* content: "╭<["; */
  /* content: "╭<§"; */
  /* content: "╒ "; */
  /* content: "┌ "; */
  /* content: "╓ "; */
  /* content: "§ "; */
  margin-left: -2px;
  margin-right: 5px;
  color: inherit;
  background-color: inherit;
}

h2::after {
  font-size: 1rem;
  content: "<<<╮";
  /* content: "]>╮"; */
  /* content: "§>╮"; */
  /* content: " ╮╮"; */
  /* content: " ╕"; */
  /* content: " ╖"; */
  /* content: " §"; */
  margin-left: 5px;
  color: inherit;
  background-color: inherit;
}

h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ---- table ---- */

table {
  border-collapse: collapse;
  margin-left: 0.5rem;
  margin-bottom: 1rem;
}

thead {
  border-bottom: double gray;
  color: whitesmoke;
}

th,
td {
  border: 1px solid gray;
  padding: 0.5rem;
  text-align: left;
}

/* ---- menu bar (nav) ---- */

.nav li {
  font-family: DOS, "DotGothic16", Monaco, Menlo, Consolas, "Courier New";
}

.nav > li > a::first-letter {
  color: #a00;
}

/* ---- breadcrumb ---- */

ol.cd-breadcrumb {
  margin-left: 0;
}

ol.cd-breadcrumb > li {
  display: inline-block;
}

ol.cd-breadcrumb > li::before {
  display: inline-block;
  /* content: "\00bb"; */
  content: "/";
  color: #959fa5;
  margin-left: 0rem;
  margin-right: 0.5rem;
}

ol.cd-breadcrumb > li:first-of-type::before {
  margin-left: 0;
}

ol.cd-breadcrumb > .current {
  color: whitesmoke;
}

.breadcrumb > li::after {
  content: "/";
  padding: 0 10px;
  color: #bbb;
}

.breadcrumb > li:first-of-type {
  padding-left: 1rem;
}

.breadcrumb > li:last-of-type::after {
  content: none;
  padding: 0;
}

/* ---- cover image ---- */

img.cover-image {
  width: 320px;
  height: auto;
  box-shadow: 0.75rem 0.75rem black;
  /* border-radius: 0px; */
  /* box-shadow: 0 0 0 2px, 9px 12px 0 4px black; */
  /* margin: 6px 12px 24px 6px; */
}

img.cover-image:hover {
  cursor: zoom-in;
}

@media (max-width: 767px) {
  img.cover-image {
    width: 80%;
    margin-bottom: 1.5rem;
  }
}

/* ---- infobox ---- */

div.infobox {
  display: flex;
  align-items: stretch; /* let infobox-right's height as cover-image */
  margin-bottom: 1.5rem;
}

div.infobox-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 1.5rem;
  height: inherit;
}

table.infobox {
  border: none;
  margin: 0;
  max-width: 640px;
}

table.infobox > thead > tr > th,
table.infobox > tbody > tr > td {
  border: none;
  padding: 0.25rem 0.75rem;
  min-width: 6rem;
  vertical-align: top;
}

table.infobox > tbody > tr > td:first-of-type {
  color: whitesmoke;
}

div.social-share {
  color: whitesmoke;
  display: flex;
  align-items: baseline;
  margin-left: 0.75rem;
}

div.social-share > span {
  font-size: 1.25rem;
  margin-right: 0.25rem;
}

a.resp-sharing-button__link:hover {
  background: none;
  margin: 0 4px 0 4px;
}

@media (max-width: 767px) {
  div.infobox {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  a.front-cover {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.infobox-right {
    margin-left: 0;
  }

  table.infobox {
    margin-bottom: 1rem;
  }
}

/* ---- gallery ---- */

div.gallery {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(184px, 1fr)
  ); /* 5 or auto-fit */
  grid-gap: 0.25rem;
  grid-auto-flow: row dense;
  width: inherit;
  margin-top: 1rem;
} /* max-width: 1128; */

a.gallery-item {
  max-width: 184px;
}

div.gallery-card {
  /* padding: 0.25rem; */
  padding: 2px;
}

img.card-image {
  max-width: 100%;
  height: auto;
}

div.card-title {
  margin: 0.5rem 0.25rem 0.5rem 0.25rem;
}

@media screen and (min-width: 1200px) {
  div.gallery {
    grid-template-columns: repeat(6, minmax(184px, 1fr)); /* 5 or auto-fit */
  }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
  div.gallery {
    grid-template-columns: repeat(
      auto-fit,
      minmax(144, 1fr)
    ); /* Set min-width to 192px */
  }
}

@media (max-width: 767px) {
  div.gallery {
    grid-template-columns: repeat(
      auto-fit,
      minmax(128px, 1fr)
    ); /* Set photos to 3 per row */
  }
}

/* ---- list item ---- */

li {
  list-style: square;
}

.nav li,
.pagination li {
  list-style: none;
  /* margin: 0; */
}

/* ---- list for taxonomies ---- */

.nav-list > li.summary {
  text-align: right;
}

.nav-list > li.summary > a::first-letter {
  color: inherit;
}

/* ---- pagination ---- */

.pagefind-ui > form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pagefind-ui > form::before {
  background-color: #bbb;
  width: 18px;
  height: 18px;
  top: -3px;
  position: relative;
  display: block;
  opacity: 0.7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
  -webkit-mask-size: 100%;
  mask-size: 100%;
  z-index: 9;
  pointer-events: none;
}

.pagefind-ui > form > input {
  width: 7rem;
  padding-right: 98px;
}

.pagefind-ui > form > input::placeholder {
  color: gray;
}

.pagefind-ui > form > .btn {
  width: 6rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.pagefind-ui > form > div {
  width: 100%;
}

/* ---- figure image ---- */

.figure-image {
  /* faded photo from https://css-tricks.com/almanac/properties/f/filter/ */
  filter: blur(0.2px) brightness(1.1) hue-rotate(5deg) opacity(0.9)
    saturate(1.3) sepia(0.4);
}

/* for images without height/width attributes */
.figure-image-size {
  max-width: 640px;
  max-height: 480px;
  width: auto;
  height: auto;
}

.figure-image:hover {
  cursor: zoom-in;
  filter: none;
}

.figure-inline {
  display: inline-block;
  margin-right: 0;
}

.figure-newline::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767px) {
  figure {
    margin: 1rem;
  }

  .figure-image-size {
    max-width: 100%;
    max-height: none;
    width: auto;
    height: auto;
  }
}

/* ---- external link ---- */

#content
  a[href^="http"]:not([href*="localhost"]):not(
    [href*="nostalibrary.tzengyuxio.me"]
  ) {
  padding-right: 0.25em;
}

#content
  a[href^="http"]:not([href*="localhost"]):not(
    [href*="nostalibrary.tzengyuxio.me"]
  ):after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  background-size: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fefe54" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');
  transform: translateY(0.1em);
}

/* ---- google custom search ---- */

.gsc-control-cse {
  padding: 0;
  margin: 8px 4px 0 4px;
}

.gsc-control-cse form {
  margin-top: 4px;
  margin-bottom: 4px;
}

.gsc-control-cse table {
  margin: 0;
}

.gsc-control-cse td {
  padding: 0;
  border: 0;
  margin: 0;
}

.gsc-control-cse .gsc-input {
  padding-left: 12px;
  padding-top: 6px;
}

.gsc-control-cse button {
  line-height: 1rem;
  padding: 6px 6px 0 6px;
  margin-right: 6px;
}

.gsc-input-box {
  border: hidden;
}

/* ---- home page ---- */

.home-list-summary {
  text-align: right;
  margin-right: 4rem;
}

.home-list-summary::before {
  content: "->";
}

/* ---- single page for posts ---- */

.post-info {
  margin: 1rem 0 2rem 0.6rem;
  border-left: #bbb double 0.4rem;
  padding-left: 1rem;
}

/* ---- modal ---- */

.modal {
  padding: 8px 20.8px 4px 20.8px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 20px;
  color: #ffffff;
  background-color: #00aaaa;
  border: 4px double #ffffff;
  border-radius: 0;
  box-shadow: 0 0 0 4px #00aaaa;
}

.modal-footer {
  background-color: inherit;
}

/* ---- catalog ---- */

.thumbnail-container {
  display: inline-block;
  position: relative;
}

.thumbnail {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 54px;
  padding: 0;
  border: none;
  margin: 0;
}

.full-image {
  display: none;
  position: fixed;
  z-index: 10;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

/* ---- hidden by default ---- */

.hidden-by-default {
  display: none;
}

/* ---- table of contents ---- */

/* ---- two column layout ---- */