@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-display: swap;
}

@font-face {
  font-family: 'Alagard';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/alagard.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Birchleaf';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/BirchLeaf.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Tandy';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'ObeliskDemo';
  src: url('https://pearlnightslair.neocities.org/assets/fonts/Obelisk-Demo.ttf') format('truetype');
  font-display: swap;
}

:root {
  --pagebg:       #080808;
  --cover:        #080808;
  --cover-accent: #D3D3D3;
  --page-bg:      #080808;
  --color:        #D3D3D3;
  --color-muted:  #D3D3D3;
  --link:         #D3D3D3;
  --divider:      #D3D3D3;
  --border:       #D3D3D3;
  --btn-border:   #D3D3D3;
  --headerfont:   'Alagard', serif;
  --titlefont:    'ObeliskDemo', serif;
  --bodyfont:     'Special Gothic', sans-serif;
  --asciifont:    'Tandy', monospace;
  --dropcapfont:  'Birchleaf', serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --pagebg:       #f0f0f0;
    --cover:        #f0f0f0;
    --cover-accent: #080808;
    --page-bg:      #f0f0f0;
    --color:        #080808;
    --color-muted:  #080808;
    --link:         #080808;
    --divider:      #080808;
    --border:       #080808;
    --btn-border:   #080808;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:      var(--pagebg);
  color:           var(--color);
  font-family:     var(--bodyfont);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}

body::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\ ";
  position:       fixed;
  bottom:         0;
  left:           0;
  overflow:       hidden;
  max-width:      25vw;
  font-family:    var(--asciifont);
  font-size:      14px;
  line-height:    1;
  white-space:    pre;
  color:          var(--color);
  opacity:        0.6;
  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\
      ..--..--.. |                )_   _(         | |         \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;
  overflow:       hidden;
  max-width:      25vw;
  font-family:    var(--asciifont);
  font-size:      14px;
  line-height:    1;
  white-space:    pre;
  color:          var(--color);
  opacity:        0.6;
  pointer-events: none;
  z-index:        0;
}

#cover {
  width:         100%;
  max-width:     1100px;
  background:    var(--cover);
  padding:       16px;
  position:      relative;
  z-index:       1;
  border-radius: 15px;
  border:        1px solid var(--cover-accent);
  box-shadow:
    inset 0 0 0 2px var(--cover),
    inset 0 0 0 3px var(--border),
    inset 0 0 0 5px var(--cover),
    inset 0 0 0 6px var(--border);
}

#page3 {
  background:     var(--page-bg);
  border-radius:  8px;
  border:         1px solid var(--border);
  overflow:       hidden;
  display:        flex;
  flex-direction: row;
  height:         700px;
}

.spread {
  width:  100%;
  height: 100%;
}

img {
  filter: grayscale(100%);
}

@media (max-width: 768px) {
  .spread { display: flex; }
}

@media (min-width: 769px) {
  .spread        { display: none; }
  #s0-content    { display: flex; }

  :is(#s1,  #s2,  #s3,  #s4,  #s5,  #s6,  #s7,  #s8,  #s9,
      #s10, #s11, #s12, #s13, #s14, #s15, #s16, #s17, #s18,
      #s19, #s20, #s21, #s22, #s23, #s24, #s25):target ~ #cover #s0-content { display: none; }

  #s1:target  ~ #cover #s1-content  { display: flex; }
  #s2:target  ~ #cover #s2-content  { display: flex; }
  #s3:target  ~ #cover #s3-content  { display: flex; }
  #s4:target  ~ #cover #s4-content  { display: flex; }
  #s5:target  ~ #cover #s5-content  { display: flex; }
  #s6:target  ~ #cover #s6-content  { display: flex; }
  #s7:target  ~ #cover #s7-content  { display: flex; }
  #s8:target  ~ #cover #s8-content  { display: flex; }
  #s9:target  ~ #cover #s9-content  { display: flex; }
  #s10:target ~ #cover #s10-content { display: flex; }
  #s11:target ~ #cover #s11-content { display: flex; }
  #s12:target ~ #cover #s12-content { display: flex; }
  #s13:target ~ #cover #s13-content { display: flex; }
  #s14:target ~ #cover #s14-content { display: flex; }
  #s15:target ~ #cover #s15-content { display: flex; }
  #s16:target ~ #cover #s16-content { display: flex; }
  #s17:target ~ #cover #s17-content { display: flex; }
  #s18:target ~ #cover #s18-content { display: flex; }
  #s19:target ~ #cover #s19-content { display: flex; }
  #s20:target ~ #cover #s20-content { display: flex; }
  #s21:target ~ #cover #s21-content { display: flex; }
  #s22:target ~ #cover #s22-content { display: flex; }
  #s23:target ~ #cover #s23-content { display: flex; }
  #s24:target ~ #cover #s24-content { display: flex; }
  #s25:target ~ #cover #s25-content { display: flex; }

  #s0:target ~ #cover :is(
    #s1-content,  #s2-content,  #s3-content,  #s4-content,  #s5-content,
    #s6-content,  #s7-content,  #s8-content,  #s9-content,  #s10-content,
    #s11-content, #s12-content, #s13-content, #s14-content, #s15-content,
    #s16-content, #s17-content, #s18-content, #s19-content, #s20-content,
    #s21-content, #s22-content, #s23-content, #s24-content, #s25-content
  ) { display: none; }

  #s0:target ~ #cover #s0-content { display: flex; }
}

.leftpage,
.rightpage {
  flex:           1;
  height:         100%;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.page-content {
  flex:       1;
  overflow-y: scroll;
  padding:    30px 35px 10px 35px;
}

.divider {
  width:      1px;
  background: var(--divider);
  flex-shrink: 0;
  align-self: stretch;
}

.page-footer {
  display:     flex;
  flex-shrink: 0;
  padding:     14px 35px 20px 35px;
  border-top:  1px dashed var(--border);
}

.leftpage  .page-footer { justify-content: flex-start; }
.rightpage .page-footer { justify-content: flex-end; }

.page-turn {
  display:         inline-block;
  font-family:     var(--headerfont);
  font-size:       1.3rem;
  color:           var(--link);
  text-decoration: none;
  border:          1px dashed var(--btn-border);
  padding:         5px 14px;
  background:      none;
}

.page-content h1 {
  font-family:   var(--titlefont);
  font-weight:   normal;
  font-size:     1.8rem;
  color:         var(--color);
  margin-bottom: 0.3em;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.page-content h1 a {
  color:           inherit;
  text-decoration: none;
}

.page-content h2 {
  font-family:    var(--headerfont);
  font-weight:    normal;
  font-size:      1.3rem;
  color:          var(--color);
  margin-top:     1.2em;
  margin-bottom:  0.3em;
  padding-top:    0.6em;
  border-top:     1px dashed var(--border);
  padding-bottom: 0.3em;
  border-bottom:  1px dashed var(--border);
}

.page-content hr {
  border:     none;
  border-top: 1px dashed var(--border);
  margin:     1em 0;
  opacity:    0.5;
}

.page-content p {
  font-family:    var(--bodyfont);
  font-size:      0.95rem;
  line-height:    1.75;
  color:          var(--color);
  margin:         0.8em 0;
  letter-spacing: 0.3px;
}

.page-content h1 + p::first-letter {
  font-size:    2em;
  font-family:  var(--dropcapfont);
  border:       1px dashed var(--border);
  padding:      0.2em 0.3em;
  margin-right: 0.2em;
  float:        left;
  line-height:  1;
}

.ascii-art-label {
  margin:          0.6em 0;
  display:         flex;
  justify-content: center;
}

.ascii-art-label pre {
  font-family: var(--asciifont);
  font-size:   1rem;
  line-height: 1.2;
  color:       var(--color);
  white-space: pre;
  overflow-x:  auto;
  display:     inline-block;
  text-align:  left;
}

h2.monster-name {
  font-family:    var(--headerfont);
  font-weight:    normal;
  font-size:      1.3rem;
  color:          var(--color);
  margin-top:     0.4em;
  margin-bottom:  0;
  text-align:     center;
  border-top:     1px dashed var(--border);
  border-bottom:  1px dashed var(--border);
  padding-top:    0.4em;
  padding-bottom: 0.4em;
}

.index-list {
  list-style: none;
  padding:    0;
  margin:     1.2em 0 0 0;
}

.index-list li {
  border-bottom:   1px dashed var(--border);
  padding:         7px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             10px;
}

.index-list li span {
  font-family: var(--bodyfont);
  font-size:   0.85rem;
  color:       var(--color-muted);
}

.index-list a {
  font-family: var(--bodyfont);
  font-weight: normal;
  font-size:   1rem;
  color:       var(--link);
  text-decoration: none;
}

.index-list a:hover { font-weight: bold; }

.page-content a {
  color:           inherit;
  text-decoration: underline;
}

@media (max-width: 768px) {
  body {
    justify-content: flex-start;
    padding:         10px;
  }

  body::before,
  body::after     { display: none; }

  #cover {
    border:        none;
    border-radius: 0;
    padding:       0;
    box-shadow:    none;
  }

  #page3 {
    height:         auto;
    flex-direction: column;
    border:         none;
    border-radius:  0;
  }

  .spread         { flex-direction: column; }

  .divider {
    width:      100%;
    height:     1px;
    align-self: auto;
  }

  .leftpage,
  .rightpage {
    height:     auto;
    min-height: 300px;
  }

  .page-content {
    padding:    20px 20px 10px 20px;
    overflow-y: visible;
  }

  .page-footer { display: none; }
}