@font-face {
  font-family: 'Special Gothic';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/SpecialGothic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Alagard';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/alagard.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'Tandy';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'Birchleaf';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/BirchLeaf.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'Spoopy';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/SpoopyGhostPixels.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'ObeliskDemo';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/Obelisk-Demo.ttf') format('truetype');
  font-display: swap;
}

:root {
  --headerfont1: 'ObeliskDemo', serif;
  --headerfont2: 'Alagard', serif;
  --buttonfont: 'Alagard', serif;
  --bodyfont: 'Special Gothic', sans-serif;
  --asciifont: 'Tandy', monospace;
  --titlefont: 'Spoopy', monospace;
  --dropcapfont: 'Birchleaf', serif;
  --pagebg: #080808;
  --boxbg: none;
  --color: #D3D3D3;
  --link: #D3D3D3;
  --titlecolor: #D3D3D3;
  --titlebg: #080808;
  --navbg: #080808;
  --sidebarbg: #080808;
  --menucolor: #D3D3D3;
  --ascii: #D3D3D3;
  --ascii-solid: #D3D3D3;
  --accentbg: #080808;
  --hr: #D3D3D3;
}

@media (prefers-color-scheme: light) {
  :root {
    --pagebg: #f0f0f0;
    --boxbg: #f0f0f0;
    --color: #080808;
    --link: #080808;
    --titlecolor: #080808;
    --titlebg: #f0f0f0;
    --navbg: #080808;
    --sidebarbg: #f0f0f0;
    --menucolor: #080808;
    --ascii: #080808;
    --ascii-solid: #080808;
    --accentbg: #f0f0f0;
    --hr: #080808;
  }
}

* { margin: 0; padding: 0; }
img { margin: 5px; max-width: 100%; }

body::before {
  content:
"             .---.___\A\
        .-.-'  e  )__\\\A\
      .'  \\    _.'\A\
     / uu /   \\\A\
     UuUuU    |\A\
    /    ____/       .           .           . \A\
   /_/  M M         / \\         / \\         / \\\A\
       /_ _\\       /_ _\\       /_ _\\       /_ _\\\A\
________| |_________| |_________| |_________| |\A\
--------| |---------| |---------| |---------| |\A\
        | |         | |         | |         | |\A\
--------| |---------| |---------| |---------| |--------.\A\
        ' '         ' '         ' '         ' '    _.-' |_____\A\
--------------------------------------------------'  _.-'  _.-')\A\
----------------------------------------------------'  _.-'   /\A\
____________________________________________________.-'       \\   \A\
     :           :           :           :          :          | \A\
     :           :           :           :          :          |\A\
-----'-----------'-----------'-----------'----------'          |\A\
           :           :           :          :     :          | \A\
           :           :           :          :     :          |\A\
-----------'-----------'-----------'----------'-----'         /  \A\
     :           :           :           :          :        / \A\
     :           :           :           :          :       |\A\
-----'-----------'-----------'-----------'----------'       |\A\
           :           :           :          :     :        \\ \A\
           :           :           :          :     :         \\\A\
-----------'-----------'-----------'----------'-----'          | \A\
     :           :           :           :          :         / \A\
     :           :           :           :          :        |\A\
-----'-----------'-----------'-----------'----------'         \\\A\
           :           :           :          :     :          | \A\
           :           :           :          :     :         \A\
-----------'-----------'-----------'----------'-----          ";
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: 40vw;
  font-family: var(--asciifont);
  font-size: 14px;
  line-height: 1;
  white-space: pre;
  color: var(--color);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content:
"                    .           .           .           .         \A\
                   / \\         / \\         / \\         / \\        \A\
                  /_ _\        /_ _\\       /_ _\\       /_ _\\       \A\
                   | |_________| |_________| |_________| |________\A\
                   | |---------| |---------| |---------| |--------\A\
                   | |         | |         | |         | |        \A\
          .--------| |---------| |---------| |---------| |--------\A\
    _____| '-._    ' '         ' '         ' '         ' '        \A\
  ('-._  '-._  '--------------------------------------------------\A\
   \\   '-._  '----------------------------------------------------\A\
   /       '-.____________________________________________________\A\
  |          :          :           :           :           :     \A\
  |          :          :           :           :           :     \A\
  |          '----------'-----------'-----------'-----------'-----\A\
  |          :     :          :           :           :           \A\
  |          :     :          :           :           :           \A\
   \\         '-----'----------'-----------'-----------'-----------\A\
    \\        :          :           :           :           :     \A\
     |       :          :           :           :           :     \A\
     |       '----------'-----------'-----------'-----------'-----\A\
    /        :     :          :           :           :           \A\
   /         :     :          :           :           :           \A\
  |          '-----'----------'-----------'-----------'-----------\A\
   \\         :          :           :           :           :     \A\
    |        :          :           :           :           :     \A\
   /         '----------'-----------'-----------'-----------'-----\A\
  |          :     :          :           :           :           \A\
             :     :          :           :           :           \A\
              -----'----------'-----------'-----------'-----------";
  position: fixed;
  bottom: 0;
  right: 0;
  transform: none;
  overflow: hidden;
  max-width: 40vw;
  font-family: var(--asciifont);
  font-size: 14px;
  line-height: 1;
  white-space: pre;
  color: var(--color);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1500px) {
  body::before, body::after { display: none; }
}

body {
  color: var(--color);
  background: var(--pagebg);
  font-family: var(--bodyfont);
  font-size: 1rem;
  letter-spacing: .35px;
}

main {
  padding: 20px;
  width: calc(90% - 40px);
  max-width: 800px;
  margin: auto;
  background: transparent;
}

a { color: var(--link); }
a:hover { font-weight: bold; }
li a { text-decoration: none; }
p { margin: 10px 0; line-height: 1.5; }

main h1 { font-family: var(--headerfont1); font-size: 2em; margin: 5px 0; color: var(--titlecolor); text-align: center; }
main h2 { font-family: var(--headerfont1); font-size: 1.8em; margin: 10px 0; color: var(--titlecolor); text-align: center; }
main h3 { font-family: var(--headerfont2); font-size: 1.5em; margin: 5px 0; text-align: center; }
main h4 { font-family: var(--headerfont2); font-size: 1em; font-style: italic; margin: 5px 0 20px; text-align: center; }

main input, textarea, select, button {
  background: var(--accentbg); color: var(--color);
  font-family: var(--bodyfont); font-size: 1rem;
  border: none; padding: 5px; margin: 5px; border-radius: 5px;
}
main textarea { width: 90%; }
input[type="submit"], input[type="reset"] { font-size: 1rem; font-family: var(--buttonfont); background: var(--accentbg); }
input[type="submit"]:hover, input[type="reset"]:hover { background: var(--hr); cursor: pointer; }

main table { margin: 10px auto; padding: 5px; width: 100%; border-collapse: collapse; }
main th { padding: 5px; text-align: left; }
main td { padding: 3px; }
main tr:nth-child(2n) { background: var(--accentbg); }
main ul, ol { list-style-position: outside; margin: 8px 0 8px 20px; }
main li { margin: 5px 0; line-height: 1.5; }
main ul li ul, main ol li ol { margin-left: 15px; }
main blockquote { padding: 10px; background: var(--accentbg); }
main blockquote cite { font-size: .95em; position: relative; right: 0; }
main summary { cursor: pointer; margin: 5px 0; }
main details { padding: 10px; background: var(--accentbg); margin: 5px 0; border-radius: 5px; }
main hr { border: none; margin: 20px auto; }
main pre {
  padding: 10px; background: var(--accentbg);
  margin: 10px auto; border-radius: 5px;
  overflow: auto; font-family: var(--asciifont);
}
main footer { text-align: center; margin-top: 10px; padding: 10px; }

.graveyard-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--pagebg);
  padding-bottom: 20px;
}
.graveyard-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 1rem;
  letter-spacing: 0;
}
.grave-stone {
  display: inline-block;
  vertical-align: bottom;
  text-decoration: none;
  color: var(--ascii-solid);
  background: var(--pagebg);
  cursor: pointer;
  font-size: 1rem;
  margin-right: -0.31em;
}
.grave-stone:hover,
.grave-stone:focus {
  color: var(--ascii-solid);
  font-weight: normal;
  outline: none;
}
.grave-stone:focus-visible {
  outline: 2px solid var(--ascii-solid);
  outline-offset: 4px;
  border-radius: 3px;
}
.graveyard-stage pre {
  margin: 0; border-radius: 0;
  background: transparent; overflow: visible;
  white-space: pre; word-break: normal;
  padding: 16px 8px 16px 8px;
  font-family: var(--asciifont);
  color: inherit;
  font-size: 1rem;
  box-shadow: none;
}

.epitaph {
  display: none;
  padding: 20px 0 10px;
  margin-top: 16px;
  background: none;
}
.epitaph:target { display: block; }
.epitaph h2 {
  font-family: var(--headerfont1);
  font-size: 1.4em;
  margin: 0 0 8px;
  color: var(--titlecolor);
  text-align: center;
}
.epitaph p { margin: 0; text-align: center; }
.epitaph a { color: var(--link); }
.epitaph a:hover { font-weight: bold; }

#ep-default { display: block; }
:is(#ep-credits, #ep-fangsalot, #ep-fiction, #ep-library,
    #ep-outgoing, #ep-rabbitholes, #ep-shrines, #ep-sitemap,
    #ep-webcomic, #ep-unnamed1, #ep-unnamed2, #ep-unnamed3):target ~ #ep-default {
  display: none;
}

#site-footer {
  text-align: center;
  font-size: 1em;
  padding: 1em 0;
  font-style: italic;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
#site-footer a { color: var(--link); }
#site-footer a:hover { font-weight: bold; }