/* River Bank Theme by IronShears
*    Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche
* Header image, river texture, and logo by IronShears, released under CC-BY-SA 3.0
* Fancy Border and Fancy hr Texture by Stygian Blue, edited by IronShears, released under CC-BY-SA 3.0
* Icon by Stygian Blue, released under CC-BY-SA 3.0
* Fonts used are  */

/*font imports*/
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');

@import url('https://crimone.github.io/typefaces/BaiWuChangKeKeTi/bwckkt.css');
@import url('https://crimone.github.io/typefaces/CangJiGaoDeGuoMiaoHei/cjgdgmh.css');
@import url('https://crimone.github.io/typefaces/JiYingHuiPianHeYuan/jyhphy.css');

/*dust jacket import*/
@import url("https://scp-wiki-cn.wdfiles.com/local--code/wanderers%3Adustjacket-theme/1");
:root:lang(cn) {

/*Header*/
--gold-foil: linear-gradient( rgb(var(--dark-accent)), rgb(var(--gray-monochrome)));
--gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverheader.gif");
--logo-image: url("https://evernight-aquarium.wdfiles.com/local--files/files/LANTERN_PROJECT.png");

/* Theme colors*/
    --white-monochrome: 168, 188, 185;
/*offwhite-greenish page color*/

    --light-pale-gray-monochrome: 76, 131, 161;
    /* off-white paper edge color */

    --gray-monochrome: 76, 131, 161;
    /* light-blue*/

    --dark-gray-monochrome: 23, 34, 58;
    /* black*/

    --light-gray-monochrome: 48, 80, 49;
    /* dark green*/

    --bright-accent: 119, 141, 118;
    /* light green*/

    --dark-accent: 23, 34, 58;
    /* black*/

    --alt-accent:  237, 220, 183;
    --very-light-gray-monochrome: var(--white-monochrome);
    --medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
    --black-monochrome: var(--dark-accent);
-login-myaccount-hover-bg-color: var(--bright-accent);
--rating-module-text-color: var(--alt-accent);
--link-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: var(--white-monochrome);
--rating-module-button-negative-color: var(--dark-gray-monochrome);
--rating-module-button-cancel-color: var(--gray-monochrome);
--rating-module-button-credit-color: var(--swatch-secondary-color);

/*Extra*/
--river-text-content: "河岸 主题版式";
--river-texture: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/waves.png');
--river-texture-trans: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransleft.png');
--river-texture-trans-left: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransright.png');
--fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverhr.png");
--fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverborder.png");

/* Fonts */
--body-font: 'Lato', sans-serif;
--title-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
--UI-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
}
/*BODY STUFF*/

#page-content a{
font-weight: bold;
 text-decoration: underline;
}

body{
background-color: rgb(var(--white-monochrome));
}

blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
  border-style: dashed;
  border-radius: 10px;
  background-color: rgb(var(--very-light-gray-monochrome));
}

.fancyborder{
border-image-source: var(--fancy-border);
border-image-slice: 300;
  border-image-repeat: round;
}

.fancyhr hr{
border-image-source: var(--fancy-hr);
border-top: 4vw solid transparent;
}

div.page-watch-options a, div.page-watch-options a:visited {
  --hover-link-color: red;
}

/*header*/
div#extra-div-1 {
    background: var(--gradient-header);
    background-repeat: repeat;
    background-position: left;
    background-size: auto 100%;
}

#login-status #account-options {
  background-image: none;
  background-color: rgb(var(--black-monochrome));
}

#header{
--login-username-color: var(--alt-accent);
--login-myaccount-color: var(--alt-accent);
}

#login-status {
color: rgb(var(--black-monochrome));
}
#login-status #account-topbutton {
background-color: rgb(var(--alt-accent));
}

#header h1 a {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif;
font-size: 200%;
}

#header h1 a, #header h1 a::before, #header h1 a::after {
  color: rgb(var(--white-monochrome));
}

#header h1 a::before {
  text-shadow: black 0.125rem 0rem 0, black  0.0675rem 0.1052rem 0, black  -0.052rem 0.1137rem 0, black  -0.1237rem 0.0176rem 0, black  -0.0817rem -0.0946rem 0, black  0.0355rem -0.1199rem 0, black  0.12rem -0.0349rem 0;
}

#header h1 a::after {
  background-repeat: repeat-x;
  background-position: center;
background-size: 6rem;
    background-image: none;
  animation: wave 50s linear infinite;
}

/*Gold foil removal surgery*/
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
    background-image: var(--gold-foil);
}

hr {
    background: var(--gold-foil);
}

#content-wrap {
background-image: var(--river-texture);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 100px;
  animation: wave-bottom 50s linear infinite;
}

/*Animations*/

@keyframes wave{
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -99% 0;
  }
}

@keyframes wave-bottom{
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: -99%;
  }
}
@keyframes wave-bottom-left{
  0% {
    background-position-x: -99%;
  }
  100% {
    background-position-x: 100%;
  }
}

/*River Title*/
div.rivertext {
    height: 12vw;
}

div.rivertext h1 {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif !important;
font-size: 10vw !important;
}

div.rivertext h1::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
content: var(--river-text-content);
}

div.rivertext h1::after {
  background-repeat: repeat-x;
  background-position: center bottom;
background-size: contain;
    background-image: var(--river-texture);
  animation: wave 50s linear infinite;
 -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
content: var(--river-text-content);
}

div.rivertext h1,
div.rivertext h1::before,
div.rivertext h1::after {
position: absolute;
left: 0;
right: 0;
}

/*page style*/

#page-content h1{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 500%;
margin-bottom: -20px;
}
#page-content h2{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 400%;
margin-bottom: -15px;
}
#page-content h3{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 300%;
margin-bottom: -12px;px;
}

/*rating bottom page*/
#who-rated-page-area {
  background-color: rgb(var(--white-monochrome));
  border-radius: 10px;
  padding: 9px;
  border-style: dashed;
  border-color: rgb(var(--bright-accent));
}

/*footer*/

#footer a {
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
background-image: none;
}

#license-area a, #license-area a:visited {
pointer-events:auto;
  background-color: rgb(var(--black-monochrome));
border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
}
#license-area a:hover{
color: rgb(var(--black-monochrome));
}

#footer {
  --footer-bg-color: transparent;
  --footer-text-color: rgb(var(--black-monochrome));
  --footer-link-color: var(--swatch-text-secondary-color);
  --footer-link-hover-color: var(--swatch-primary-darkest);
font-size: 1rem;
height: 100px;
background-image: var(--river-texture-trans-left);
background-position-y: center;
background-size: 100px;
z-index: 1;
position: relative;
margin-top: -60px;
  animation: wave-bottom-left 50s linear infinite;
pointer-events: auto;
padding-bottom: 30px;
}

#license-area{
font-size: 1rem;
color: rgb(var(--black-monochrome));
pointer-events:  none;
background-color: transparent;
height: 100px;
background-image: var(--river-texture-trans);
background-position-y: center;
background-size: 100px;
z-index: 3;
position: relative;
margin-top: -60px;
  animation: wave-bottom 50s linear infinite;
padding-top: 30px;
}

/* === 中文适配 === */

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a, .rate-box-with-credit-button .page-rate-widget-box .rate-points, .rate-box-with-credit-button .page-rate-widget-box .rateup, .rate-box-with-credit-button .page-rate-widget-box .ratedown, .rate-box-with-credit-button .page-rate-widget-box .cancel, .rate-box-with-credit-button .page-rate-widget-box .rateup a, .rate-box-with-credit-button .page-rate-widget-box .ratedown a, .rate-box-with-credit-button .page-rate-widget-box .cancel a {
    line-height: calc(var(--rating-module-height)*1.25);
    font-family: var(--UI-font);
}

#u-credit-view div.modalbox>div:first-of-type h2 {
    margin-bottom: 0;
}

#u-credit-view div.modalbox>div:first-of-type h2 > span {
    font-family: var(--header-font);
    font-size: 16.25px;
}

@media only screen and (min-width: 56.25rem) {
#u-credit-view div.modalbox>div:first-of-type h2 > span {
    font-size: 26.25px;
}
}