@import url('https://scp-wiki-cn.wikidot.com/local--code/fragment:parallel/1');
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100;300;400;500;700;900&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
 
:root{
  --moonlight-white: 238, 247, 242;
  --forest-green: 20, 30, 27;
  --verdant-green: 34, 62, 54;
  --nightsky-blue: 19, 72, 87;
  --spring-green: 73, 117, 104;
  --jade-green: 164, 202, 182;
 
  --main-padding: clamp(1rem, calc((100dvw - var(--main-content-width)) / 2), 12rem);
  --top-height: 60vh;
  --bot-height: 6rem;
  --head-grad: 6rem;
 
  --basalt-primary-color: var(--forest-green);
  --basalt-secondary-color: var(--verdant-green);
  --basalt-tertiary-color: var(--nightsky-blue);
  --basalt-main-text-color: var(--moonlight-white);
  --basalt-overtone: var(--moonlight-white);
  --basalt-undertone: var(--jade-green);
 
  --basalt-bright-element-color: var(--forest-green);
  --basalt-dark-element-color: var(--verdant-green);
  --basalt-darker-element-color: var(--spring-green);
 
  --header-title-color: var(--main-text-color);
  --header-subtitle-color: var(--main-text-color);
 
  --top-bar-link-color: var(--basalt-overtone);
 
  --UI-title-color: var(--jade-green);
  --UI-title-background-color: var(--basalt-secondary-color);
 
  --side-bar-button-color: var(--basalt-main-text-color);
  --search-icon-color: var(--basalt-main-text-color);
  --search-icon-color-hover: var(--basalt-undertone);
  --side-bar-link-color-hover: var(--basalt-undertone);
  --hr-color: var(--basalt-main-text-color);
  --tab-hover-background-color: var(--nightsky-blue);
  --side-bar-background-color: var(--verdant-green);
  --rate-module-background-color: var(--forest-green);
 
  --top-bar-dropdown-link-color: var(--basalt-main-text-color);
  --top-bar-dropdown-link-color-hover: var(--jade-green);
 
  --logo: url(https://scpsandboxcn.wdfiles.com/local--files/breaddddd/bard-white.png);
 
  --arrow-img: url(https://scpsandboxcn.wdfiles.com/local--files/breaddddd/bard-corner1.png);
 
  --bg-img: url(https://scpsandboxcn.wdfiles.com/local--files/collab%3Acastle-tracer/deepforest.svg);
  /* https://publicdomainvectors.org/en/free-clipart/Digital-night-forest-illustration/78901.html PD */
 
  --header-img: url(https://scpsandboxcn.wdfiles.com/local--files/collab%3Acastle-tracer/Trees-Landscape.svg);
  /* https://publicdomainvectors.org/en/free-clipart/Trees-landscape/49341.html PD */
 
  --footer-img: url(https://scpsandboxcn.wdfiles.com/local--files/collab%3Acastle-tracer/Footer-Trees.svg);
  /* https://publicdomainvectors.org/en/free-clipart/Maui-sunset-silhouette/79734.html PD */
 
  --sep-line: url(https://scpsandboxcn.wikidot.com/local--files/collab:castle-tracer/Ivy-Leaves.svg);
  /* https://freesvg.org/1538965145 PD */
 
  --title: "吟游诗客";
  --subtitle: "Märchen erben Fantasien";
}
 
@media (max-width: 1024px) {
  :root{
    --top-height: 30vh;
    --bot-height: 3rem;
  }
}
 
/* header */
 
#header {
  background: none;
  box-shadow: none;
}
 
#header h1 a { padding-right: calc(var(--base-header-height)*0.25); }
 
#header h1 a::before { 
  margin-right: 0; 
  mask-image: linear-gradient(to top, #000F 0%, 80%, #0000 100%);
  -webkit-mask-image: linear-gradient(to top, #000F 0%, 80%, #0000 100%);
}
 
#header h1 a span { display: none; }
 
#header h1 {
  background-color: rgb(var(--basalt-darker-element-color));
}
 
#header div.mobile-top-bar > .open-menu {
  background-color: rgb(var(--basalt-darker-element-color));
  visibility: unset;
}
 
#header #top-bar ul {
  background: linear-gradient(to right, rgb(var(--basalt-darker-element-color)) 0%, rgb(var(--basalt-darker-element-color)) 20%, rgb(var(--basalt-dark-element-color), 0.8) 60%, rgba(var(--basalt-bright-element-color), 0.2) 100%);
  border-bottom-right-radius: calc(var(--base-header-height)*2.5) var(--base-header-height);
  margin-right: calc(var(--base-header-height)*2);
}
 
#header #top-bar ul > li > a {
  font-size: calc(var(--true-font-size) *0.9);
}
 
#search-top-box::before {
  background: none;
}
 
#login-status::after {
  background: none;
}
 
@media (max-width: 1024px) {
  #header h1 { background: none; }
  #header div.mobile-top-bar > .open-menu {
    background: none;
    visibility: visible;
  }
  #header #top-bar ul {
    background: none;
    border-bottom-right-radius: 0;
    margin-right: 0;
  }
  #header h1 a span { display: flex; }
  #header h1 a span::after, #header h1 a span::before {
    font-family: 'UnifrakturMaguntia', 'Noto Serif SC', serif;
  }
  #header h1 a span::after {
    letter-spacing: 0;
  }
  #header {
    background: linear-gradient(to right, rgb(var(--basalt-darker-element-color)) 0%, rgb(var(--basalt-darker-element-color)) 20%, rgb(var(--basalt-dark-element-color), 0.8) 60%, rgba(var(--basalt-bright-element-color), 0.2) 100%);
  }
}
 
/* page body */
 
body {
  background-color: rgb(var(--forest-green));
}
 
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background: var(--bg-img) no-repeat center;
  background-size: cover;
  opacity: .575;
  z-index: -2;
  pointer-events: none;
}  /* taken from lumina */
 
#main-content::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  aspect-ratio: 5 / 2;
  transform: translate(0, -96%);
  background: var(--header-img) no-repeat bottom;
  background-size: cover;
}
 
#main-content {
  position: relative;
  margin-top: var(--top-height);
  margin-bottom: 0;
  padding: 2rem var(--main-padding);
  padding-bottom: var(--bot-height);
  background: linear-gradient(to bottom, #000 0%, rgba(var(--forest-green), 0.7) var(--head-grad) 100%);
}
 
#page-title, .meta-title {
  position: absolute;
  top: calc(0% - (var(--top-height) - var(--base-header-height)) *.6);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 400%;
  border-bottom: none;
  font-family: 'UnifrakturMaguntia', 'Noto Serif SC', serif;
}
 
@media (max-width: 1024px) {
  #main-content {
    --main-content-side-margin: 0;
    margin-inline: 0;
    box-sizing: border-box;
    width: 100vw;
  }
  #page-title, .meta-title { font-size: 280%; }
}
 
@media (max-width: 640px) {
  #page-title, .meta-title { font-size: 160%; }
}
 
/* footer bar */
 
#footer {
  position: relative;
  border-top: none;
  background-color: black;
  color: var(--basalt-main-text-color);
  overflow: unset;
}
 
div#license-area {
  background-color: black;
  color: var(--basalt-main-text-color);
}
 
#footer a, div#license-area a {
  color: var(--basalt-main-text-color);
}
 
#footer::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  aspect-ratio: 5 / 2;
  transform: translate(0, -100%);
  background: var(--footer-img) no-repeat bottom;
  background-size: cover;
  pointer-events: none;
}
 
#footer .options {
  border-right: none;
}
 
#edit-page-textarea, #page-tags-input {
  position: relative;
  z-index: 1;
}
 
#main-content > .page-tags {
  margin-top: 40vh;
}
 
/* side bar */
 
:is(#side-bar, #interwiki) .menu-item a::before {
  transition: none;
}
 
#side-bar .collapsible-block-content::after {
  background-color: rgb(var(--jade-green));;
}
 
#side-bar .collapsible-block-content {
  background-color: rgb(var(--verdant-green));
}
 
/* IN PAGE ITEMS */
 
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  font-family: 'UnifrakturMaguntia', 'Noto Serif SC', serif;
}
 
li:not(:first-child) {margin-top: 0.75em;}
 
ul, ol {padding-left: 10px;}
 
:is(.blockquote, blockquote, .code) :is(.blockquote, blockquote, .code) {
  box-shadow: none;
  border: none;
  background-color: rgba(var(--forest-green), 0.6);
}
 
div#main-content :is(.blockquote, blockquote, .code) > hr {
  background-color: rgb(var(--basalt-main-text-color));
}
 
.decorated {
  font-family: 'UnifrakturMaguntia', 'Noto Serif SC', serif;
}
 
div#main-content div.blockquote.notation {
  border: 6px double rgb(var(--jade-green));
}
 
#main-content > .page-tags > span a:hover {
  position: relative;
  z-index: 1;
}
 
#who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within), #who-rated-page-area > div span:nth-of-type(2n+1):is(:hover, :focus-within) + span[style*="color"] {
  position: relative;
  z-index: 1;
}
 
/* anchor */
 
a:link, a:visited {
    color: inherit;
    text-decoration: currentcolor solid underline;
}
 
a:hover, a:active {
    background-color: rgb(var(--moonlight-white));
    color: rgb(var(--forest-green));
    text-decoration: rgb(var(--forest-green)) solid underline;
}
 
#page-options-bottom > a:hover, #page-options-bottom-2 > a:hover {
    color:rgb(var(--forest-green));
}
 
#main-content > .page-tags > span a:is(:hover, :focus) {
   background-color: rgb(var(--basalt-main-text-color));
}
 
/* credit and standalone */
 
div.rate-box-with-credit-button,
div.page-rate-widget-box {
  box-shadow: 0 calc(0rem - var(--base-border-width)) 0 rgb(var(--verdant-green));
}
 
div.rate-box-with-credit-button div.page-rate-widget-box {
  box-shadow: none;
}
 
div.page-rate-widget-box span.btn > a , div.rate-box-with-credit-button span.btn > a {
  border-bottom-color: rgb(var(--forest-green));
}
 
.creditButtonStandalone a.fa.fa-info {
  box-shadow: 0 calc(0rem - var(--base-border-width)) 0 rgb(var(--verdant-green));
}
 
.creditButtonStandalone a.fa.fa-info::before {
  background-color: rgb(var(--forest-green));
}
 
.creditButtonStandalone a.fa.fa-info:hover::before {
  background-color: rgb(var(--forest-green));
  border-bottom: var(--base-border-width) solid rgb(var(--moonlight-white));
}
 
.creditButtonStandalone a.fa.fa-info::after {
  background-color: rgb(var(--moonlight-white));
}
 
/* ruby fix from scp-cn-2512 */
 
p:has(span.ruby) {
    line-height: 1.7;
}
 
span.ruby {
    height: unset;
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    vertical-align: top;
}
 
span.rt {
    display: block;
    margin-top: -0.625em;
    margin-bottom: 0;
    line-height: 1.25;
}
 
/* code fix */
.code {
    --_reserved: 114, 162, 247;
    --_number: 237, 123, 163;
    --_string: 93, 178, 107;
    --_quotes: 93, 178, 107;
    --_special: 0, 183, 159;
    --_var: 193, 154, 73;
    margin: 1.5rem 0;
}
 
/* has check */
 
.has-warning {display: none;}
@supports not selector(:has(.collapsible-block-unfolded[style="display: block;"] span.branchA)) {
  .has-warning {display: block;}
}
 
/* paging book */
 
div.book {
  display: flex;
  border: 6px double rgb(var(--jade-green));
  padding: 0 0.5em;
  --paging-width: 3em;
}
 
.book-content {
  flex: 1;
  padding: 0 0.5em;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
 
.book-content::-webkit-scrollbar {
  display: none;
}
 
.book div.book-content:first-of-type {
  padding-left: calc(var(--paging-width) + 0.5em);
}
 
.book div.book-content:last-of-type {
  padding-right: calc(var(--paging-width) + 0.5em);
}
 
.paging {
  width: var(--paging-width);
  align-self: stretch;
}
 
.paging :is(.collapsible-block, .collapsible-block-folded, .collapsible-block-unfolded, .collapsible-block-unfolded-link) {
  height: 100%;
}
 
.paging a.collapsible-block-link {
  display: block;
  width: var(--paging-width);
  height: 100%;
  color: transparent;
  text-decoration: none;
  background: var(--arrow-img) no-repeat center;
  background-size: calc(var(--paging-width) * 1.5) auto;
  background-position: left 30% center;
}
 
.paging a.collapsible-block-link:hover,  .paging a.collapsible-block-link:active {
  color: transparent;
  text-decoration: none;
}
 
.paging .collapsible-block-folded a.collapsible-block-link {
  transform: scaleX(-1);
}
 
.paging p {
  margin: 0;
}
 
.paging .collapsible-block span {
  display: block;
  font-size: 0;
  height: 0;
}
 
@supports not selector(:has(.collapsible-block-unfolded[style="display: block;"] span.branchA)) {
  div.book { 
    display: block;
    height: fit-content !important;
  }
  div.book-content { display: block !important; }
  div.paging { display: none !important; }
  .book div.book-content:first-of-type {
    padding-left: 0.5em;
  }
  .book div.book-content:last-of-type {
    padding-right: 0.5em;
  }
  /* paging fix for nan-has users */
}
 
@media (max-width: 1024px) {
  div.book {
    --paging-width: 2em;
  }
}
 
/* selres */
 
.selection {
  display: flex;
  column-gap: 2rem;
  margin-inline: 2rem;
}
 
.selection :is(.selA, .selB) {
  flex: 1;
  margin-inline: auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 6px double rgb(var(--jade-green));
  transition: border-color 1s;
}
 
.selection :is(.selA, .selB):hover {
  border-color: rgb(var(--verdant-green));
}
 
.selection :is(.selA, .selB) :is(.sel-display, .collapsible-block) {
  grid-area: 1 / 1 / span 1 / span 1;
}
 
.selection :is(div.collapsible-block, div.collapsible-block-folded, div.collapsible-block-unfolded, div.collapsible-block-unfolded-link, a.collapsible-block-link) {
  display: block;
  width: 100%;
  height: 100%;
}
 
.selection .collapsible-block a.collapsible-block-link {
  text-decoration: none;
}
 
.selection .collapsible-block a.collapsible-block-link:hover {
  background-color: transparent;
}
 
.selection .collapsible-block p {
  margin: 0;
}
 
.selection .collapsible-block span {
  display: block;
  font-size: 0;
  height: 0;
}
 
.result {
  display: none;
}
 
.selection:has(.collapsible-block-unfolded[style=""] span.branchA, .collapsible-block-unfolded[style="display: block;"] span.branchA) > div:last-of-type {
  display: none;
}
 
.selection:has(.collapsible-block-unfolded[style=""] span.branchB, .collapsible-block-unfolded[style="display: block;"] span.branchB) > div:first-of-type {
  display: none;
}
 
/* big letter */
 
.letterdeco p:first-of-type::first-letter{
    margin-top: 0.3em;
    font-size: 2em;
    font-weight: bold;
    float: left;
    margin-right: 0.1em;
    font-family: "Noto Serif SC", serif;
}
 
/* fancy hr */
 
.fancyhr hr {
  height: 2rem;
  background: var(--sep-line) repeat center bottom;
  background-size: contain;
  mask-image: linear-gradient(to right, #0002 0%, 15%, #000 50%, 85%, #0002 100%);
  -webkit-mask-image: linear-gradient(to right, #0002 0%, 15%, #000 50%, 85%, #0002 100%);
  filter: brightness(66%) saturate(125%) sepia(50%);
}
 
/* portable toc */
 
.port-toc {
  position: fixed;
  z-index: 10;
  top: calc(var(--base-header-height)*2);
  right: 0;
}
 
.port-toc .collapsible-block-unfolded {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
}
 
.port-toc .collapsible-block-unfolded-link {
  grid-area: 1 / 2 / span 1 / span 1;
}
 
.port-toc .collapsible-block-content {
  grid-area: 1 / 1 / span 1 / span 1;
}
 
.port-toc a.collapsible-block-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 5rem;
  background-color: rgb(var(--spring-green));
  text-decoration: none;
}
 
.port-toc a.collapsible-block-link:hover, .port-toc a.collapsible-block-link:active {
  color: rgb(var(--moonlight-white));
}
 
.port-toc #toc {
  margin: 0;
}

:root {
  --moonlight-white: 238, 247, 242;
  --forest-green: 77, 16, 24;
  --verdant-green: 90, 18, 22;
  --nightsky-blue: 75, 30, 47;
  --spring-green: 166, 27, 41;
  --jade-green: 192, 142, 175;
 
  --bg-img: url(https://scpsandboxcn.wdfiles.com/local--files/collab%3Acastle-tracer/town-background.svg);
  /* https://publicdomainvectors.org/en/free-clipart/Drawing-of-medieval-town-panorama-in-color/34957.html PD */
 
  --outside-black: 45, 12, 19;
 
  --basalt-UI-dark-palette: var(--outside-black);
  --basalt-light-text-color: var(--moonlight-white);
}
 
#main-content::before, 
#footer::before {
  display: none;
}
 
#main-content {
  background: rgba(228, 214, 205, 0.7);
}
 
/* text color */
 
#page-content {
  color: rgb(var(--outside-black));
}
 
#page-content :is(div.blockquote, blockquote, .code, .footnotes-footer, div#toc, div#page-title, div.meta-title, div.scp-image-caption), div#lock-info {
  color: rgb(var(--moonlight-white));
}
 
div#page-options-container, div#action-area {
  color: rgb(var(--outside-black));
}
 
.selection a.collapsible-block-link:hover, .port-toc a.collapsible-block-link:active {
  color: rgb(var(--outside-black));
}
 
/* hr */
 
#page-content hr {
  background-color: rgb(var(--outside-black));
}
 
#page-content :is(div.blockquote, blockquote, .code, .footnotes-footer, div#toc) hr{
  background-color: rgb(var(--moonlight-white));
}
 
#page-content .fancyhr hr {
  background-color: transparent;
}