@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;
  --asciifont:    'Tandy', monospace;
  --bodyfont:     'Special Gothic', sans-serif;
  --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;
}
@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;
  }
  #sidebar,
  #sidebar header               { color: #080808; }
  #main-navigation li a         { color: #f0f0f0; background: #080808; }
  #sidebar header::before       { color: #f0f0f0; }
  #sidebar header::after        { color: #080808; }
  #sidebar .ascii-art-label pre { color: #f0f0f0; }
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  margin: 2px;
  max-width: 100%;
  height: auto;
}
body {
  background:     var(--pagebg);
  color:          var(--color);
  font-family:    var(--bodyfont);
  font-size:      1.05rem;
  letter-spacing: .5px;
}
#skip a {
  position:   absolute;
  display:    inline-block;
  left:       0;
  top:        -1000px;
  overflow:   hidden;
  background: var(--boxbg);
  color:      var(--link);
  z-index:    1000;
  padding:    5px;
}
#skip a:focus { top: 0; }
#container {
  display:   flex;
  flex-wrap: wrap;
}
#sidebar-container {
  flex:       1 1 calc(10% - 20px);
  min-width:  150px;
  background: var(--sidebarbg);
}
main {
  padding:   10px;
  display:   flex;
  flex-wrap: wrap;
  flex:      1 1 calc(85% - 20px);
}
@media (min-width: 1251px) {
  #sidebar-container {
    position: relative;
    overflow: clip;
  }
  #sidebar::before {
    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  |\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"
"  :\A__|_\A    |\A ___|\A  |\A__|__\A    _|\A __/";
    position:       absolute;
    top:            0;
    right:          0;
    white-space:    pre;
    font-family:    var(--asciifont);
    font-size:      1rem;
    color:          var(--ascii);
    line-height:    1.1;
    pointer-events: none;
    z-index:        0;
  }
  #main-navigation li a::before,
  #flee-navigation li a::before {
    content:      '•';
    font-family:  var(--asciifont);
    font-size:    1.2rem;
    margin-right: 6px;
  }
  .mobile-only { display: none; }
}
#sidebar {
  position:    sticky;
  top:         10px;
  width:       calc(100% - 20px);
  padding:     5px;
  text-align:  left;
  font-family: var(--buttonfont);
  font-size:   1.5rem;
}
#main-navigation ul { list-style-type: none; }
#main-navigation li a {
  display:         inline-block;
  width:           70%;
  letter-spacing:  0.1em;
  background:      none;
  font-family:     var(--buttonfont);
  font-size:       1.5rem;
  padding:         13px;
  text-align:      left;
  color:           var(--color);
  overflow:        hidden;
  text-decoration: none;
}
#main-navigation li a:hover { font-family: var(--dropcapfont); }
#mobile-hide      { font-family: var(--titlefont); color: var(--titlecolor); font-size: 2rem; text-align: center; }
#mobile-hide span { font-size: 0.75em; }
#flee-navigation ul { list-style-type: none; }
#sidebar #flee-navigation h2 {
  font-family: var(--titlefont);
  font-size:   2rem;
  font-weight: normal;
  color:       var(--titlecolor);
  text-align:  center;
  padding:     5px;
  margin:      0;
}
#flee-navigation li a {
  display:         inline-block;
  width:           70%;
  letter-spacing:  0.1em;
  background:      none;
  font-family:     var(--buttonfont);
  font-size:       1.5rem;
  padding:         13px;
  text-align:      left;
  color:           var(--color);
  text-decoration: none;
  overflow:        hidden;
}
#flee-navigation li a:hover { font-family: var(--dropcapfont); }
#sidebar header::before,
main h1::before,
main h1::after,
main h2::after,
main h3::after,
main hr {
  display:        block;
  white-space:    pre;
  font-family:    monospace;
  letter-spacing: 0;
  font-size:      0.8rem;
  line-height:    1.1;
  margin-top:     0.5rem;
  text-align:     center;
  color:          var(--ascii);
}
main section:not(.half):not(.third):not(.twothird):not(.quarter):not(.threequarter):not(.full),
#footer {
  padding:  15px;
  margin:   12px;
  position: relative;
}
main section:not(.half):not(.third):not(.twothird):not(.quarter):not(.threequarter):not(.full) > *,
#footer > * {
  position: relative;
  z-index:  1;
}
main section.half,
main section.third,
main section.twothird,
main section.quarter,
main section.threequarter,
main section.full {
  padding:    15px;
  margin:     12px;
  background: var(--boxbg);
}
main section.full:first-of-type                          { padding-top: 0; margin-top: 0; }
main section.full:first-of-type > h1:first-child         { margin-top: 0; }
main section.full:first-of-type > h1:first-child::before { margin-top: 0; }
main section.quarter { border: 1px dashed var(--ascii); }
section:first-of-type { position: relative; overflow: hidden; isolation: isolate; }
#site-footer {
  text-align:  center;
  font-size:   1em;
  padding:     1em 0;
  font-style:  italic;
  width:       100%;
  margin:      0 auto;
}
main a           { color: var(--link); }
main a:hover,
main a:focus     { font-weight: bold; }
main p { line-height: 1.5; margin: 1rem; }
section > p:first-of-type::first-letter {
  font-size:    2em;
  font-family:  var(--dropcapfont);
  border:       1px dashed var(--ascii);
  padding:      0.3em;
  margin-right: 0.2em;
}
main blockquote {
  border-left: 1px dashed var(--color);
  max-width:   70%;
  padding:     1rem;
  margin:      1em;
}
main hr {
  border:  none;
  height:  1em;
  opacity: 0.4;
}
main h1 {
  font-family: var(--headerfont1);
  font-weight: normal;
  font-size:   1.5em;
  color:       var(--color);
  padding:     5px;
  text-align:  center;
  margin:      1rem;
}
main h2 {
  font-family: var(--headerfont2);
  font-weight: normal;
  font-size:   1.8em;
  color:       var(--color);
  padding:     5px;
  text-align:  left;
  margin:      1rem;
}
main h3 {
  font-family: var(--headerfont2);
  font-weight: normal;
  font-size:   1.6em;
  color:       var(--color);
  padding:     5px;
  text-align:  left;
  margin:      1rem;
}
main h4 {
  font-family: var(--headerfont2);
  font-weight: normal;
  font-size:   1.4em;
  color:       var(--color);
  padding:     5px;
  text-align:  center;
  margin:      1rem;
}
main h5 {
  font-family: var(--headerfont2);
  font-weight: normal;
  font-size:   1.2em;
  color:       var(--color);
  padding:     5px;
  text-align:  center;
  margin:      1rem;
}
main h6 {
  font-family: var(--headerfont2);
  font-weight: normal;
  font-size:   1em;
  color:       var(--color);
  padding:     5px;
  text-align:  center;
  margin:      1rem;
}
main ul, main ol { list-style-position: outside; }
main li          { line-height: 1.4; margin: 1rem; }
ol { border: 1px dashed var(--ascii); padding-left: 1em; }
.flexcontainer { display: flex; flex-wrap: wrap; margin: auto; }
.full          { flex: 1 1 calc(100% - 30px); }
.half          { flex: 1 1 calc(50% - 55px);  position: relative; }
.twothird      { flex: 1 1 calc(66% - 55px); }
.third         { flex: 1 1 calc(33% - 55px); }
.quarter       { flex: 1 1 calc(25% - 60px); }
.threequarter  { flex: 1 1 calc(75% - 55px); }
.half::before {
  content:        "";
  position:       absolute;
  top:            10px;
  bottom:         10px;
  left:           0;
  width:          2px;
  pointer-events: none;
}
table {
  border-collapse: collapse;
  width:           100%;
  font-family:     var(--bodyfont);
}
th, td {
  padding:    8px 8px 8px 1em;
  text-align: left;
}
th { font-weight: normal; }
cite[itemprop="bk_title"] { color: var(--color); }
.centertext {
  text-align:  center;
  font-family: var(--titlefont);
  font-size:   2em;
  color:       var(--color);
  background:  var(--pagebg);
}
#centertext {
  font-family: var(--titlefont);
  font-size:   2em;
  text-align:  center;
}
.clear { display: flow-root; }
.full form { max-width: 900px; }
.full h3   { margin-top: 2rem; }
fieldset {
  border:        2px dashed var(--titlebg);
  padding:       1rem;
  margin-bottom: 1.5rem;
}
legend {
  font-style:     italic;
  padding:        0 0.5rem;
  letter-spacing: 1px;
}
label {
  display: block;
  margin:  0.4rem 0;
  cursor:  pointer;
}
input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: var(--color);
}
input[type="checkbox"]:focus-visible {
  outline:        2px solid var(--color);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  input[type="checkbox"] { width: 24px; height: 24px; margin-right: 0.8rem; }
  label                  { font-size: 1.1rem; }
}
#sidebar .ascii-art-label     { width: 100%; overflow: hidden; }
#sidebar .ascii-art-label pre {
  font-size:   clamp(0.5rem, 1.6vw, 0.95rem);
  line-height: 1.1;
  overflow:    hidden;
  color:       var(--ascii-solid);
}
.ascii-art-label pre {
  display:     table;
  font-family: var(--asciifont);
  margin:      0 auto;
  text-align:  left;
  line-height: 1.3;
  font-size:   16px;
}
a:has(pre),
pre a {
  text-decoration: none;
  font-family:     var(--asciifont);
  display:         block;
}
div.ascii-art-label pre.door-open         { display: none; }
div.ascii-art-label pre.door-closed       { display: table; }
div.ascii-art-label:hover pre.door-closed { display: none; }
div.ascii-art-label:hover pre.door-open   { display: table; }
@media (max-width: 768px) {
  thead          { display: none; }
  tr             { display: block; margin-bottom: 8px; }
  td             { display: block; border: none; }
  td:first-child { font-family: var(--headerfont2); font-weight: normal; }
  main section.half,
  main section.third,
  main section.twothird,
  main section.quarter,
  main section.threequarter { flex: 0 0 100%; }
  main section    { padding: 5px; margin: 0; }
  main blockquote { max-width: 100%; }
  main p          { margin: 0.5rem 0; }
}
@media (max-width: 1250px) {
  main                  { padding: 0; flex: 0 0 100%; display: block; }
  #sidebar-container    { flex: 0 0 100%; }
  #sidebar              { position: relative; text-align: left; margin-bottom: 1em; }
  #main-navigation li,
  #flee-navigation li    { display: inline-block; margin-bottom: .75em; }
  #main-navigation li a,
  #flee-navigation li a  { display: inline; }
  #flee-navigation       { display: none; }
  .desktop-only          { display: none; }
  .ascii-art-label       { max-width: 300px; overflow-x: auto; }
  .notice                { display: none; }
  #mobile-hide           { display: none; }
}
@media only screen and (orientation: portrait) {
  nav ul {
    display:    flex;
    flex-wrap:  nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  nav ul::-webkit-scrollbar { display: none; }
  nav ul li                  { flex-shrink: 0; }
}