@layer V3_5ePHB {
	@import (less) './themes/fonts/5e/fonts.less';
	@import (less) './themes/assets/assets.less';

	:root {
		//Colors
		--HB_Color_Background: #EEE5CE; // Light parchment
		--HB_Color_Accent: #E0E5C1; // Pastel green
		--HB_Color_HeaderUnderline: #C0AD6A; // Gold
		--HB_Color_HorizontalRule: #9C2B1B; // Maroon
		--HB_Color_HeaderText: #58180D; // Dark Maroon
		--HB_Color_MonsterStatBackground: #F2E5B5; // Light orange parchment
		--HB_Color_CaptionText: #766649; // Brown
		--HB_Color_WatercolorStain: #BBAD82; // Light brown
		--HB_Color_Footnotes: #C9AD6A; // Gold
	}

	@page {
		margin: 0;
	}

	body {
		counter-reset: phb-page-numbers;
	}

	* {
		-webkit-print-color-adjust: exact;
	}

	.useSansSerif() {
		font-family: ScalySansRemake;
		font-size: 0.318cm;
		line-height: 1.2em;

		p,
		dl,
		ul,
		ol {
			line-height: 1.2em;
		}

		ul,
		ol {
			padding-left: 1em;
		}

		em {
			font-style: italic;
		}

		strong {
			font-weight: 800;
			letter-spacing: -0.02em;
		}

		h5+* {
			margin-top: 0.1cm;
		}
	}

	.useColumns(@multiplier : 1, @fillMode: balance) {
		column-count: 2;
		column-fill: @fillMode;
		column-gap: 0.9cm;
		column-width: 8cm * @multiplier;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-webkit-column-width: 8cm * @multiplier;
		-moz-column-width: 8cm * @multiplier;
		-webkit-column-gap: 0.9cm;
		-moz-column-gap: 0.9cm;
	}

	.columnWrapper {
		max-height: 100%;
		column-span: all;
		columns: inherit;
		column-gap: inherit;
	}

	.page {
		.useColumns();
		counter-increment: phb-page-numbers;
		position: relative;
		z-index: 15;
		box-sizing: border-box;
		overflow: hidden;
		height: 279.4mm;
		width: 215.9mm;
		background-color: var(--HB_Color_Background);
		background-image: @backgroundImage;
		padding: 1.4cm 1.9cm 1.7cm;
		font-family: BookInsanityRemake;
		font-size: 0.34cm;
		text-rendering: optimizeLegibility;
		page-break-before: always;
		page-break-after: always;
	}

	//*****************************
	// *            BASE
	// *****************************/

	.page {
		p {
			overflow-wrap: break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
			display: block;
			line-height: 1.25em;

			&+* {
				margin-top: 0.325cm;
			}

			&+p {
				margin-top: 0;
			}
		}

		ul {
			margin-bottom: 0.8em;
			padding-left: 1.4em;
			line-height: 1.25em;
			list-style-position: outside;
			list-style-type: disc;
		}

		ol {
			margin-bottom: 0.8em;
			padding-left: 1.4em;
			line-height: 1.25em;
			list-style-position: outside;
			list-style-type: decimal;
		}

		//Indents after p or lists
		p+p,
		ul+p,
		ol+p {
			text-indent: 1em;
		}

		img {
			z-index: -1;
		}

		strong {
			font-weight: bold;
			letter-spacing: -0.02em;
		}

		em {
			font-style: italic;
		}

		sup {
			vertical-align: super;
			font-size: smaller;
			line-height: 0;
		}

		sub {
			vertical-align: sub;
			font-size: smaller;
			line-height: 0;
		}

		//*****************************
		// *           HEADERS
		// *****************************/
		h1,
		h2,
		h3,
		h4 {
			font-family: MrEavesRemake;
			font-weight: 800;
			color: var(--HB_Color_HeaderText);
		}

		h1 {
			margin-bottom: 0.18cm; //Margin-bottom only because this is WIDE
			column-span: all;
			font-size: 0.89cm;
			line-height: 1em;
			-webkit-column-span: all;
			-moz-column-span: all;

			&+p::first-letter {
				float: left;
				font-family: SolberaImitationRemake;
				line-height: 1em;
				font-size: 3.5cm;
				padding-left: 40px; //Allow background color to extend into margins
				margin-left: -40px;
				margin-top: -0.3cm;
				padding-bottom: 2px;
				margin-bottom: -20px;
				background-image: linear-gradient(-45deg, #322814, #998250, #322814);
				background-clip: text;
				-webkit-background-clip: text;
				color: rgba(0, 0, 0, 0);
			}

			&+p::first-line {
				font-variant: small-caps;
			}
		}

		h2 {
			//margin-top    : 0px; //Font is misaligned. Shift up slightly
			//margin-bottom : 0.05cm;
			font-size: 0.75cm;
			line-height: 0.988em; //Font is misaligned. Shift up slightly
		}

		h3 {
			//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
			//margin-bottom : 0.1cm;
			font-size: 0.575cm;
			border-bottom: 2px solid var(--HB_Color_HeaderUnderline);
			;
			line-height: 0.995em; //Font is misaligned. Shift up slightly

			&+* {
				margin-top: 0.17cm;
			}
		}

		*+h3 {
			margin-top: 0.155cm; //(0.325 - 0.17)
		}

		h4 {
			//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
			//margin-bottom : 0.02cm;
			font-size: 0.458cm;
			line-height: 0.971em; //Font is misaligned. Shift up slightly

			&+* {
				margin-top: 0.09cm;
			}
		}

		*+h4 {
			margin-top: 0.235cm; //(0.325 - 0.09)
		}

		h5 {
			//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
			//margin-bottom : 0.02cm;
			font-family: ScalySansSmallCapsRemake;
			font-size: 0.423cm;
			font-weight: 900;
			line-height: 0.951em; //Font is misaligned. Shift up slightly

			&+* {
				margin-top: 0.2cm;
			}
		}

		//*****************************
		// *          TABLE
		// *****************************/
		table {
			.useSansSerif();
			width: 100%;
			line-height: 16px;

			&+* {
				margin-top: 0.325cm;
			}

			thead {
				display: table-row-group;
				font-weight: 800;

				th {
					vertical-align: bottom;
					//padding        : 0.14em 0.4em;
					padding: 0px 1.5px; // Both of these are temporary, just to force
					//line-height : 16px;        // PDF to render at same height until Chrome 108
				}
			}

			tbody {
				tr {
					td {
						//padding : 0.14em 0.4em;
						padding: 0px 1.5px; // Both of these are temporary, just to force
						//line-height : 16px;        // PDF to render at same height until Chrome 108
					}

					&:nth-child(odd) {
						background-color: var(--HB_Color_Accent);
					}
				}
			}
		}

		//*****************************
		// *            NOTE
		// *****************************/
		.note {
			.useSansSerif();
			background-color: var(--HB_Color_Accent);
			border-style: solid;
			border-width: 1px;
			border-image: @noteBorderImage 12 stretch;
			border-image-outset: 9px 0px;
			border-image-width: 11px;
			padding: 0.13cm 0.16cm;
			filter: drop-shadow(1px 4px 6px #888);

			.page :where(&) {
				margin-top: 9px; //Prevent top border getting cut off on colbreak
			}

			&+* {
				margin-top: 0.45cm;
			}

			h5 {
				font-size: 0.375cm;
			}

			p {
				display: block;
				padding-bottom: 0px;
			}

			:last-child {
				margin-bottom: 0;
			}
		}

		//************************************
		// *       DESCRIPTIVE TEXT BOX
		// ************************************/
		.descriptive {
			.useSansSerif();
			background-color: #faf7ea;
			border-style: solid;
			border-width: 7px;
			border-image: @descriptiveBoxImage 12 stretch;
			border-image-outset: 4px;
			padding: 0.1em;
			filter: drop-shadow(0 0 3px #faf7ea);

			.page :where(&) {
				margin-top: 4px; //Prevent top border getting cut off on colbreak
			}

			&+* {
				margin-top: 0.45cm;
			}

			h5 {
				font-size: 0.375cm;
			}

			p {
				display: block;
				padding-bottom: 0px;
				line-height: 1.5em;
			}

			:last-child {
				margin-bottom: 0;
			}
		}

		//*****************************
		// *    Images Snippets
		// *****************************/

		/* Arist Credit */
		.artist {
			position: absolute;
			width: auto;
			text-align: center;
			font-family: WalterTurncoat;
			font-size: 0.27cm;
			color: var(--HB_Color_CaptionText);

			p,
			p+p {
				margin: unset;
				text-indent: unset;
				line-height: 1em;
			}

			h5 {
				font-size: 1.3em;
				font-family: WalterTurncoat;
			}

			a {
				color: inherit;
				text-decoration: unset;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		/* Watermark */
		.watermark {
			display: grid !important;
			place-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 120px;
			text-transform: uppercase;
			color: black;
			mix-blend-mode: overlay;
			opacity: 30%;
			transform: rotate(-45deg);
			z-index: 500;

			p {
				margin-bottom: none;
			}
		}

		/* Watercolor */
		[class*="watercolor"] {
			position: absolute;
			width: 2000px;
			/* dimensions need to be real big so the user can set */
			height: 2000px;
			/* height or width and the image will maintain aspect ratio */
			-webkit-mask-image: var(--wc);
			-webkit-mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-image: var(--wc);
			mask-size: contain;
			mask-repeat: no-repeat;
			background-size: cover;
			background-color: var(--HB_Color_WatercolorStain);
			/*default color*/
			--wc: @watercolor1;
			/*default image*/
			z-index: -2;
		}

		.watercolor1 {
			--wc: @watercolor1;
		}

		.watercolor2 {
			--wc: @watercolor2;
		}

		.watercolor3 {
			--wc: @watercolor3;
		}

		.watercolor4 {
			--wc: @watercolor4;
		}

		.watercolor5 {
			--wc: @watercolor5;
		}

		.watercolor6 {
			--wc: @watercolor6;
		}

		.watercolor7 {
			--wc: @watercolor7;
		}

		.watercolor8 {
			--wc: @watercolor8;
		}

		.watercolor9 {
			--wc: @watercolor9;
		}

		.watercolor10 {
			--wc: @watercolor10;
		}

		.watercolor11 {
			--wc: @watercolor11;
		}

		.watercolor12 {
			--wc: @watercolor12;
		}

		//*****************************
		// *    MONSTER STAT BLOCK
		// *****************************/
		.monster {
			.useSansSerif();

			&.frame {
				border-style: solid;
				border-width: 7px 6px;
				background-color: var(--HB_Color_MonsterStatBackground);
				background-image: @monsterBlockBackground;
				border-image: @monsterBorderImage 14 round;
				border-image-outset: 0px 2px;
				background-blend-mode: overlay;
				background-attachment: fixed;
				filter: drop-shadow(1px 4px 6px #888);
				padding: 4px 2px;
				margin-left: -0.16cm;
				margin-right: -0.16cm;
				width: calc(100% + 0.32cm);
			}

			position : relative;
			padding : 0px;
			margin-bottom : 0.325cm;

			//Headers
			h2 {
				font-size: 0.62cm;
				line-height: 1em;
				margin: 0;

				&+p {
					font-size: 0.304cm; //Monster size and type subtext
					margin-bottom: 0;
				}
			}

			h3 {
				font-family: ScalySansRemake;
				font-weight: 800;
				font-variant: small-caps;
				border-bottom: 2px solid var(--HB_Color_HeaderText);
				// margin-top     : 0.05cm;  //Font is misaligned. Shift up slightly
				padding-bottom: 0.05cm;
			}

			//Triangle dividers
			hr {
				visibility: visible;
				height: 6px;
				margin: 0.12cm 0cm;
				background-image: @redTriangleImage;
				background-size: 100% 100%;
				border: none;
			}

			//Attribute Lists - All text between HRs is red
			hr~ :is(dl, p) {
				color: var(--HB_Color_HeaderText);
			}

			hr:last-of-type {
				&~ :is(dl, p) {
					color: inherit; // After the HRs, reset text to black
				}

				&+* {
					margin-top: 0.325cm; // Space after last HR
				}
			}

			// Monster Ability table
			hr+table:first-of-type {
				margin: 0;
				column-span: none;
				color: var(--HB_Color_HeaderText);
				background-color: transparent;
				border-style: none;
				border-image: none;
				-webkit-column-span: none;

				tr {
					background-color: transparent;
				}

				td,
				th {
					padding: 0px;
				}
			}

			:last-child {
				margin-bottom: 0;
			}
		}

		//Full Width
		.monster.wide {
			.useColumns(0.96, @fillMode: balance);
		}

		//*****************************
		// *           FOOTER
		// *****************************/
		&:after {
			content: "";
			position: absolute;
			bottom: 0px;
			left: 0px;
			z-index: 100;
			height: 50px;
			width: 100%;
			background-image: @footerAccentImage;
			background-size: cover;
		}

		&:nth-child(even) {
			&:after {
				transform: scaleX(-1);
			}

			.pageNumber {
				left: 2px;
			}

			.footnote {
				left: 80px;
				text-align: left;
			}
		}

		.pageNumber {
			position: absolute;
			right: 2px;
			bottom: 22px;
			width: 50px;
			font-size: 0.9em;
			color: var(--HB_Color_Footnotes);
			text-align: center;
			text-indent: 0;

			&.auto::after {
				content: counter(phb-page-numbers);
			}
		}

		.footnote {
			position: absolute;
			right: 80px;
			bottom: 32px;
			z-index: 150;
			width: 200px;
			font-size: 0.8em;
			color: var(--HB_Color_Footnotes);
			text-align: right;
		}

		//************************************
		// *           CODE BLOCKS
		// ************************************/
		code {
			font-family: "Courier New", Courier, monospace;
			font-size: 0.325;
			padding: 0px 4px;
			color: #58180d;
			background-color: #faf7ea;
			border-radius: 4px;
			white-space: pre-wrap;
			overflow-wrap: break-word;
		}

		pre code {
			width: 100%;
			display: inline-block;
			border-style: solid;
			border-width: 1px;
			border-image: @codeBorderImage 26 stretch;
			border-image-width: 10px;
			border-image-outset: 2px;
			border-radius: 12px;
			margin-bottom: 2px;
			padding: 0.15cm;

			.page :where(&) {
				margin-top: 2px; //Prevent top border getting cut off on colbreak
			}

			&+* {
				margin-top: 0.325cm;
			}
		}

		//*****************************
		// *          EXTRAS
		// *****************************/
		hr {
			visibility: hidden;
			margin: 0px;
		}

		.columnSplit {
			visibility: hidden;
			-webkit-column-break-after: always;
			break-after: always;
			-moz-column-break-after: always;
		}

		//Avoid breaking up
		blockquote,
		table {
			z-index: 15;
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
		}

		//Text indent right after table
		table+p {
			text-indent: 1em;
		}

		// Nested lists
		ul ul,
		ol ol,
		ul ol,
		ol ul {
			margin-bottom: 0px;
			margin-left: 1.5em;
		}

		li {
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
		}
	}

	//*****************************
	// *         PART COVER
	// *****************************/
	.page:has(.partCover) {
		padding-top: 0;

		h1,
		h2 {
			margin-inline: auto;
			text-align: center;
			column-span: all;
		}

		.partCover {
			background-image: @partCoverHeaderPHB;
			background-repeat: no-repeat;
			position: absolute;
			background-size: 100%;
			top: 0;
			left: 0;
			height: 6cm;
			width: 100%;
		}

		img {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			z-index: -1;
		}

		h1 {
			position: relative;
			text-align: center;
			text-transform: uppercase;
			font-size: 2.3cm;
			font-family: NodestoCapsCondensed;
			max-width: 6cm;
			text-overflow: clip;
			white-space: nowrap;
			overflow: hidden;
			margin-inline: auto;
			margin-top: .4cm;
		}

		h2 {
			text-align: center;
			font-family: Overpass;
			font-size: 0.45cm;
			position: relative;
			max-width: 5cm;
			margin-inline: auto;
			margin-top: -0.7em;
			line-height: 1.1em;
		}
	}


	//*****************************
	// *         SPELL LIST
	// *****************************/
	.page .spellList {
		.useSansSerif();
		column-count: 2;

		ul+h5 {
			margin-top: 15px;
		}

		p,
		ul {
			font-size: 0.352cm;
			line-height: 1.265em;
		}

		ul {
			margin-bottom: 0.5em;
			padding-left: 1em;
			text-indent: -1em;
			list-style-type: none;
			-webkit-column-break-inside: auto;
			page-break-inside: auto;
			break-inside: auto;
		}

		&.wide {
			column-count: 4;
		}
	}

	//*****************************
	// *       CLASS TABLE
	// *****************************/
	.page .classTable {
		th[colspan]:not([rowspan]) {
			white-space: nowrap;
		}

		&.frame {
			margin-top: 0.7cm;
			margin-bottom: 0.9cm;
			margin-left: -0.1cm;
			margin-right: -0.1cm;
			width: calc(100% + 0.2cm);
			border-collapse: separate;
			background-color: white;
			border: initial;
			border-style: solid;
			border-image-outset: 0.4cm 0.3cm;
			border-image-repeat: stretch;
			border-image-slice: 200;
			border-image-source: @frameBorderImage;
			border-image-width: 47px;

			&.wide:first-child {
				margin-top: 0.12cm;
			}

			&+* {
				margin-top: 0;
			}
		}

		&.decoration {
			position: relative;
		}

		&.decoration::before {
			content: '';
			position: absolute;
			background-image: @classTableDecoration,
				@classTableDecoration;
			background-size: contain, contain;
			background-repeat: no-repeat, no-repeat;
			background-position: top, bottom;
			width: 7.75cm;
			height: calc(100% + 3.3cm);
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			filter: drop-shadow(0px 0px 1px #C8C5C080);
			z-index: -1;
		}

		&.decoration.wide::before {
			width: calc(100% + 3.3cm);
			height: 7.75cm;
			background-position: left, right;
		}

		h5+table {
			margin-top: 0.2cm;
		}
	}

	//*****************************
	// *      COVER PAGE
	// *****************************/
	.page:has(.coverPage) {
		columns: 1;
		text-align: center;

		&:after {
			all: unset;
		}

		.logo {
			position: absolute;
			top: 0.5cm;
			left: 0;
			right: 0;
			filter: drop-shadow(0 0 0.075cm black);

			img {
				height: 2cm;
				width: 100%;
			}
		}

		.columnWrapper>p img {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 100%;
			min-width: 100%;
			z-index: -1;
		}

		h1 {
			--shadow-x0: #000 0px 0px 0.1cm;
			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
			--shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1);
			--shadow-x3: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2);
			text-shadow: var(--shadow-x3), var(--shadow-x3), var(--shadow-x3);
			text-transform: uppercase;
			font-weight: normal;
			display: block;
			margin-top: 1.2cm;
			margin-bottom: 0;
			color: white;
			font-family: NodestoCapsCondensed;
			font-size: 2.245cm;
			line-height: 0.85em;
		}

		h2 {
			--shadow-x0: #000 0px 0px 2.5px;
			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
			--shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1);
			--shadow-x3: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2);
			text-shadow: var(--shadow-x3), var(--shadow-x3), var(--shadow-x3);
			font-family: NodestoCapsCondensed;
			font-weight: normal;
			font-size: 0.85cm;
			letter-spacing: 0.1cm;
			color: white;
		}

		hr {
			display: block;
			position: relative;
			background-image: @horizontalRule;
			background-size: 100% 100%;
			visibility: visible;
			height: 0.5cm;
			width: 12cm;
			border: none;
			margin: auto;
			filter: drop-shadow(0 0 3px black);
		}

		.banner {
			filter: drop-shadow(2px 2px 2px #000);
			position: absolute;
			left: 0;
			bottom: 4.2cm;
			background-image: url('/assets/coverPageBanner.svg');
			height: 1.7cm;
			width: 10.5cm;
			color: white;
			font-family: NodestoCapsCondensed;
			font-weight: normal;
			font-size: 1cm;
			letter-spacing: 0.014cm;
			text-align: left;
			padding-left: 1cm;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding-top: 0.1cm;
		}

		.footnote {
			--shadow-x0: #000 0px 0px 0.05cm;
			--shadow-x1: var(--shadow-x0), var(--shadow-x0), var(--shadow-x0);
			--shadow-x2: var(--shadow-x1), var(--shadow-x1), var(--shadow-x1);
			text-shadow: var(--shadow-x2), var(--shadow-x2), var(--shadow-x2);
			position: absolute;
			text-align: center;
			color: white;
			font-size: 0.496cm;
			bottom: 1.3cm;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			width: 70%;
			font-family: Overpass;
		}
	}


	//*****************************
	// *      TABLE OF CONTENTS
	// *****************************/
	.page {
		&:has(.toc):after {
			display: none;
		}

		.toc {
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;

			h1 {
				text-align: center;
				margin-bottom: 0.3cm;
			}

			a {
				display: inline;
				color: inherit;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}

			h4 {
				margin-top: 0.2cm;
				line-height: 0.4cm;

				&+ul li {
					line-height: 1.2em;
				}
			}

			ul {
				padding-left: 0;
				list-style-type: none;
				margin-top: 0;

				a {
					width: 100%;
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
				}

				li+li h3 {
					margin-top: 0.26cm;
					line-height: 1em
				}

				h3 span:first-child::after {
					border: none;
				}

				span {
					display: contents;

					&:first-child::after {
						content: "";
						bottom: 0.08cm;
						flex: 1;
						margin-left: 0.08cm;
						/* Spacing before dot leaders */
						margin-right: 0.16cm;
						border-bottom: 0.05cm dotted #000;
						margin-bottom: 0.08cm;
					}

					&:last-child {
						display: inline-block;
						align-self: flex-end;
						font-family: "BookInsanityRemake";
						font-size: 0.34cm;
						font-weight: normal;
						color: #000;
					}
				}

				ul {
					/*List indent*/
					margin-left: 1em;
				}
			}

			&.wide {
				.useColumns(0.96, @fillMode: balance);
			}
		}
	}

	//*****************************
	// *    DEFINITION LISTS
	// *****************************/
	.page {
		dl {
			line-height: 1.25em;
			padding-left: 1em;
			white-space: pre-line;

			&+* {
				margin-top: 0.28cm;
			}
		}

		dl+* {
			margin-top: 0.17cm;
		}

		p+dl {
			margin-top: 0.17cm;
		}

		dt {
			display: inline;
			margin-right: 5px;
			margin-left: -1em;
		}

		dd {
			display: inline;
			margin-left: 0px;
			text-indent: 0px;
		}
	}

	//*****************************
	// *         WIDE
	// *****************************/
	.page .wide {
		margin-bottom: 0.325cm;
	}

	.page h1+* {
		margin-top: 0;
	}
}