@import url('https://fonts.googleapis.com/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%;
	}
}