@import url('https://fonts.bunny.net/css2?family=Nanum+Brush+Script&display=swap');

@supports(--css:variables) {

    :root {
    	--header-title: "In Memoria, Adytum";
    	--header-subtitle: "Echoes of Kalmaktama.";
    	--header-font: 'Nanum Brush Script', cursive;
    	--background-gradient-distance: 75rem;
    }

    #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%3Amemoria%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%3Amemoria%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: '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%3Amemoria%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%;
    }
}