@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

@supports(--css:variables) {

    :root {
     --header-title: "追忆，内殿";
     --header-subtitle: "卡尔马克塔玛的回响。";
     --header-font: 'Long Cang',  'Nanum Brush Script', cursive;
     --background-gradient-distance:75rem; !important
    }

 :root:lang(cn) {
     --header-title: "追忆，内殿";
     --header-subtitle: "卡尔马克塔玛的回响。";
     --header-font: 'Long Cang',  'Nanum Brush Script', cursive;
     --background-gradient-distance:75rem; !important
    }

    #header {
     background-image: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%3Amemoria%2FTitleLogo.png');
    }

    #page-title {
     display: none
    }

    @supports (background-blend-mode: screen) {

     #extrac-div-1 {
     width: 100%;
     height: var(--header-height-on-desktop);
     position: absolute;
     top: 0;
     left: 0;
     background-image: var(--gradient-header), url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Amemoria%2Fbackground.jpg');
     background-size: var(--header-background-image-size) 100%, 100%, 100%;
     background-blend-mode: normal;
     pointer-events: none;
     }

     div#extra-div-1 {
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: calc(var(--final-header-height-on-desktop));
     left: 0;
     z-index: -1;
     background-color: rgba(222, 222, 222, 1);
     background-color: rgba(var(--swatch-background), 1);
     mask: var(--gradient-background);
     -webkit-mask: var(--gradient-background);
     background-image: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Amemoria%2Fbackground.jpg'), var(--gradient-background);
     background-size: 100%, 80% var(--background-gradient-distance);
     background-blend-mode: difference;
     background-repeat: no-repeat, repeat-x;
     pointer-events: none;
     }
   }

.type1 {
    display: block;
    overflow: hidden;
    font-family: 'Long Cang', 'Nanum Brush Script', cursive;
    font-style: normal;
    font-size: 170%;
    color: rgb(57, 0, 0);

    background-attachment: scroll;
    background: url('/api/css-proxy?url=https%3A%2F%2Fscp-wiki.wdfiles.com%2Flocal--files%2Ftheme%253Amemoria%2Ftextback.jpg');

    background-clip: border-box;
    background-color: rgb(222, 222, 222);
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: 100%;

    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2)
    }

.textbox {
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: rgb(var(--white-monochrome));
}

#side-bar:hover, 
#side-bar:active {
background:
linear-gradient(
	rgba(var(--swatch-menubg-color),1) 30%,
	rgba(var(--swatch-menubg-color),0)),
linear-gradient(
	rgba(var(--swatch-menubg-color),0),
	rgba(var(--swatch-menubg-color),1) 70%) 0 100%,
radial-gradient(farthest-side at 50% 0,
	rgba(var(--swatch-primary-darkest),.5),
	rgba(var(--black-monochrome),0)),
radial-gradient(farthest-side at 50% 100%,
	rgba(var(--swatch-primary-darkest),.5),
	rgba(var(--black-monochrome),0)) 0 100%;
}
#side-bar {
background:
linear-gradient(
	rgba(var(--swatch-menubg-color),0) 30%,
	rgba(var(--swatch-menubg-color),0)),
linear-gradient(
	rgba(var(--swatch-menubg-color),0),
	rgba(var(--swatch-menubg-color),0) 70%) 0 100%,
radial-gradient(farthest-side at 50% 0,
	rgba(var(--swatch-primary-darkest),0),
	rgba(var(--black-monochrome),0)),
radial-gradient(farthest-side at 50% 100%,
	rgba(var(--swatch-primary-darkest),0),
	rgba(var(--black-monochrome),0)) 0 100%;
    }
}