upstream master into part cover

2025-12-28 09:12:45 +00:00 · 2023-03-25 21:36:56 +01:00
parent 9870ff369e 46bc34d527
commit 2ed669d95e
74 changed files with 3948 additions and 16612 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -48,7 +48,7 @@ jobs:
      - image: cimg/node:16.11.0

    working_directory: ~/homebrewery
-    parallelism: 4
+    parallelism: 1

    steps:
      - attach_workspace:
@@ -61,15 +61,15 @@ jobs:
      - run:
          name: Test - Basic
          command: npm run test:basic
-      - run:
-          name: Test - Coverage
-          command: npm run test:coverage
      - run:
          name: Test - Mustache Spans
          command: npm run test:mustache-span
      - run:
          name: Test - Routes
          command: npm run test:route
+      - run:
+          name: Test - Coverage
+          command: npm run test:coverage

 workflows:
  build_and_test:
--- a/changelog.md
+++ b/changelog.md
@@ -1,4 +1,23 @@
 ```css
+.beta {
+	color         : white;
+	padding       : 4px 6px;
+	line-height   : 1em;
+	background    : grey;
+	border-radius : 12px;
+	font-family   : monospace;
+	font-size     : 10px;
+	font-weight   : 800;
+	margin-top    : -5px;
+	margin-bottom : -5px;
+}
+
+.fac {
+	height: 1em;
+	line-height: 2em;
+	margin-bottom: -0.05cm
+}
+
 h5 {
 	font-size: .35cm !important;
 }
@@ -61,6 +80,76 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).

+### XXXXday DD/MM/2023 - v3.8.0
+{{taskList
+##### G-Ambatte
+
+* [x] Update server build scripts to fix Admin page
+
+Fixes issues [#2657](https://github.com/naturalcrit/homebrewery/issues/2657)
+
+* [x] Fix internal links inside `<div>` blocks not automatically receiving the `target=_self` attribute
+
+Fixes issues [#2680](https://github.com/naturalcrit/homebrewery/issues/2680)
+}}
+
+### Monday 13/03/2023 - v3.7.2
+{{taskList
+
+##### Calculuschild
+
+* [x] Fix wide Monster Stat Blocks not spanning columns on Legacy
+}}
+
+### Thursday 09/03/2023 - v3.7.1
+{{taskList
+
+##### Lucastucious (new contributor!)
+
+* [x] Changed `filter: drop-shadow` to `box-shadow` on text boxes, making text selectable in PDFs again.
+
+Fixes issues [#1569](https://github.com/naturalcrit/homebrewery/issues/1569)
+
+{{note
+**NOTE:** If you create your PDF on a computer with an old version of Mac Preview (v10 or older) you may see shadows appear as solid gray.
+}}
+
+##### MichielDeMey
+
+* [x] Updated the Google Drive icon
+* [x] Backend fix to unit tests failing intermittently
+
+##### Calculuschild
+
+* [x] Fix PDF pixelation on CoverPage text outlines
+}}
+
+
+### Tuesday 28/02/2023 - v3.7.0
+{{taskList
+
+{{note
+**NOTE:** Some new snippets will now show a {{beta BETA}} tag. Feel free to use them, but be aware we may change how they work depending on your feedback.
+}}
+
+##### Calculuschild
+
+* [x] New {{openSans **IMAGES → WATERCOLOR EDGE** {{fac,mask-edge}} }} and {{openSans **WATERCOLOR CORNER** {{fac,mask-corner}} }} snippets for V3, which adds a stylish watercolor texture to the edge of your images! (Thanks to /u/flamableconcrete on Reddit for providing these image masks!)
+
+* [x] Fix site not displaying on iOS devices
+
+##### 5e-Cleric
+
+* [x] New {{openSans **PHB → COVER PAGE** {{fac,book-front-cover}} }} snippet for V3, which adds a stylish coverpage to your brew! (Thanks to /u/Kaiburr_Kath-Hound on Reddit for providing some of these resources!)
+
+##### MichielDeMey (new contribuor!)
+
+* [x] Fix typo in testing scripts
+* [x] Fix "mug" image not using HTTPS
+
+Fixes issues [#2687](https://github.com/naturalcrit/homebrewery/issues/2687)
+}}
+
 ### Saturday 18/02/2023 - v3.6.1
 {{taskList
 ##### G-Ambatte
@@ -70,8 +159,7 @@ For a full record of development, visit our [Github Page](https://github.com/nat
 Fixes issues [#2674](https://github.com/naturalcrit/homebrewery/issues/2674)
 }}

-
-### Friday 23/01/2023 - v3.6.0
+### Monday 23/01/2023 - v3.6.0
 {{taskList
 ##### calculuschild

--- a/client/components/combobox.jsx
+++ b/client/components/combobox.jsx
@@ -0,0 +1,129 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const cx = require('classnames');
+require('./combobox.less');
+
+const Combobox = createClass({
+	displayName     : 'Combobox',
+	getDefaultProps : function() {
+		return {
+			className   : '',
+			trigger     : 'hover',
+			default     : '',
+			placeholder : '',
+			autoSuggest : {
+				clearAutoSuggestOnClick : true,
+				suggestMethod           : 'includes',
+				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
+			},
+		};
+	},
+	getInitialState : function() {
+		return {
+			showDropdown : false,
+			value        : '',
+			options      : [...this.props.options],
+			inputFocused : false
+		};
+	},
+	componentDidMount : function() {
+		if(this.props.trigger == 'click')
+			document.addEventListener('click', this.handleClickOutside);
+		this.setState({
+			value : this.props.default
+		});
+	},
+	componentWillUnmount : function() {
+		if(this.props.trigger == 'click')
+			document.removeEventListener('click', this.handleClickOutside);
+	},
+	handleClickOutside : function(e){
+		// Close dropdown when clicked outside
+		if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
+			this.handleDropdown(false);
+		}
+	},
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show,
+			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
+		});
+	},
+	handleInput : function(e){
+		e.persist();
+		this.setState({
+			value        : e.target.value,
+			inputFocused : false
+		}, ()=>{
+			this.props.onEntry(e);
+		});
+	},
+	handleSelect : function(e){
+		this.setState({
+			value : e.currentTarget.getAttribute('data-value')
+		}, ()=>{this.props.onSelect(this.state.value);});
+		;
+	},
+	renderTextInput : function(){
+		return (
+			<div className='dropdown-input item'
+				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
+				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
+				<input
+					type='text'
+					onChange={(e)=>this.handleInput(e)}
+					value={this.state.value || ''}
+					placeholder={this.props.placeholder}
+					onBlur={(e)=>{
+						if(!e.target.checkValidity()){
+							this.setState({
+								value : this.props.default
+							}, ()=>this.props.onEntry(e));
+						}
+					}}
+				/>
+			</div>
+		);
+	},
+	renderDropdown : function(dropdownChildren){
+		if(!this.state.showDropdown) return null;
+		if(this.props.autoSuggest && !this.state.inputFocused){
+			const suggestMethod = this.props.autoSuggest.suggestMethod;
+			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
+			const filteredArrays = filterOn.map((attr)=>{
+				const children = dropdownChildren.filter((item)=>{
+					if(suggestMethod === 'includes'){
+						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
+					} else if(suggestMethod === 'startsWith'){
+						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
+					}
+				});
+				return children;
+			});
+			dropdownChildren = _.uniq(filteredArrays.flat(1));
+		}
+
+		return (
+			<div className='dropdown-options'>
+				{dropdownChildren}
+			</div>
+		);
+	},
+	render : function () {
+		const dropdownChildren = this.state.options.map((child, i)=>{
+			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
+			return clone;
+		});
+		return (
+			<div className={`dropdown-container ${this.props.className}`}
+				ref='dropdown'
+				onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
+				{this.renderTextInput()}
+				{this.renderDropdown(dropdownChildren)}
+			</div>
+		);
+	}
+});
+
+module.exports = Combobox;
--- a/client/components/combobox.less
+++ b/client/components/combobox.less
@@ -0,0 +1,50 @@
+.dropdown-container {
+    position:relative;
+    input {
+        width: 100%;
+    }
+    .dropdown-options {
+        position:absolute;
+        background-color: white;
+        z-index: 100;
+        width: 100%;
+        border: 1px solid gray;
+        overflow-y: auto;
+        max-height: 200px;
+
+        &::-webkit-scrollbar {
+          width: 14px;
+        }
+        &::-webkit-scrollbar-track {
+          background: #ffffff;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #949494;
+          border-radius: 10px;
+          border: 3px solid #ffffff;
+        }
+
+        .item {
+            position:relative;
+            font-size: 11px;
+            font-family: Open Sans;
+            padding: 5px;
+            cursor: default;
+            margin: 0 3px;
+            //border-bottom: 1px solid darkgray;
+            &:hover {
+                filter: brightness(120%);
+                background-color: rgb(163, 163, 163);
+            }
+            .detail {
+                width:100%;
+                text-align: left;
+                color: rgb(124, 124, 124);
+                font-style:italic;
+                font-size: 9px;
+            }
+        }
+
+    }
+
+}
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -27,6 +27,7 @@ const BrewRenderer = createClass({
 			style    : '',
 			renderer : 'legacy',
 			theme    : '5ePHB',
+			lang     : '',
 			errors   : []
 		};
 	},
@@ -190,7 +191,6 @@ const BrewRenderer = createClass({
 		const rendererPath = this.props.renderer == 'V3' ? 'V3' : 'Legacy';
 		const themePath    = this.props.theme ?? '5ePHB';
 		const baseThemePath = Themes[rendererPath][themePath].baseTheme;
-
 		return (
 			<React.Fragment>
 				{!this.state.isMounted
@@ -223,7 +223,7 @@ const BrewRenderer = createClass({
 							&&
 							<>
 								{this.renderStyle()}
-								<div className='pages' ref='pages'>
+								<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
 									{this.renderPages()}
 								</div>
 							</>
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -6,6 +6,7 @@ const _     = require('lodash');
 const cx    = require('classnames');
 const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
+const Combobox = require('client/components/combobox.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');

 const Themes = require('themes/themes.json');
@@ -35,7 +36,8 @@ const MetadataEditor = createClass({
 				authors     : [],
 				systems     : [],
 				renderer    : 'legacy',
-				theme       : '5ePHB'
+				theme       : '5ePHB',
+				lang        : 'en'
 			},
 			onChange    : ()=>{},
 			reportError : ()=>{}
@@ -76,6 +78,7 @@ const MetadataEditor = createClass({
 			const errMessage = validationErr.map((err)=>{
 				return `- ${err}`;
 			}).join('\n');
+
 			callIfExists(e.target, 'setCustomValidity', errMessage);
 			callIfExists(e.target, 'reportValidity');
 		}
@@ -111,6 +114,11 @@ const MetadataEditor = createClass({
 		this.props.onChange(this.props.metadata);
 	},

+	handleLanguage : function(languageCode){
+		this.props.metadata.lang = languageCode;
+		this.props.onChange(this.props.metadata);
+	},
+
 	handleDelete : function(){
 		if(this.props.metadata.authors && this.props.metadata.authors.length <= 1){
 			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
@@ -224,6 +232,47 @@ const MetadataEditor = createClass({
 		</div>;
 	},

+	renderLanguageDropdown : function(){
+		const langCodes = ['en', 'de', 'de-ch', 'fr', 'ja', 'es', 'it', 'sv', 'ru', 'zh-Hans', 'zh-Hant'];
+		const listLanguages = ()=>{
+			return _.map(langCodes.sort(), (code, index)=>{
+				const localName = new Intl.DisplayNames([code], { type: 'language' });
+				const englishName = new Intl.DisplayNames('en', { type: 'language' });
+				return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
+					{`${code}`}
+					<div className='detail'>{`${localName.of(code)}`}</div>
+				</div>;
+			});
+		};
+
+		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
+
+		return <div className='field language'>
+			<label>language</label>
+			<div className='value'>
+				<Combobox trigger='click'
+					className='language-dropdown'
+					default={this.props.metadata.lang || ''}
+					placeholder='en'
+					onSelect={(value)=>this.handleLanguage(value)}
+					onEntry={(e)=>{
+						e.target.setCustomValidity('');	//Clear the validation popup while typing
+						debouncedHandleFieldChange('lang', e);
+					}}
+					options={listLanguages()}
+					autoSuggest={{
+						suggestMethod           : 'startsWith',
+						clearAutoSuggestOnClick : true,
+						filterOn                : ['data-value', 'data-detail', 'title']
+					}}
+				>
+				</Combobox>
+				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
+			</div>
+
+		</div>;
+	},
+
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;

@@ -301,6 +350,8 @@ const MetadataEditor = createClass({
 				</div>
 			</div>

+			{this.renderLanguageDropdown()}
+
 			{this.renderThemeDropdown()}

 			{this.renderRenderOptions()}
@@ -315,7 +366,7 @@ const MetadataEditor = createClass({
 				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
 				placeholder='invite author' unique={true}
 				values={this.props.metadata.invitedAuthors}
-				notes={['Invited authors are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
+				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
 				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>

 			<hr/>
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -36,11 +36,15 @@
 		flex: 5 0 200px;
 		gap: 10px;
 	}
+
+
+
 	.field{
 		display       : flex;
 		flex-wrap     : wrap;
 		width         : 100%;
 		min-width     : 200px;
+		position      : relative;
 		&>label{
 			width          : 80px;
 			font-size      : 11px;
@@ -57,6 +61,9 @@
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
+			&:focus {
+				outline: 1px solid #444;
+			}
 		}
 		&.thumbnail{
 			height      : 1.4em;
@@ -88,9 +95,15 @@
 			}
 		}

+		&.language .language-dropdown {
+			max-width : 150px;
+			z-index   : 200;
+		}
 		small {
-			font-size  : 0.6em;
-			font-style : italic;
+			font-size   : 0.6em;
+			font-style  : italic;
+			line-height : 1.4em;
+			display     : inline-block;
 		}
 	}

@@ -159,7 +172,7 @@
 		.navDropdownContainer {
 			background-color	: white;
 			position			: relative;
-			z-index				: 500;
+			z-index				: 100;
 			&.disabled {
 				font-style			:italic;
 				font-style			: italic;
--- a/client/homebrew/editor/metadataEditor/validations.js
+++ b/client/homebrew/editor/metadataEditor/validations.js
@@ -23,9 +23,9 @@ module.exports = {
 			}
 		}
 	],
-	language : [
+	lang : [
 		(value)=>{
-			return new RegExp(/[a-z]{2,3}(-.*)?/).test(value || '') === false ? 'Invalid language code.' : null;
+			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
 		}
 	]
 };
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -171,7 +171,8 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				{snippet.name}
+				<span className='name'>{snippet.name}</span>
+				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -96,20 +96,36 @@
 			padding          : 0px;
 			background-color : #ddd;
 			.snippet{
+				position: relative;
 				.animate(background-color);
-				min-width : max-content;
-				padding   : 5px;
-				cursor    : pointer;
-				font-size : 10px;
+				display     : flex;
+				align-items : center;
+				min-width   : max-content;
+				padding     : 5px;
+				cursor      : pointer;
+				font-size   : 10px;
 				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
 					height       : 1.2em;
 					&~i{
 						margin-right: 0;
-						margin-left: 8px;
+						margin-left: 5px;
 					}
 				}
+				.name {
+					margin-right  : auto;
+				}
+				.beta {
+					color         : white;
+					padding       : 4px 6px;
+					line-height   : 1em;
+					margin-left   : 5px;
+					align-self    : center;
+					background    : grey;
+					border-radius : 12px;
+					font-family   : monospace;
+				}
 				&:hover{
 					background-color : #999;
 					&>.dropdown{
--- a/client/homebrew/googleDrive.png
+++ b/client/homebrew/googleDrive.png
--- a/client/homebrew/googleDrive.svg
+++ b/client/homebrew/googleDrive.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>
--- a/client/homebrew/googleDriveMono.png
+++ b/client/homebrew/googleDriveMono.png
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -47,6 +47,7 @@ const Homebrew = createClass({
 				editId    : null,
 				createdAt : null,
 				updatedAt : null,
+				lang      : ''
 			}
 		};
 	},
--- a/client/homebrew/navbar/account.navitem.jsx
+++ b/client/homebrew/navbar/account.navitem.jsx
@@ -63,7 +63,7 @@ const Account = createClass({
 		if(global.account){
 			return <Nav.dropdown>
 				<Nav.item
-					className='account'
+					className='account username'
 					color='orange'
 					icon='fas fa-user'
 				>
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -187,4 +187,7 @@
 	.account.navItem{
 		min-width: 100px;
 	}
+	.account.username.navItem{
+		text-transform: none;
+	}
 }
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -6,7 +6,7 @@ const cx    = require('classnames');
 const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');

-const googleDriveIcon = require('../../../../googleDrive.png');
+const googleDriveIcon = require('../../../../googleDrive.svg');
 const dedent = require('dedent-tabs').default;

 const BrewItem = createClass({
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -94,7 +94,7 @@
 		}
 	}
 	.googleDriveIcon {
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
 	}
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -219,7 +219,7 @@ const ListPage = createClass({

 	render : function(){
 		return <div className='listPage sitePage'>
-			<style>@layer V3_5ePHB, bundle;</style>
+			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -24,8 +24,7 @@ const Markdown = require('naturalcrit/markdown.js');

 const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');

-const googleDriveActive = require('../../googleDrive.png');
-const googleDriveInactive = require('../../googleDriveMono.png');
+const googleDriveIcon = require('../../googleDrive.svg');

 const SAVE_TIMEOUT = 3000;

@@ -222,10 +221,7 @@ const EditPage = createClass({

 	renderGoogleDriveIcon : function(){
 		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			{this.state.saveGoogle
-				? <img src={googleDriveActive} alt='googleDriveActive'/>
-				: <img src={googleDriveInactive} alt='googleDriveInactive'/>
-			}
+			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>

 			{this.state.confirmGoogleTransfer &&
 				<div className='errorContainer' onClick={this.closeAlerts}>
@@ -402,7 +398,14 @@ const EditPage = createClass({
 						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} errors={this.state.htmlErrors} />
+					<BrewRenderer
+						text={this.state.brew.text}
+						style={this.state.brew.style}
+						renderer={this.state.brew.renderer}
+						theme={this.state.brew.theme}
+						errors={this.state.htmlErrors}
+						lang={this.state.brew.lang}
+					/>
 				</SplitPane>
 			</div>
 		</div>;
--- a/client/homebrew/pages/editPage/editPage.less
+++ b/client/homebrew/pages/editPage/editPage.less
@@ -18,8 +18,12 @@
 		position : relative;
 	}
 	.googleDriveStorage img{
-		height	: 20px;
+		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
+
+		&.inactive {
+			filter: grayscale(1);
+		}
 	}
 }
--- a/client/homebrew/pages/homePage/welcome_msg.md
+++ b/client/homebrew/pages/homePage/welcome_msg.md
@@ -36,7 +36,7 @@ After clicking the "Print" item in the navbar a new page will open and a print d
 If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew!
 }}

-![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}
+![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px}

 {{artist,bottom:160px,left:100px
 ##### Homebrew Mug
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -61,6 +61,7 @@ const NewPage = createClass({
 			// brew.description = metaStorage?.description || this.state.brew.description;
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
+			brew.lang     = metaStorage?.lang     ?? brew.lang;

 			this.setState({
 				brew : brew
@@ -70,7 +71,7 @@ const NewPage = createClass({
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
-		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme }));
+		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
 	},
 	componentWillUnmount : function() {
 		document.removeEventListener('keydown', this.handleControlKeys);
@@ -114,13 +115,16 @@ const NewPage = createClass({
 	handleMetaChange : function(metadata){
 		this.setState((prevState)=>({
 			brew : { ...prevState.brew, ...metadata },
-		}));
-		localStorage.setItem(METAKEY, JSON.stringify({
-			// 'title'       : this.state.brew.title,
-			// 'description' : this.state.brew.description,
-			'renderer' : this.state.brew.renderer,
-			'theme'    : this.state.brew.theme
-		}));
+		}), ()=>{
+			localStorage.setItem(METAKEY, JSON.stringify({
+				// 'title'       : this.state.brew.title,
+				// 'description' : this.state.brew.description,
+				'renderer' : this.state.brew.renderer,
+				'theme'    : this.state.brew.theme,
+				'lang'     : this.state.brew.lang
+			}));
+		});
+		;
 	},

 	save : async function(){
@@ -211,7 +215,7 @@ const NewPage = createClass({
 						onMetaChange={this.handleMetaChange}
 						renderer={this.state.brew.renderer}
 					/>
-					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} errors={this.state.htmlErrors}/>
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} theme={this.state.brew.theme} lang={this.state.brew.lang} errors={this.state.htmlErrors}/>
 				</SplitPane>
 			</div>
 		</div>;
--- a/client/icons/Davek.svg
+++ b/client/icons/Davek.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 791.04 953.29"><title>Davek</title><g id="Layer_2" data-name="Layer 2"><g id="Davek"><path d="M178.41,13.46a19.33,19.33,0,0,0-4.71,5.38q8.07,6.07,13.46,6.07a8.27,8.27,0,0,0,4.71-1.35,130.23,130.23,0,0,0,16.83-7.07,74.55,74.55,0,0,1,18.85-6.39h2.7q8.07,0,14.81,8.74a944.19,944.19,0,0,0,95.6,4.72q19.5,0,38.37-.67,69.33-2,139.68-5.72t139.7-5.06q16.82-.64,34.34-.66,50.49,0,98.29,3.36-17.5,12.12-22.55,31.64t-5,33.66q.64,22.89.66,45.1,0,47.13-3.36,97-6.07,74.05-9.78,148.11t-5,146.09v17.51a766.1,766.1,0,0,0,8.75,118.48,38.57,38.57,0,0,0-4,17.51,30.94,30.94,0,0,0,.67,6.06q2,12.12,3.36,23.22c.9,7.42,1.57,14.92,2,22.55v3.37a57.93,57.93,0,0,1-3.36,19.52c.43,4.5.67,8.77.67,12.8a260.65,260.65,0,0,1-2.7,37,344.26,344.26,0,0,0-4,52.52,133.5,133.5,0,0,0,8.09,45.44q8.07,22.57,33,36.68-6.06,8.78-20.19,8.77H762.1c-4.5-.45-8.53-.69-12.12-.69a78.11,78.11,0,0,0-21.54,2.7,579.1,579.1,0,0,0-63.64,3.71q-33.31,3.71-67.65,6.39t-68.66,3.37h-4a188.05,188.05,0,0,1-59.92-9.43q20.19-4,39.06-23.22t20.19-47.46q11.44-22.21,11.45-49.82a320.44,320.44,0,0,1,3.36-49.15q-9.45-4.69-10.09-8.75v-2.7a73,73,0,0,1,.66-8.74,105.81,105.81,0,0,0,3.37-12.8,7.49,7.49,0,0,0,.68-3.37q0-4.7-4.05-10.09c.45-4.93.69-10.1.69-15.48a311.71,311.71,0,0,0-3.37-46.45,207.31,207.31,0,0,1-1.35-24.25,274.58,274.58,0,0,1,4-45.1l15.5,6.73q-3.37-17.49-3.37-41.07,0-24.89,8.75-44.44a27.73,27.73,0,0,0,2-9.43,15.32,15.32,0,0,0-3.36-10.09,60.75,60.75,0,0,1-10.1-15.48l-7.39,6.73q2.67-47.79,8.74-99,3.35-33.63,3.37-65.29,0-14.81-.69-29a205.09,205.09,0,0,1-4-41.74,190.26,190.26,0,0,1,2-26.92q4-37,14.81-67.33a25.14,25.14,0,0,1-2.68-11.43,31.13,31.13,0,0,1,.66-6.07V140q0-6.72-8.74-10.09-3.37-16.83-5.73-31.3T521.07,77.41q-55.2,2.7-115.78,4.71-19.55.7-39.72.69-38.38,0-74.06-2.7c-5.4,4.5-8.08,9.21-8.08,14.14v1.34a41.5,41.5,0,0,0,4.37,15.49q3.7,7.4,7.4,15.16a35,35,0,0,1,3.71,15.13q32.31,34.35,64,68.68a335.89,335.89,0,0,1,51.83,73.38q13.46,7.4,18.51,17.49t10.11,19.87q5.06,9.78,10.1,18.85t16.5,11.78v12.12a194.5,194.5,0,0,1-37.38-4q-20.52-4-40.73-6.73a114.48,114.48,0,0,0-17.49-1.35,97.2,97.2,0,0,0-20.2,2q-17.52,4.05-31,20.19-16.84-1.35-27.27-9.75a76.13,76.13,0,0,1-17.51-20.2q-7.06-11.76-14.47-24.9a79.77,79.77,0,0,0-18.84-22.57A305.87,305.87,0,0,1,177.73,237q-28.29-33.67-54.54-69T68,99.31A381.16,381.16,0,0,0,0,38.37q12.79,0,22.89-9.75A190.69,190.69,0,0,1,44.76,10.44Q56.54,2,68.66,0H72Q82.8,0,97,10.76Z"/></g></g></svg>
--- a/client/icons/Iokharic.svg
+++ b/client/icons/Iokharic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428.05 941.17"><title>Iokharic</title><g id="Layer_2" data-name="Layer 2"><g id="Iokharic"><path d="M334.76,909.61V259.3l2.74-89.18c3.43,0,6.18-8.23,7.55-24.69,3.43,0,7.55-8.92,13.72-27.44,13-11,19.89-21.27,19.89-31.56,0-13-5.48-20.58-17.15-23.32l-30.87,2.74H320.36c-21.27,13-39.79,22.64-56.94,27.44h-37c-11.67,0-26.76,7.55-46,22q-12.34,0-30.86,16.46c-10.29,0-40.48,26.75-91.93,80.95,0,8.23-6.17,21.26-18.52,38.41l-3.43,15.78v41.84L67.23,343c2.74,0,9.6,6.86,19.89,19.9,24,18.52,36.36,30.86,36.36,38.41l-12.35,10.29H105c-24.7-15.78-45.28-32.93-62.43-52.13L15.78,316.92,0,266.85c3.43-17.84,7.55-29.5,13.72-35v-11c0-18.52,7.55-39.79,22-63.8,0-9.6,8.23-21.27,24.7-34.3,0-9.6,15.77-26.07,46.64-50.08,19.9-16.46,46-28.12,76.83-35,5.49-6.86,21.27-14.41,46.65-21.95C238,5.49,251.07,0,270.28,0h137.2c8.91,0,15.77,8.23,20.57,24V40.47l-5.48,8.23V166c0,17.15-7.55,31.55-21.95,43.22v41.15l-2.75,24.7q0,9.26,24.7,30.87v38.41c0,10.29-4.81,19.9-15.09,28.82h-6.86V558.39c0,55.57-4.81,97.41-15.1,124.16-4.8,2.75-7.54,19.21-9.6,48.71l2.74,17.15-2.74,76.14v30.19q0,32.93-32.93,86.43C337.5,937.74,334.76,926.76,334.76,909.61Z"/></g></g></svg>
--- a/client/icons/Rellanic.svg
+++ b/client/icons/Rellanic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 527.7 940.25"><title>Rellanic</title><g id="Layer_2" data-name="Layer 2"><g id="Rellanic"><path d="M527.7,5.45q-3.83,19.65-15,30.56a129.61,129.61,0,0,1-26.46,19.64q-9.84,6.56-31.66,15.28-19.63,7.65-31.64,16.38Q380.33,103.69,342.16,108a468.46,468.46,0,0,1-54,3.28q-15.83,0-30.56-1.1a53.19,53.19,0,0,0-20.19-6.55H217.74q-7.12,1.11-21.29,1.1a51.67,51.67,0,0,1-20.18-4.36q8.72,19.65,25.63,29.46,14.19,8.74,28.38,29.47a634.05,634.05,0,0,1,98.78,90.58l91.12,103.69a65.1,65.1,0,0,0-.54,8.19,42.47,42.47,0,0,0,.54,7.09c.73,1.82,1.27,3.29,1.64,4.37q7.08,8.75,10.92,12,1.62,1.1,12.55,14.19a14,14,0,0,1,3.27,6.55,9.75,9.75,0,0,1,1.1,4.37,9.62,9.62,0,0,1-1.1,4.36q35.46,43.66,51.3,89.5,3.25,9.82,5.45,19.64a288.59,288.59,0,0,1,10.37,68.75v8.19a296,296,0,0,1-9.81,76.94q-7.12,27.3-24,77.5L418,831.65Q383,872,344.88,899.31a243.27,243.27,0,0,1-90.59,38.19,179.84,179.84,0,0,1-31.64,2.75q-38.78,0-81.87-15.84A293.78,293.78,0,0,1,78,886.22a312.61,312.61,0,0,1-51.85-48,300.52,300.52,0,0,0-18-46.94,60.18,60.18,0,0,1-4.92-13.64,82.36,82.36,0,0,1-2.19-19.11,104.89,104.89,0,0,1,.56-10.91,176.12,176.12,0,0,1-1.64-24,199.79,199.79,0,0,1,2.72-32.74Q5.45,663,5.45,645a103.71,103.71,0,0,0-.54-10.92,242.44,242.44,0,0,1,50.74-67.66,646.83,646.83,0,0,0,57.86-61.12q11.44-10.89,25.09-13.1A88.3,88.3,0,0,1,163.71,489q14.17-1.11,29.46-1.1a108.11,108.11,0,0,0,28.38-7.63q17.44,8.75,27.29,12a124.47,124.47,0,0,1,28.38,13.1q8.71,4.38,23.46,17.46,9.29,9.86,17.47,28.38,7.07,12,9.27,21.83a35.16,35.16,0,0,1,1.64,9.83V585a80.23,80.23,0,0,1-8.73,27.28q-8.2,14.19-18,22.93a166.18,166.18,0,0,1-19.65,19.64q-13.1,8.74-20.72,13.1l-7.65-4.37v-1.64q0-12,6.55-18-8.17-6.55-10.36-10.92l-2.18-8.73c0-2.18-.74-5.81-2.19-10.91v-3.29a38,38,0,0,0-3.82-7.63,196.53,196.53,0,0,0-33.84-40.39Q185.53,542.43,162.61,537a163.71,163.71,0,0,0-50.75,9.81q-25.08,8.76-32.2,36Q67.12,615.56,67.13,654.3a256,256,0,0,0,3.26,39.83,176.75,176.75,0,0,0,5.47,28.38Q88.37,770,122.78,812a452.22,452.22,0,0,0,103.13,58.94,153.57,153.57,0,0,0,107,5.45q25.63-12,37.66-27.28,13.62-14.21,23.46-34.93,10.36-18.57,20.2-39.29Q426.72,753.05,437.1,740q3.27-44.76,5.47-61.12a228.17,228.17,0,0,0,3.26-38.21,213.15,213.15,0,0,0-1.64-26.19,245.3,245.3,0,0,0-8.17-48q-2.2-8.17-4.93-16.36-9.27-30.55-34.92-61.12a70,70,0,0,0-2.18-18,29.12,29.12,0,0,0-4.37-10.37,175.28,175.28,0,0,0-17.46-29.48l-18.55-27.27q-12-16.38-16.38-28.38a282.35,282.35,0,0,1-27.81-28.37q-20.22-26.2-24-31.66Q269,295.76,260.29,286q-10.92-12-31.1-25.11-36.56-31.65-79.12-70.94-45.31-39.28-88.41-66.58-14.74-8.17-17.46-16.9a16.93,16.93,0,0,0-.54-3.83V99.87q0-8.73,6.54-19.11A102.47,102.47,0,0,1,63.3,61.12q9.27-9.82,12.56-18.56a223.6,223.6,0,0,1,38.73-3.27,271,271,0,0,1,40.93,3.27A367.15,367.15,0,0,0,215,47.48c6.91,0,13.64-.17,20.2-.56a45,45,0,0,0,21.27,5.47q17.44,0,25.65-1.1h22.93a77.75,77.75,0,0,1,24,7.65,114,114,0,0,1,27.82-3.29H364q27.25,2.2,39.29,2.19,16.34,0,36.55-5.45,19.1-6.55,27.83-22.93h2.72A20.48,20.48,0,0,0,484.58,24c2.17-4.71,6.17-7.09,12-7.09a26.6,26.6,0,0,1,4.92.54v-.54c0-1.08.72-3.46,2.19-7.11a36.74,36.74,0,0,1,6-6.54C512.57,1.1,515.12,0,517.32,0,521,0,524.41,1.82,527.7,5.45Z"/></g></g></svg>
--- a/client/icons/book-front-cover.svg
+++ b/client/icons/book-front-cover.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 541.53217 512"
+   version="1.1"
+   id="svg22127"
+   sodipodi:docname="book-front-cover.svg"
+   width="541.53217"
+   height="512"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs22131" />
+  <sodipodi:namedview
+     id="namedview22129"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.39257813"
+     inkscape:cx="-263.64179"
+     inkscape:cy="444.49751"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg22127" />
+  <!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+  <g
+     id="g20308"
+     transform="matrix(3.7795276,0,0,3.7795276,-201.76367,-251.58203)">
+    <path
+       id="rect20232"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:17.9;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000000"
+       d="m 78.783305,66.564412 c -14.022889,0 -25.4,11.377111 -25.4,25.4 v 84.666668 c 0,14.02289 11.377111,25.4 25.4,25.4 h 76.199995 8.46667 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46667 0,-4.68311 -3.78355,-8.46666 -8.46667,-8.46666 v -16.93334 c 4.68312,0 8.46667,-3.78355 8.46667,-8.46666 v -1.9327 c -0.0322,-0.27545 -0.0652,-0.54693 -0.0946,-0.83923 -0.17511,-1.74441 -0.30542,-3.81626 -0.37672,-6.02909 -0.18285,-5.67612 -0.29322,-5.86808 -0.63459,-6.62698 -0.74838,-1.66366 -2.65792,-3.64941 -4.38681,-4.49844 -1.41973,-0.69716 -0.72585,-0.45434 -1.20923,-0.51934 -0.47548,-0.0639 -2.54581,-0.13856 -6.47454,-0.14056 -0.0907,2.9929 -0.0862,4.81682 -0.58601,7.244 -0.28023,1.36071 -0.97957,3.42078 -2.40812,5.10356 -1.42519,1.67884 -2.81498,2.35811 -3.28145,2.61896 -3.14428,1.76375 -5.09549,2.43427 -9.41597,1.33997 -2.05224,-0.5197 -2.32631,-0.92288 -2.76159,-1.19527 -0.43528,-0.27239 -0.71007,-0.47684 -0.97461,-0.67593 -0.52909,-0.39816 -0.97871,-0.77171 -1.48622,-1.20664 -1.015,-0.86987 -2.20927,-1.95397 -3.6096,-3.26182 -2.80065,-2.61568 -6.38094,-6.09226 -10.18335,-9.90844 -6.19117,-6.21357 -9.5466,-9.59164 -11.7874,-12.16412 -1.1204,-1.28623 -2.03413,-2.38181 -2.90576,-4.03127 -0.87162,-1.64948 -1.40664,-4.21493 -1.40664,-5.61103 0,-1.4012 0.54783,-3.99366 1.42989,-5.64668 0.88206,-1.65304 1.8039,-2.74855 2.94142,-4.04679 2.27504,-2.59646 5.70131,-6.03358 12.03699,-12.369267 7.37691,-7.376888 10.87768,-11.090687 14.75208,-13.810527 1.45289,-1.019939 3.46378,-2.249133 6.08386,-2.580204 0.87337,-0.110323 1.8133,-0.120299 2.82412,0.0098 4.0433,0.520471 6.12413,2.832857 7.01973,3.728454 1.29782,1.297845 3.1373,4.826955 3.46852,7.049182 0.29817,2.00025 0.26393,3.770666 0.25993,6.212541 0.57954,0.0034 0.50388,0.0217 1.17564,0.0217 4.54211,0 8.44363,0.111537 11.991,0.50953 v -21.41004 c 0,-4.683115 -3.78355,-8.466667 -8.46667,-8.466667 h -8.46667 z m 0,101.599998 h 67.733335 v 16.93334 H 78.783305 c -4.683115,0 -8.466667,-3.78357 -8.466667,-8.46667 0,-4.68313 3.783552,-8.46667 8.466667,-8.46667 z" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:17.9;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke markers fill"
+       d="m 186.69094,157.95633 c 2.67243,-2.24871 7.17957,-9.39389 8.63888,-13.69528 1.03796,-3.05942 1.31928,-5.13546 1.33362,-9.84167 0.0278,-9.1246 -2.25302,-14.5915 -8.79325,-21.07662 -6.8535,-6.79576 -12.35348,-8.46107 -27.94423,-8.46107 -8.05417,0 -9.45684,-0.12924 -9.75203,-0.89852 -0.18964,-0.49417 -0.34479,-3.81715 -0.34479,-7.384389 0,-5.728497 -0.13266,-6.618534 -1.13607,-7.621956 -2.57777,-2.57775 -3.29907,-2.07141 -18.02212,12.651595 -12.64444,12.64444 -13.78771,13.94921 -13.78771,15.73575 0,1.78396 1.13629,3.08846 13.49078,15.48766 7.47518,7.50224 14.10644,13.69554 14.8715,13.88928 0.78576,0.19902 2.0096,-0.002 2.84016,-0.46789 1.42969,-0.80092 1.46523,-0.97351 1.74346,-8.46583 l 0.28402,-7.64825 h 8.52049 c 8.16738,0 8.65373,0.0655 11.73586,1.579 3.72428,1.82893 6.9202,5.12058 8.60236,8.86006 0.94352,2.09748 1.22898,4.1112 1.41901,10.01012 0.13083,4.06143 0.49647,7.70394 0.81253,8.09446 0.94895,1.17251 3.64241,0.80611 5.48753,-0.74645 z"
+       id="path20297" />
+  </g>
+</svg>
--- a/client/icons/customIcons.less
+++ b/client/icons/customIcons.less
@@ -31,6 +31,21 @@
 .mask-corner {
  content: url('../icons/mask-corner.svg');
 }
+.mask-center {
+  content: url('../icons/mask-center.svg');
+}
 .fa-file-c {
  content: url('../icons/fa-file-c.svg');
 }
+.book-front-cover {
+  content: url('../icons/book-front-cover.svg');
+}
+.davek {
+  content: url('../icons/Davek.svg');
+}
+.rellanic {
+  content: url('../icons/Rellanic.svg');
+}
+.iokharic {
+  content: url('../icons/Iokharic.svg');
+}
--- a/client/icons/mask-center.svg
+++ b/client/icons/mask-center.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 448 512"
+   version="1.1"
+   id="svg135"
+   sodipodi:docname="mask-center.svg"
+   width="448"
+   height="512"
+   xml:space="preserve"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs139"><pattern
+       inkscape:collect="always"
+       xlink:href="#Strips1_1"
+       id="pattern3077"
+       patternTransform="matrix(23.13193,-23.131931,19.25517,19.25517,18.091544,-20.306833)" /><pattern
+       inkscape:collect="always"
+       patternUnits="userSpaceOnUse"
+       width="2"
+       height="1"
+       patternTransform="translate(0,0) scale(10,10)"
+       id="Strips1_1"
+       inkscape:stockid="Stripes 1:1"><rect
+         style="fill:black;stroke:none"
+         x="0"
+         y="-0.5"
+         width="1"
+         height="2"
+         id="rect2097" /></pattern></defs><sodipodi:namedview
+     id="namedview137"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="0.67711183"
+     inkscape:cx="31.75251"
+     inkscape:cy="260.66595"
+     inkscape:window-width="1920"
+     inkscape:window-height="991"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg135" /><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path
+     id="rect12201"
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:30;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     d="M 48,-5.2e-6 C 21.40803,-5.2e-6 1.98e-5,21.408025 1.98e-5,47.999995 V 464 C 1.98e-5,490.59197 21.40803,512 48,512 h 352 c 26.59198,0 48,-21.40803 48,-48 V 47.999995 C 448,21.408025 426.59198,-5.2e-6 400,-5.2e-6 Z M 64,63.999995 H 384 V 448 H 64 Z" /><rect
+     style="fill:url(#pattern3077);fill-opacity:1;stroke:#000000;stroke-width:48;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#000000"
+     id="rect12206"
+     width="176"
+     height="240"
+     x="136.00002"
+     y="136"
+     rx="48"
+     ry="48" /></svg>
--- a/install/README.WINDOWS.md
+++ b/install/README.WINDOWS.md
@@ -0,0 +1,43 @@
+# Windows Installation Instructions
+
+## Before Installing
+
+These instructions assume that you are installing to a completely new, fresh Windows 10 installation. As such, some steps may not be necessary if you are installing to an existing Windows 10 instance.
+
+## Installation instructions
+
+1. Download the installation script from https://raw.githubusercontent.com/naturalcrit/homebrewery/master/install/windows/install.ps1.
+
+2. Run Powershell as an Administrator.
+  a. Click the Start menu or press the Windows key.
+  b. Type `powershell` into the Search box.
+  c. Right click on the Powershell app and select "Run As Administrator".
+  d. Click YES in the prompt that appears.
+
+3. Change the script execution policy.
+  a. Run the Powershell command `Set-ExecutionPolicy Bypass -Scope Process`.
+  b. Allow the change to be made - press Y at the prompt that appears.
+
+4. Run the installation script.
+  a. Navigate to the location of the script, e.g. `cd C:\Users\ExampleUser\Downloads`.
+  b. Start the script - `.\install.ps1`
+
+5. Once the script has completed, it will start the Homebrewery server. This will normally cause a Network Access prompt for NodeJS - if this appears, click "Allow".
+
+**NOTE:** At this time, the script **ONLY** installs HomeBrewery. It does **NOT** install the NaturalCrit login system, as that is currently a completely separate project.
+
+---
+
+### Testing
+
+These installation instructions have been tested on the following Ubuntu releases:
+
+- *Windows 10 Home - OS Build 19045.2546*
+
+## Final Notes
+
+While this installation process works successfully at the time of writing (January 23, 2023), it relies on all of the Node.JS packages used in the HomeBrewery project retaining their cross-platform capabilities to continue to function. This is one of the inherent advantages of Node.JS, but it is by no means guaranteed and as such, functionality or even installation may fail without warning at some point in the future.
+
+Regards,  
+G  
+January 23, 2023
--- a/install/windows/install.ps1
+++ b/install/windows/install.ps1
@@ -0,0 +1,51 @@
+Write-Host Homebrewery Install -BackgroundColor Black -ForegroundColor Yellow
+Write-Host =================== -BackgroundColor Black -ForegroundColor Yellow
+Write-Host Install Chocolatey -BackgroundColor Black -ForegroundColor Yellow
+Write-Host Instructions from https://chocolate.org/install -BackgroundColor Black -ForegroundColor Yellow
+
+Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
+
+Write-Host Install Node JS v16.11.1 -BackgroundColor Black -ForegroundColor Yellow
+
+choco install nodejs --version=16.11.1 -y
+
+Write-Host Install MongoDB v 4.4.4 -BackgroundColor Black -ForegroundColor Yellow
+
+choco install mongodb --version=4.4.4 -y
+
+Write-Host Install GIT -BackgroundColor Black -ForegroundColor Yellow
+
+choco install git -y
+
+Write-Host Refresh Environment -BackgroundColor Black -ForegroundColor Yellow
+
+Import-Module "$env:ChocolateyInstall\helpers\chocolateyProfile.psm1"
+Update-SessionEnvironment
+
+Write-Host Create Homebrewery directory - C:\Homebrewery -BackgroundColor Black -ForegroundColor Yellow
+
+mkdir C:\Hombrewery
+cd C:\Hombrewery
+
+Write-Host Download Homebrewery project files -BackgroundColor Black -ForegroundColor Yellow
+
+git clone https://github.com/naturalcrit/homebrewery.git
+
+Write-Host Install Homebrewery files -BackgroundColor Black -ForegroundColor Yellow
+
+cd homebrewery
+
+npm install
+npm audit fix
+
+Write-Host Set install type to 'local' -BackgroundColor Black -ForegroundColor Yellow
+
+[System.Environment]::SetEnvironmentVariable('NODE_ENV', 'local')
+
+Write-Host INSTALL COMPLETE -BackgroundColor Black -ForegroundColor Yellow
+Write-Host To start Homebrewery in the future, open a terminal in the Homebrewery directory and run npm start -BackgroundColor Black -ForegroundColor Yellow
+Write-Host ================================================================================================== -BackgroundColor Black -ForegroundColor Yellow
+
+Write-Host Start Homebrewery -BackgroundColor Black -ForegroundColor Yellow
+
+npm start
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "homebrewery",
  "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.6.1",
+  "version": "3.7.2",
  "engines": {
    "node": "16.11.x"
  },
@@ -12,23 +12,22 @@
  "scripts": {
    "dev": "node scripts/dev.js",
    "quick": "node scripts/quick.js",
-    "build": "node scripts/buildHomebrew.js",
-    "buildall": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
+    "build": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
    "builddev": "node scripts/buildHomebrew.js --dev",
    "lint": "eslint --fix **/*.{js,jsx}",
    "lint:dry": "eslint **/*.{js,jsx}",
    "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
    "verify": "npm run lint && npm test",
-    "test": "jest",
+    "test": "jest --runInBand",
    "test:api-unit": "jest server/*.spec.js --verbose",
-    "test:coverage": "jest --coverage --silent",
+    "test:coverage": "jest --coverage --silent --runInBand",
    "test:dev": "jest --verbose --watch",
    "test:basic": "jest tests/markdown/basic.test.js --verbose",
    "test:mustache-span": "jest tests/markdown/mustache-span.test.js --verbose",
    "test:route": "jest tests/routes/static-pages.test.js --verbose",
    "phb": "node scripts/phb.js",
    "prod": "set NODE_ENV=production && npm run build",
-    "postinstall": "npm run buildall",
+    "postinstall": "npm run build",
    "start": "node server.js"
  },
  "author": "stolksdorf",
@@ -37,12 +36,15 @@
    "build/*"
  ],
  "jest": {
-    "testTimeout": 15000,
+    "testTimeout": 30000,
    "modulePaths": [
-      "mode_modules",
+      "node_modules",
      "shared",
      "server"
    ],
+    "coveragePathIgnorePatterns": [
+      "build/*"
+    ],
    "coverageThreshold" : {
      "global" : {
        "statements" : 25,
@@ -68,45 +70,45 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.21.0",
+    "@babel/core": "^7.21.3",
    "@babel/plugin-transform-runtime": "^7.21.0",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
+    "@googleapis/drive": "^5.0.2",
    "body-parser": "^1.20.2",
    "classnames": "^2.3.2",
    "codemirror": "^5.65.6",
    "cookie-parser": "^1.4.6",
    "create-react-class": "^15.7.0",
-    "dedent-tabs": "^0.10.2",
+    "dedent-tabs": "^0.10.3",
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "express-static-gzip": "2.1.7",
-    "fs-extra": "11.1.0",
-    "googleapis": "111.0.0",
+    "fs-extra": "11.1.1",
    "js-yaml": "^4.1.0",
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
    "lodash": "^4.17.21",
-    "marked": "4.2.12",
+    "marked": "4.3.0",
    "marked-extended-tables": "^1.0.5",
    "markedLegacy": "npm:marked@^0.3.19",
    "moment": "^2.29.4",
-    "mongoose": "^6.9.2",
+    "mongoose": "^7.0.3",
    "nanoid": "3.3.4",
    "nconf": "^0.12.0",
-    "npm": "^8.10.0",
+    "npm": "^9.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-frame-component": "4.1.3",
-    "react-router-dom": "6.8.1",
+    "react-frame-component": "5.2.6",
+    "react-router-dom": "6.9.0",
    "sanitize-filename": "1.6.3",
    "superagent": "^6.1.0",
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "eslint": "^8.34.0",
+    "eslint": "^8.36.0",
    "eslint-plugin-react": "^7.32.2",
-    "jest": "^29.4.3",
+    "jest": "^29.5.0",
    "supertest": "^6.3.3"
  }
 }
--- a/scripts/buildHomebrew.js
+++ b/scripts/buildHomebrew.js
@@ -20,8 +20,8 @@ const transforms = {
 };

 const build = async ({ bundle, render, ssr })=>{
-	let css = await lessTransform.generate({ paths: './shared' });
-	css = `@layer bundle {\n${css}\n}`;
+	const css = await lessTransform.generate({ paths: './shared' });
+	//css = `@layer bundle {\n${css}\n}`;
 	await fs.outputFile('./build/homebrew/bundle.css', css);
 	await fs.outputFile('./build/homebrew/bundle.js', bundle);
 	await fs.outputFile('./build/homebrew/ssr.js', ssr);
--- a/server/admin.api.js
+++ b/server/admin.api.js
@@ -16,7 +16,7 @@ const mw = {
 				.status(401)
 				.send('Authorization Required');
 		}
-		const [username, password] = new Buffer(req.get('authorization').split(' ').pop(), 'base64')
+		const [username, password] = Buffer.from(req.get('authorization').split(' ').pop(), 'base64')
 			.toString('ascii')
 			.split(':');
 		if(process.env.ADMIN_USER === username && process.env.ADMIN_PASS === password){
--- a/server/app.js
+++ b/server/app.js
@@ -23,7 +23,7 @@ const splitTextStyleAndMetadata = (brew)=>{
 		const index = brew.text.indexOf('```\n\n');
 		const metadataSection = brew.text.slice(12, index - 1);
 		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme']));
+		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
 		brew.text = brew.text.slice(index + 5);
 	}
 	if(brew.text.startsWith('```css')) {
@@ -225,6 +225,7 @@ app.get('/user/:username', async (req, res, next)=>{
 		'pageCount',
 		'description',
 		'authors',
+		'lang',
 		'published',
 		'views',
 		'shareId',
--- a/server/brewDefaults.js
+++ b/server/brewDefaults.js
@@ -15,6 +15,7 @@ const DEFAULT_BREW = {
 	authors     : [],
 	tags        : [],
 	systems     : [],
+	lang        : 'en',
 	thumbnail   : '',
 	views       : 0,
 	published   : false,
--- a/server/db.js
+++ b/server/db.js
@@ -27,8 +27,8 @@ const disconnect = async ()=>{
 };

 const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config),
-		{ retryWrites: false }, handleConnectionError);
+	return await Mongoose.connect(getMongoDBURL(config), { retryWrites: false })
+		.catch((error)=>handleConnectionError(error));
 };

 module.exports = {
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 const _ = require('lodash');
-const { google } = require('googleapis');
+const googleDrive = require('@googleapis/drive');
 const { nanoid } = require('nanoid');
 const token = require('./token.js');
 const config = require('./config.js');
@@ -14,7 +14,7 @@ if(!config.get('service_account')){
 		config.get('service_account');

 	try {
-		serviceAuth = google.auth.fromJSON(keys);
+		serviceAuth = googleDrive.auth.fromJSON(keys);
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
 	} catch (err) {
 		console.warn(err);
@@ -22,7 +22,7 @@ if(!config.get('service_account')){
 	}
 }

-google.options({ auth: serviceAuth || config.get('google_api_key') });
+const defaultAuth = serviceAuth || config.get('google_api_key');

 const GoogleActions = {

@@ -33,7 +33,7 @@ const GoogleActions = {
 			throw (err);
 		}

-		const oAuth2Client = new google.auth.OAuth2(
+		const oAuth2Client = new googleDrive.auth.OAuth2(
 			config.get('google_client_id'),
 			config.get('google_client_secret'),
 			'/auth/google/redirect'
@@ -60,7 +60,7 @@ const GoogleActions = {
 	},

 	getGoogleFolder : async (auth)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });

 		fileMetadata = {
 			'name'     : 'Homebrewery',
@@ -97,7 +97,7 @@ const GoogleActions = {
 	},

 	listGoogleBrews : async (auth)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });

 		const obj = await drive.files.list({
 			pageSize : 1000,
@@ -129,14 +129,16 @@ const GoogleActions = {
 				description : file.description,
 				views       : parseInt(file.properties.views),
 				published   : file.properties.published ? file.properties.published == 'true' : false,
-				systems     : []
+				systems     : [],
+				lang        : file.properties.lang,
+				thumbnail   : file.properties.thumbnail
 			};
 		});
 	  return brews;
 	},

 	updateGoogleBrew : async (brew)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });

 		await drive.files.update({
 			fileId   : brew.googleId,
@@ -149,7 +151,8 @@ const GoogleActions = {
 					editId    : brew.editId || nanoid(12),
 					pageCount : brew.pageCount,
 					renderer  : brew.renderer || 'legacy',
-					isStubbed : true
+					isStubbed : true,
+					lang      : brew.lang || 'en'
 				}
 			},
 			media : {
@@ -167,7 +170,7 @@ const GoogleActions = {
 	},

 	newGoogleBrew : async (auth, brew)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });

 		const media = {
 			mimeType : 'text/plain',
@@ -187,7 +190,8 @@ const GoogleActions = {
 				pageCount : brew.pageCount,
 				renderer  : brew.renderer || 'legacy',
 				isStubbed : true,
-				version   : 1
+				version   : 1,
+				lang      : brew.lang || 'en'
 			}
 		};

@@ -218,7 +222,7 @@ const GoogleActions = {
 	},

 	getGoogleBrew : async (id, accessId, accessType)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });

 		const obj = await drive.files.get({
 			fileId : id,
@@ -255,6 +259,7 @@ const GoogleActions = {
 				description : obj.data.description,
 				systems     : obj.data.properties.systems ? obj.data.properties.systems.split(',') : [],
 				authors     : [],
+				lang        : obj.data.properties.lang,
 				published   : obj.data.properties.published ? obj.data.properties.published == 'true' : false,
 				trashed     : obj.data.trashed,

@@ -274,7 +279,7 @@ const GoogleActions = {
 	},

 	deleteGoogleBrew : async (auth, id, accessId)=>{
-		const drive = google.drive({ version: 'v3', auth });
+		const drive = googleDrive.drive({ version: 'v3', auth });

 		const obj = await drive.files.get({
 			fileId : id,
@@ -300,7 +305,7 @@ const GoogleActions = {
 	},

 	increaseView : async (id, accessId, accessType, brew)=>{
-		const drive = google.drive({ version: 'v3' });
+		const drive = googleDrive.drive({ version: 'v3', auth: defaultAuth });

 		await drive.files.update({
 			fileId   : brew.googleId,
--- a/server/homebrew.api.spec.js
+++ b/server/homebrew.api.spec.js
@@ -62,6 +62,7 @@ describe('Tests for api', ()=>{
 			description : 'this is a description',
 			tags        : ['something', 'fun'],
 			systems     : ['D&D 5e'],
+			lang        : 'en',
 			renderer    : 'v3',
 			theme       : 'phb',
 			published   : true,
@@ -255,6 +256,7 @@ If you believe you should have access to this brew, ask the file owner to invite
 				pageCount   : 1,
 				published   : false,
 				renderer    : 'legacy',
+				lang        : 'en',
 				shareId     : undefined,
 				systems     : [],
 				tags        : [],
@@ -448,6 +450,7 @@ brew`);
 				pageCount   : 1,
 				published   : false,
 				renderer    : 'V3',
+				lang        : 'en',
 				shareId     : expect.any(String),
 				style       : undefined,
 				systems     : [],
@@ -506,6 +509,7 @@ brew`);
 				pageCount   : undefined,
 				published   : false,
 				renderer    : undefined,
+				lang        : 'en',
 				shareId     : expect.any(String),
 				googleId    : expect.any(String),
 				style       : undefined,
--- a/server/homebrew.model.js
+++ b/server/homebrew.model.js
@@ -15,6 +15,7 @@ const HomebrewSchema = mongoose.Schema({
 	description    : { type: String, default: '' },
 	tags           : [String],
 	systems        : [String],
+	lang           : { type: String, default: 'en' },
 	renderer       : { type: String, default: '' },
 	authors        : [String],
 	invitedAuthors : [String],
@@ -39,30 +40,24 @@ HomebrewSchema.statics.increaseView = async function(query) {
 	return brew;
 };

-HomebrewSchema.statics.get = function(query, fields=null){
-	return new Promise((resolve, reject)=>{
-		Homebrew.find(query, fields, null, (err, brews)=>{
-			if(err || !brews.length) return reject('Can not find brew');
-			if(!_.isNil(brews[0].textBin)) {			// Uncompress zipped text field
-				unzipped = zlib.inflateRawSync(brews[0].textBin);
-				brews[0].text = unzipped.toString();
-			}
-			return resolve(brews[0]);
-		});
-	});
+HomebrewSchema.statics.get = async function(query, fields=null){
+	const brew = await Homebrew.findOne(query, fields).orFail()
+		.catch((error)=>{throw 'Can not find brew';});
+	if(!_.isNil(brew.textBin)) {			// Uncompress zipped text field
+		unzipped = zlib.inflateRawSync(brew.textBin);
+		brew.text = unzipped.toString();
+	}
+	return brew;
 };

-HomebrewSchema.statics.getByUser = function(username, allowAccess=false, fields=null){
-	return new Promise((resolve, reject)=>{
-		const query = { authors: username, published: true };
-		if(allowAccess){
-			delete query.published;
-		}
-		Homebrew.find(query, fields).lean().exec((err, brews)=>{ //lean() converts results to JSObjects
-			if(err) return reject('Can not find brew');
-			return resolve(brews);
-		});
-	});
+HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, fields=null){
+	const query = { authors: username, published: true };
+	if(allowAccess){
+		delete query.published;
+	}
+	const brews = await Homebrew.find(query, fields).lean().exec() //lean() converts results to JSObjects
+		.catch((error)=>{throw 'Can not find brews';});
+	return brews;
 };

 const Homebrew = mongoose.model('Homebrew', HomebrewSchema);
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -239,7 +239,7 @@ const definitionLists = {
 Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
 Marked.use(MarkedExtendedTables());
 Marked.use(mustacheInjectBlock);
-Marked.use({ smartypants: true });
+Marked.use({ renderer: renderer, smartypants: true });

 //Fix local links in the Preview iFrame to link inside the frame
 renderer.link = function (href, title, text) {
@@ -347,10 +347,7 @@ module.exports = {
 	render : (rawBrewText)=>{
 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
 														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
-		return Marked.parse(
-			sanatizeScriptTags(rawBrewText),
-			{ renderer: renderer }
-		);
+		return Marked.parse(sanatizeScriptTags(rawBrewText));
 	},

 	validate : (rawBrewText)=>{
--- a/tests/markdown/basic.test.js
+++ b/tests/markdown/basic.test.js
@@ -13,3 +13,9 @@ test('Processes the markdown within an HTML block if its just a class wrapper',
 	const rendered = Markdown.render(source);
 	expect(rendered).toBe('<div> <p><em>Bold text</em></p>\n </div>');
 });
+
+test('Check markdown is using the custom renderer; specifically that it adds target=_self attribute to internal links in HTML blocks', function() {
+	const source = '<div>[Has _self Attribute?](#p1)</div>';
+	const rendered = Markdown.render(source);
+	expect(rendered).toBe('<div> <p><a href="#p1" target="_self">Has _self Attribute?</a></p>\n </div>');
+});
--- a/themes/Legacy/5ePHB/style.less
+++ b/themes/Legacy/5ePHB/style.less
@@ -262,6 +262,7 @@ body {
 	//Full Width
 	hr+hr+blockquote{
 		.useColumns(0.96);
+		column-fill : balance;
 	}
 	//*****************************
 	// *           FOOTER
--- a/themes/V3/5ePHB/snippets.js
+++ b/themes/V3/5ePHB/snippets.js
@@ -3,6 +3,7 @@
 const MagicGen           = require('./snippets/magic.gen.js');
 const ClassTableGen      = require('./snippets/classtable.gen.js');
 const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
+const scriptGen			 = require('./snippets/script.gen.js');
 const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
 const CoverPageGen       = require('./snippets/coverpage.gen.js');
 const PartCoverPageGen   = require('./snippets/partcoverpage.gen.js');
@@ -170,9 +171,10 @@ module.exports = [
 				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
 			},
 			{
-				name : 'Cover Page',
-				icon : 'fac fa-file-c',
-				gen  : CoverPageGen,
+				name         : 'Cover Page',
+				icon         : 'fac book-front-cover',
+				gen          : CoverPageGen,
+				experimental : true
 			},
 			{
 				name : 'Part Cover Page',
@@ -237,7 +239,30 @@ module.exports = [
 				name : '1/3 Class Table (unframed)',
 				icon : 'fas fa-border-none',
 				gen  : ClassTableGen.third('classTable'),
-			}
+			},
+			{
+				name         : 'Rune Table',
+				icon         : 'fas fa-language',
+				gen          : scriptGen.dwarvish,
+				experimental : true,
+				subsnippets  : [
+					{
+						name : 'Dwarvish',
+						icon : 'fac davek',
+						gen  : scriptGen.dwarvish,
+					},
+					{
+						name : 'Elvish',
+						icon : 'fac rellanic',
+						gen  : scriptGen.elvish,
+					},
+					{
+						name : 'Draconic',
+						icon : 'fac iokharic',
+						gen  : scriptGen.draconic,
+					},
+				]
+			},
 		]
 	},

--- a/themes/V3/5ePHB/snippets/script.gen.js
+++ b/themes/V3/5ePHB/snippets/script.gen.js
@@ -0,0 +1,48 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+module.exports = {
+	dwarvish : ()=>{
+		return dedent `##### Dwarvish Runes: Sample Alphabet
+            {{runeTable,wide,frame,font-family:Davek
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            :
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            }}\n\n`;
+	},
+	elvish : ()=>{
+		return dedent `##### Elvish Runes: Sample Alphabet
+            {{runeTable,wide,frame,font-family:Rellanic
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            :
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            }}\n\n`;
+	},
+	draconic : ()=>{
+		return dedent `##### Draconic Runes: Sample Alphabet
+            {{runeTable,wide,frame,font-family:Iokharic
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | a | b | c | d | e | f | g | h | i | j | k | l | m |
+            :
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
+            | n | o | p | q | r | s | t | u | v | w | x | y | z |
+            }}\n\n`;
+	}
+
+
+};
+
+
+()=>{
+
+};
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -101,276 +101,228 @@
 	// *            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;
+.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
 			}
 		}
-
-		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;
+		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);
+				}
 			}
 		}
-
-		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
+	}
+	//*****************************
+	// *            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;
+		box-shadow          : 1px 4px 14px #888;
+		.page :where(&) {
+			margin-top        : 9px; //Prevent top border getting cut off on colbreak
 		}
-
-		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;
-			}
+		& + * {
+			margin-top : 0.45cm;
 		}
-
-		*+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;
-			}
+			font-size : 0.375cm;
 		}
-
-		//*****************************
-		// *          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);
-					}
-				}
-			}
+		p{
+			display        : block;
+			padding-bottom : 0px;
 		}
-
-		//*****************************
-		// *            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;
-			}
+		: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;
-			}
+	}
+	//************************************
+	// *       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;
+		box-shadow          : 0 0 6px #faf7ea;
+		.page :where(&) {
+			margin-top        : 4px; //Prevent top border getting cut off on colbreak
 		}
-
-		//*****************************
-		// *    Images Snippets
-		// *****************************/
+		& + * {
+			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 {
@@ -495,27 +447,26 @@
 			--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);
-			}
+	//*****************************
+	// *    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;
+			box-shadow            : 1px 4px 14px #888;
+			padding               : 4px 2px;
+			margin-left           : -0.16cm;
+			margin-right          : -0.16cm;
+			width                 : calc(100% + 0.32cm);
+		}

 			position : relative;
 			padding : 0px;
@@ -824,186 +775,168 @@
 		}
 	}

-	//*****************************
-	// *       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;
+//*****************************
+// *       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%;
 		}
 	}
-
-	//*****************************
-	// *      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;
-		}
+	.columnWrapper > p img {
+		position  : absolute;
+		bottom    : 0;
+		left      : 0;
+		height    : 100%;
+		min-width : 100%;
+		z-index   : -1;
 	}
+	h1 {
+		text-shadow: unset;
+		filter         : drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		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 {
+		filter         : drop-shadow(0 0 1px black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+										 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		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 black);
+		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 {
+		filter       : drop-shadow(0 0 0.7px black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+									 drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
+		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;
+	}
+}


 	//*****************************
@@ -1142,7 +1075,46 @@
 		margin-bottom: 0.325cm;
 	}

-	.page h1+* {
-		margin-top: 0;
+.page h1 + *{
+	margin-top : 0;
+}
+
+//*****************************
+// *       RUNE TABLE
+// *****************************/
+.page {
+	.runeTable {
+		margin-block: 0.7cm;
+		table {
+			font-family : inherit;
+			tbody tr {
+				background: unset;
+			}
+			th, td {
+				width: 1.3cm;
+				height: 1.3cm;
+				vertical-align: middle;
+				text-transform: uppercase;
+				outline: 1px solid #000;
+				font-weight: normal;
+			}
+			th{
+				font-family: BookInsanityRemake;
+				font-size: 0.45cm;
+			}
+			td {
+				font-size: 0.7cm;
+			}
+		}
+
+		&.frame {
+			border: initial;
+			border-style: solid;
+			border-image-outset: .45cm .35cm .4cm .4cm;
+			border-image-repeat: stretch;
+			border-image-slice: 170;
+			border-image-source: @scriptBorder;
+			border-image-width: 1.4cm;
+		}
 	}
-}
+}
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -102,10 +102,17 @@ module.exports = [
 				gen  : WatercolorGen,
 			},
 			{
-				name        : 'Watercolor Image Mask Edge',
-				icon        : 'fac mask-edge',
-				gen         : ImageMaskGen.edge('bottom'),
-				subsnippets : [
+				name         : 'Watercolor Center',
+				icon         : 'fac mask-center',
+				gen          : ImageMaskGen.center,
+				experimental : true,
+			},
+			{
+				name         : 'Watercolor Edge',
+				icon         : 'fac mask-edge',
+				gen          : ImageMaskGen.edge('bottom'),
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top',
 						icon : 'fac position-top',
@@ -129,10 +136,11 @@ module.exports = [
 				]
 			},
 			{
-				name        : 'Watercolor Image Mask Corner',
-				icon        : 'fac mask-corner',
-				gen         : ImageMaskGen.corner,
-				subsnippets : [
+				name         : 'Watercolor Corner',
+				icon         : 'fac mask-corner',
+				gen          : ImageMaskGen.corner,
+				experimental : true,
+				subsnippets  : [
 					{
 						name : 'Top-Left',
 						icon : 'fac position-top-left',
--- a/themes/V3/Blank/snippets/imageMask.gen.js
+++ b/themes/V3/Blank/snippets/imageMask.gen.js
@@ -2,6 +2,16 @@ const _ = require('lodash');
 const dedent = require('dedent-tabs').default;

 module.exports = {
+	center :()=>{
+		return dedent`
+			{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0;
+			  ![](https://i.imgur.com/GZfjDWV.png){height:100%}
+			}}
+			<!-- Use --offsetX to shift the mask left or right (can use cm instead of %)
+			     Use --offsetY to shift the mask up or down
+			     Use --rotation to set rotation angle in degrees. -->\n\n`;
+	},
+
 	edge : (side = 'bottom')=>{
 		const rotation = {
 			'bottom' : 0,
@@ -10,10 +20,10 @@ module.exports = {
 			'right'  : 270
 		}[side];
 		return dedent`
-			{{imageMaskEdge${_.random(1, 8)},--offset:0cm,--rotation:${rotation}
+			{{imageMaskEdge${_.random(1, 8)},--offset:0%,--rotation:${rotation}
 			  ![](https://i.imgur.com/GZfjDWV.png){height:100%}
 			}}
-			<!-- Use --offset to shift the mask toward or away from the page center.
+			<!-- Use --offset to shift the mask away from page center (can use cm instead of %)
 			     Use --rotation to set rotation angle in degrees. -->\n\n`;
 	},

--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -1,412 +1,463 @@
-@layer V3_Blank {
-	@import (less) './themes/fonts/5e/fonts.less';
-	@import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';

-	:root {
-		//Colors
-		--HB_Color_Background            : #FFFFFF; // White
-		--HB_Color_WatercolorStain       : #000000; // Black
-	}
+:root {
+	//Colors
+	--HB_Color_Background            : #FFFFFF; // White
+	--HB_Color_WatercolorStain       : #000000; // Black
+}

-	@page { margin: 0; }
-	body {
-		counter-reset : phb-page-numbers;
+@page { margin: 0; }
+body {
+	counter-reset : phb-page-numbers;
+}
+*{
+	-webkit-print-color-adjust : exact;
+}
+
+//*****************************
+// *    MUSTACHE DIVS/SPANS
+// *****************************/
+.page {
+	.block {
+		break-inside      : avoid;
+		display           : inline-block;
+		width             : 100%;
 	}
-	*{
-		-webkit-print-color-adjust : exact;
+	.inline-block {
+		display     : inline-block;
+		text-indent : initial;
+	}
+}
+
+.useColumns(@multiplier : 1, @fillMode: balance){
+	column-fill          : @fillMode;
+	column-count         : 2;
+}
+.columnWrapper{
+	max-height        : 100%;
+	column-span       : all;
+	columns           : inherit;
+	column-gap        : inherit;
+}
+.page{
+	.useColumns();
+	height            : 279.4mm;
+	width             : 215.9mm;
+	padding           : 1.4cm 1.9cm 1.7cm;
+	counter-increment : phb-page-numbers;
+	background-color  : var(--HB_Color_Background);
+	position          : relative;
+	z-index           : 15;
+	box-sizing        : border-box;
+	overflow          : hidden;
+	text-rendering    : optimizeLegibility;
+	page-break-before : always;
+	page-break-after  : always;
+	contain           : size;
+}
+	//*****************************
+	// *            BASE
+	// *****************************/
+.page{
+	p{
+		overflow-wrap : break-word;
+		display       : block;
+	}
+	strong{
+		font-weight : bold;
+	}
+	em{
+		font-style : italic;
+	}
+	sup{
+		vertical-align : super;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	sub{
+		vertical-align : sub;
+		font-size      : smaller;
+		line-height    : 0;
+	}
+	ul {
+		list-style-position : outside; //Needed for multiline list items
+		list-style-type     : disc;
+		padding-left        : 1.4em;
+	}
+	ol {
+		list-style-position : outside;
+		list-style-type     : decimal;
+		padding-left        : 1.4em;
+	}
+	img{
+		z-index : -1;
 	}

 	//*****************************
-	// *    MUSTACHE DIVS/SPANS
+	// *           HEADERS
 	// *****************************/
-	.page {
-		.block {
-			break-inside      : avoid;
-			display           : inline-block;
-			width             : 100%;
-		}
-		.inline-block {
-			display     : inline-block;
-			text-indent : initial;
-		}
+	h1,h2,h3,h4,h5,h6{
+		font-weight  : bold;
+		line-height  : 1.2em;
 	}
-
-	.useColumns(@multiplier : 1, @fillMode: balance){
-		column-fill          : @fillMode;
-		column-count         : 2;
+	h1{
+		font-size : 2em;
 	}
-	.columnWrapper{
-		max-height        : 100%;
-		column-span       : all;
-		columns           : inherit;
-		column-gap        : inherit;
+	h2{
+		font-size : 1.5em;
 	}
-	.page{
-		.useColumns();
-		height            : 279.4mm;
-		width             : 215.9mm;
-		padding           : 1.4cm 1.9cm 1.7cm;
-		counter-increment : phb-page-numbers;
-		background-color  : var(--HB_Color_Background);
-		position          : relative;
-		z-index           : 15;
-		box-sizing        : border-box;
-		overflow          : hidden;
-		text-rendering    : optimizeLegibility;
-		page-break-before : always;
-		page-break-after  : always;
-		contain           : size;
+	h3{
+		font-size : 1.17em;
 	}
-		//*****************************
-		// *            BASE
-		// *****************************/
-	.page{
-		p{
-			overflow-wrap : break-word;
-			display       : block;
-		}
-		strong{
+	h4{
+		font-size : 1em;
+	}
+	h5{
+		font-size : 0.83em;
+	}
+	//*****************************
+	// *          TABLE
+	// *****************************/
+	table{
+		width : 100%;
+		thead{
+			display     : table-row-group;
 			font-weight : bold;
 		}
-		em{
-			font-style : italic;
-		}
-		sup{
-			vertical-align : super;
-			font-size      : smaller;
-			line-height    : 0;
-		}
-		sub{
-			vertical-align : sub;
-			font-size      : smaller;
-			line-height    : 0;
-		}
-		ul {
-			list-style-position : outside; //Needed for multiline list items
-			list-style-type     : disc;
-			padding-left        : 1.4em;
-		}
-		ol {
-			list-style-position : outside;
-			list-style-type     : decimal;
-			padding-left        : 1.4em;
-		}
-		img{
-			z-index : -1;
-		}
-
-		//*****************************
-		// *           HEADERS
-		// *****************************/
-		h1,h2,h3,h4,h5,h6{
-			font-weight  : bold;
-			line-height  : 1.2em;
-		}
-		h1{
-			font-size : 2em;
-		}
-		h2{
-			font-size : 1.5em;
-		}
-		h3{
-			font-size : 1.17em;
-		}
-		h4{
-			font-size : 1em;
-		}
-		h5{
-			font-size : 0.83em;
-		}
-		//*****************************
-		// *          TABLE
-		// *****************************/
-		table{
-			width : 100%;
-			thead{
-				display     : table-row-group;
-				font-weight : bold;
-			}
-		}
-		div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
-			margin-top : 0;	                        // have vertical spacing.
-		}
-
-		//************************************
-		// *           CODE BLOCKS
-		// ************************************/
-		code{
-	    font-family      : "Courier New", Courier, monospace;
-			white-space      : pre-wrap;
-			overflow-wrap    : break-word;
-		}
-
-		pre code{
-			width               : 100%;
-			display             : inline-block;
-		}
-		//*****************************
-		// *          EXTRAS
-		// *****************************/
-		.columnSplit {
-			visibility                 : hidden;
-			-webkit-column-break-after : always;
-			break-after                : always;
-			-moz-column-break-after    : always;
-			margin-top                 : 0;
-			& + * {
-				margin-top : 0;
-			}
-		}
-		//Avoid breaking up
-		blockquote,table{
-			z-index                     : 15;
-			-webkit-column-break-inside : avoid;
-			page-break-inside           : avoid;
-			break-inside                : avoid;
-		}
-		// 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;
-		}
-
-		/* Watermark */
-		.watermark {
-			display         : grid !important;
-			place-items     : center;
-			justify-content	: center;
-			position        : absolute;
-			margin          : 0;
-			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; }
-
-		/* Image Masks */
-		[class*="imageMask"] {
-			position              : absolute;
-			height                : 200%;
-			width                 : 200%;
-			left                  : 50%;
-			bottom                : 50%;
-			--rotation            : 0;
-			--revealer            : none;
-			--checkerboard        : none;
-			--scaleX              : 1;
-			--scaleY              : 1;
-			-webkit-mask-image    : var(--wc), var(--revealer);
-			-webkit-mask-repeat   : repeat-x;
-			-webkit-mask-size     : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
-			-webkit-mask-position : 50% calc(50% - var(--offset));
-			mask-image            : var(--wc);
-			mask-repeat           : repeat-x;
-			mask-size             : 50%;
-			mask-position         : 50% calc(50% - var(--offset));
-			background-image      : var(--checkerboard);
-			background-size       : 20px;
-			z-index               : -1;
-			transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
-			transition            : transform 2s;
-			& > p:has(img) {
-				position   : absolute;
-				width      : 50%;
-				height     : 50%;
-				bottom     : 50%;
-				left       : 50%;
-				transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
-				transition : transform 2s;
-			}
-			& img {
-				position : absolute;
-				display  : block;
-				bottom   : 0;
-			}
-			&.bottom {
-				--rotation : 0;
-				& img {bottom: 0;}
-			}
-			&.top {
-				--rotation : 180;
-				& img {top: 0;}
-			}
-			&.left {
-				--rotation : 90;
-				& img {left: 0;}
-			}
-			&.right {
-				--rotation : -90;
-				& img {right: 0;}
-			}
-			&.revealImage {
-				--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
-				--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
-			}
-		}
-
-		.imageMaskEdge1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
-		.imageMaskEdge2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
-		.imageMaskEdge3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
-		.imageMaskEdge4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
-		.imageMaskEdge5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
-		.imageMaskEdge6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
-		.imageMaskEdge7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
-		.imageMaskEdge8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
-
-		[class*="imageMaskCorner"] {
-			height                : 200%;
-			width                 : 200%;
-			left                  : calc(-50% + var(--offsetX));
-			bottom                : calc(-50% + var(--offsetY));
-			-webkit-mask-image    : var(--wc), var(--revealer);
-			-webkit-mask-repeat   : no-repeat;
-			-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
-			-webkit-mask-position : 50% 50%;
-			mask-image            : var(--wc), var(--revealer);
-			mask-repeat           : no-repeat;
-			mask-size             : 100% 100%; //Scale both dimensions to fit page size
-			mask-position         : 50% 50%;
-			transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));;
-			& > p:has(img) {
-				width      : 50%;
-				height     : 50%; //Complex transform below to handle mix of % and cm offsets
-				left       : 25%;
-				bottom     : 25%;
-				transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
-										 rotate(calc(-1deg * var(--rotation)))
-				             translateX(calc(-1 * var(--offsetX)))
-										 translateY(calc(1 * var(--offsetY)));
-			}
-		}
-
-		.imageMaskCorner1  { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
-		.imageMaskCorner2  { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
-		.imageMaskCorner3  { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
-		.imageMaskCorner4  { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
-		.imageMaskCorner5  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
-		.imageMaskCorner6  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
-		.imageMaskCorner7  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
-		.imageMaskCorner8  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
-		.imageMaskCorner9  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
-		.imageMaskCorner10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
-		.imageMaskCorner11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
-		.imageMaskCorner12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
-		.imageMaskCorner13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
-		.imageMaskCorner14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
-		.imageMaskCorner15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
-		.imageMaskCorner16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
-		.imageMaskCorner17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
-		.imageMaskCorner18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
-		.imageMaskCorner19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
-		.imageMaskCorner20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
-		.imageMaskCorner21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
-		.imageMaskCorner22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
-		.imageMaskCorner23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
-		.imageMaskCorner24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
-		.imageMaskCorner25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
-		.imageMaskCorner26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
-		.imageMaskCorner27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
-		.imageMaskCorner28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
-		.imageMaskCorner29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
-		.imageMaskCorner30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
-		.imageMaskCorner31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
-		.imageMaskCorner32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
-		.imageMaskCorner33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
-		.imageMaskCorner34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
-		.imageMaskCorner35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
-		.imageMaskCorner36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
-		.imageMaskCorner37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+	}
+	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
+		margin-top : 0;	                        // have vertical spacing.
 	}

-	//*****************************
-	// *    DEFINITION LISTS
-	// *****************************/
-	.page {
-		dl {
-			padding-left : 1em;
-			white-space  : pre-line;
-		}
-	  dt {
-	    display      : inline;
-	    margin-right : 0.5ch;
-			margin-left  : -1em;
-	  }
-	  dd {
-			display     : inline;
-			margin-left : 0;
-			text-indent : 0;
-	  }
+	//************************************
+	// *           CODE BLOCKS
+	// ************************************/
+	code{
+    font-family      : "Courier New", Courier, monospace;
+		white-space      : pre-wrap;
+		overflow-wrap    : break-word;
 	}

+	pre code{
+		width               : 100%;
+		display             : inline-block;
+	}
 	//*****************************
-	// *    BLANK LINE
+	// *          EXTRAS
 	// *****************************/
-	.page {
-		.blank {
-			height     : 1em;
+	.columnSplit {
+		visibility                 : hidden;
+		-webkit-column-break-after : always;
+		break-after                : always;
+		-moz-column-break-after    : always;
+		margin-top                 : 0;
+		& + * {
 			margin-top : 0;
-			& + * {
-				margin-top : 0;
-			}
+		}
+	}
+	//Avoid breaking up
+	blockquote,table{
+		z-index                     : 15;
+		-webkit-column-break-inside : avoid;
+		page-break-inside           : avoid;
+		break-inside                : avoid;
+	}
+	// 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;
+	}
+
+	/* Watermark */
+	.watermark {
+		display         : grid !important;
+		place-items     : center;
+		justify-content	: center;
+		position        : absolute;
+		margin          : 0;
+		top             : 0;
+		left            : 0;
+		width           : 100%;
+		height          : 100%;
+		font-size       : 120px;
+		text-transform	: uppercase;
+		mix-blend-mode  : overlay;
+		opacity         : 30%;
+		transform       : rotate(-45deg);
+		z-index         : 500;
+		p {
+			margin-bottom : none;
 		}
 	}

-	//*****************************
-	// *         WIDE
-	// *****************************/
-	.page {
-		.wide{
-			column-span         : all;
-			display             : block;
-			margin-bottom       : 1em;
-			&+* {
-				margin-top : 0;
-			}
+	/* 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; }
+
+	/* Image Masks */
+
+	[class*="imageMask"] {
+		position              : absolute;
+		height                : 200%;
+		width                 : 200%;
+		left                  : 50%;
+		bottom                : 50%;
+		--rotation            : 0;
+		--revealer            : none;
+		--checkerboard        : none;
+		--scaleX              : 1;
+		--scaleY              : 1;
+		-webkit-mask-image    : var(--wc), var(--revealer);
+		-webkit-mask-repeat   : repeat-x;
+		-webkit-mask-size     : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
+		-webkit-mask-position : 50% calc(50% - var(--offset));
+		mask-image            : var(--wc);
+		mask-repeat           : repeat-x;
+		mask-size             : 50%;
+		mask-position         : 50% calc(50% - var(--offset));
+		background-image      : var(--checkerboard);
+		background-size       : 20px;
+		z-index               : -1;
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+		transition            : transform 2s;
+		& > p:has(img) {
+			position   : absolute;
+			width      : 50%;
+			height     : 50%;
+			bottom     : 50%;
+			left       : 50%;
+			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
+			transition : transform 2s;
+		}
+		& img {
+			position : absolute;
+			display  : block;
+			bottom   : 0;
+		}
+		&.bottom {
+			--rotation : 0;
+			& img {bottom: 0;}
+		}
+		&.top {
+			--rotation : 180;
+			& img {top: 0;}
+		}
+		&.left {
+			--rotation : 90;
+			& img {left: 0;}
+		}
+		&.right {
+			--rotation : -90;
+			& img {right: 0;}
+		}
+		&.revealImage {
+			--revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2));
+			--checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image
+		}
+	}
+
+	.imageMaskEdge {
+		&1  { --wc : url(/assets/waterColorMasks/edge/0001.webp); }
+		&2  { --wc : url(/assets/waterColorMasks/edge/0002.webp); }
+		&3  { --wc : url(/assets/waterColorMasks/edge/0003.webp); }
+		&4  { --wc : url(/assets/waterColorMasks/edge/0004.webp); }
+		&5  { --wc : url(/assets/waterColorMasks/edge/0005.webp); }
+		&6  { --wc : url(/assets/waterColorMasks/edge/0006.webp); }
+		&7  { --wc : url(/assets/waterColorMasks/edge/0007.webp); }
+		&8  { --wc : url(/assets/waterColorMasks/edge/0008.webp); }
+	}
+
+	[class*="imageMaskCenter"] {
+		width                 : 100%;
+		height                : 100%;
+		left                  : calc(var(--offsetX));
+		bottom                : calc(var(--offsetY));
+		-webkit-mask-image    : var(--wc), var(--revealer);
+		-webkit-mask-repeat   : no-repeat;
+		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
+		-webkit-mask-position : 0% 0%;
+		mask-image            : var(--wc), var(--revealer);
+		mask-repeat           : no-repeat;
+		mask-size             : 100% 100%; //Scale both dimensions to fit page size
+		mask-position         : 50% 50%;
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+
+		& > p:has(img) {
+			position   : absolute;
+			width      : 100%;
+			height     : 100%;
+			bottom     : 0;
+			left       : 0;
+			transform  : unset;
+			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
+									 rotate(calc(-1deg * var(--rotation)))
+			             translateX(calc(-1 * var(--offsetX)))
+									 translateY(calc(1 * var(--offsetY)));
+		}
+	}
+
+	.imageMaskCenter {
+		&1  { --wc : url(/assets/waterColorMasks/center/0001.webp); }
+		&2  { --wc : url(/assets/waterColorMasks/center/0002.webp); }
+		&3  { --wc : url(/assets/waterColorMasks/center/0003.webp); }
+		&4  { --wc : url(/assets/waterColorMasks/center/0004.webp); }
+		&5  { --wc : url(/assets/waterColorMasks/center/0005.webp); }
+		&6  { --wc : url(/assets/waterColorMasks/center/0006.webp); }
+		&7  { --wc : url(/assets/waterColorMasks/center/0007.webp); }
+		&8  { --wc : url(/assets/waterColorMasks/center/0008.webp); }
+		&9  { --wc : url(/assets/waterColorMasks/center/0009.webp); }
+		&10 { --wc : url(/assets/waterColorMasks/center/0010.webp); }
+		&11 { --wc : url(/assets/waterColorMasks/center/0011.webp); }
+		&12 { --wc : url(/assets/waterColorMasks/center/0012.webp); }
+		&13 { --wc : url(/assets/waterColorMasks/center/0013.webp); }
+		&14 { --wc : url(/assets/waterColorMasks/center/0014.webp); }
+		&15 { --wc : url(/assets/waterColorMasks/center/0015.webp); }
+		&16 { --wc : url(/assets/waterColorMasks/center/0016.webp); }
+		&special { --wc : url(/assets/waterColorMasks/center/special.webp); }
+	}
+
+
+	[class*="imageMaskCorner"] {
+		height                : 200%;
+		width                 : 200%;
+		left                  : calc(-50% + var(--offsetX));
+		bottom                : calc(-50% + var(--offsetY));
+		-webkit-mask-image    : var(--wc), var(--revealer);
+		-webkit-mask-repeat   : no-repeat;
+		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
+		-webkit-mask-position : 50% 50%;
+		mask-image            : var(--wc), var(--revealer);
+		mask-repeat           : no-repeat;
+		mask-size             : 100% 100%; //Scale both dimensions to fit page size
+		mask-position         : 50% 50%;
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
+		& > p:has(img) {
+			width      : 50%;
+			height     : 50%; //Complex transform below to handle mix of % and cm offsets
+			left       : 25%;
+			bottom     : 25%;
+			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
+									 rotate(calc(-1deg * var(--rotation)))
+			             translateX(calc(-1 * var(--offsetX)))
+									 translateY(calc(1 * var(--offsetY)));
+		}
+	}
+	.imageMaskCorner {
+		&1  { --wc : url(/assets/waterColorMasks/corner/0001.webp); }
+		&2  { --wc : url(/assets/waterColorMasks/corner/0002.webp); }
+		&3  { --wc : url(/assets/waterColorMasks/corner/0003.webp); }
+		&4  { --wc : url(/assets/waterColorMasks/corner/0004.webp); }
+		&5  { --wc : url(/assets/waterColorMasks/corner/0005.webp); }
+		&6  { --wc : url(/assets/waterColorMasks/corner/0006.webp); }
+		&7  { --wc : url(/assets/waterColorMasks/corner/0007.webp); }
+		&8  { --wc : url(/assets/waterColorMasks/corner/0008.webp); }
+		&9  { --wc : url(/assets/waterColorMasks/corner/0009.webp); }
+		&10 { --wc : url(/assets/waterColorMasks/corner/0010.webp); }
+		&11 { --wc : url(/assets/waterColorMasks/corner/0011.webp); }
+		&12 { --wc : url(/assets/waterColorMasks/corner/0012.webp); }
+		&13 { --wc : url(/assets/waterColorMasks/corner/0013.webp); }
+		&14 { --wc : url(/assets/waterColorMasks/corner/0014.webp); }
+		&15 { --wc : url(/assets/waterColorMasks/corner/0015.webp); }
+		&16 { --wc : url(/assets/waterColorMasks/corner/0016.webp); }
+		&17 { --wc : url(/assets/waterColorMasks/corner/0017.webp); }
+		&18 { --wc : url(/assets/waterColorMasks/corner/0018.webp); }
+		&19 { --wc : url(/assets/waterColorMasks/corner/0019.webp); }
+		&20 { --wc : url(/assets/waterColorMasks/corner/0020.webp); }
+		&21 { --wc : url(/assets/waterColorMasks/corner/0021.webp); }
+		&22 { --wc : url(/assets/waterColorMasks/corner/0022.webp); }
+		&23 { --wc : url(/assets/waterColorMasks/corner/0023.webp); }
+		&24 { --wc : url(/assets/waterColorMasks/corner/0024.webp); }
+		&25 { --wc : url(/assets/waterColorMasks/corner/0025.webp); }
+		&26 { --wc : url(/assets/waterColorMasks/corner/0026.webp); }
+		&27 { --wc : url(/assets/waterColorMasks/corner/0027.webp); }
+		&28 { --wc : url(/assets/waterColorMasks/corner/0028.webp); }
+		&29 { --wc : url(/assets/waterColorMasks/corner/0029.webp); }
+		&30 { --wc : url(/assets/waterColorMasks/corner/0030.webp); }
+		&31 { --wc : url(/assets/waterColorMasks/corner/0031.webp); }
+		&32 { --wc : url(/assets/waterColorMasks/corner/0032.webp); }
+		&33 { --wc : url(/assets/waterColorMasks/corner/0033.webp); }
+		&34 { --wc : url(/assets/waterColorMasks/corner/0034.webp); }
+		&35 { --wc : url(/assets/waterColorMasks/corner/0035.webp); }
+		&36 { --wc : url(/assets/waterColorMasks/corner/0036.webp); }
+		&37 { --wc : url(/assets/waterColorMasks/corner/0037.webp); }
+	}
+}
+
+//*****************************
+// *    DEFINITION LISTS
+// *****************************/
+.page {
+	dl {
+		padding-left : 1em;
+		white-space  : pre-line;
+	}
+  dt {
+    display      : inline;
+    margin-right : 0.5ch;
+		margin-left  : -1em;
+  }
+  dd {
+		display     : inline;
+		margin-left : 0;
+		text-indent : 0;
+  }
+}
+
+//*****************************
+// *    BLANK LINE
+// *****************************/
+.page {
+	.blank {
+		height     : 1em;
+		margin-top : 0;
+		& + * {
+			margin-top : 0;
+		}
+	}
+}
+
+//*****************************
+// *         WIDE
+// *****************************/
+.page {
+	.wide{
+		column-span         : all;
+		display             : block;
+		margin-bottom       : 1em;
+		&+* {
+			margin-top : 0;
 		}
 	}
 }
--- a/themes/assets/assets.less
+++ b/themes/assets/assets.less
@@ -15,7 +15,7 @@
@horizontalRule           : url('/assets/horizontalRule.svg');
@partCoverHeaderPHB       : url('/assets/partCoverHeaderPHB.png');
@partCoverHeaderDMG       : url('/assets/partCoverHeaderDMG.svg');
-
+@scriptBorder             : url('/assets/scriptBorder.png');

 // Watercolor Images
@watercolor1  : url('/assets/watercolor/watercolor1.png');
--- a/themes/assets/scriptBorder.png
+++ b/themes/assets/scriptBorder.png
--- a/themes/assets/waterColorMasks/center/0001.webp
+++ b/themes/assets/waterColorMasks/center/0001.webp
--- a/themes/assets/waterColorMasks/center/0002.webp
+++ b/themes/assets/waterColorMasks/center/0002.webp
--- a/themes/assets/waterColorMasks/center/0003.webp
+++ b/themes/assets/waterColorMasks/center/0003.webp
--- a/themes/assets/waterColorMasks/center/0004.webp
+++ b/themes/assets/waterColorMasks/center/0004.webp
--- a/themes/assets/waterColorMasks/center/0005.webp
+++ b/themes/assets/waterColorMasks/center/0005.webp
--- a/themes/assets/waterColorMasks/center/0006.webp
+++ b/themes/assets/waterColorMasks/center/0006.webp
--- a/themes/assets/waterColorMasks/center/0007.webp
+++ b/themes/assets/waterColorMasks/center/0007.webp
--- a/themes/assets/waterColorMasks/center/0008.webp
+++ b/themes/assets/waterColorMasks/center/0008.webp
--- a/themes/assets/waterColorMasks/center/0009.webp
+++ b/themes/assets/waterColorMasks/center/0009.webp
--- a/themes/assets/waterColorMasks/center/0010.webp
+++ b/themes/assets/waterColorMasks/center/0010.webp
--- a/themes/assets/waterColorMasks/center/0011.webp
+++ b/themes/assets/waterColorMasks/center/0011.webp
--- a/themes/assets/waterColorMasks/center/0012.webp
+++ b/themes/assets/waterColorMasks/center/0012.webp
--- a/themes/assets/waterColorMasks/center/0013.webp
+++ b/themes/assets/waterColorMasks/center/0013.webp
--- a/themes/assets/waterColorMasks/center/0014.webp
+++ b/themes/assets/waterColorMasks/center/0014.webp
--- a/themes/assets/waterColorMasks/center/0015.webp
+++ b/themes/assets/waterColorMasks/center/0015.webp
--- a/themes/assets/waterColorMasks/center/0016.webp
+++ b/themes/assets/waterColorMasks/center/0016.webp
--- a/themes/assets/waterColorMasks/center/special.webp
+++ b/themes/assets/waterColorMasks/center/special.webp
--- a/themes/fonts/5e/Alkalami-Regular.woff2
+++ b/themes/fonts/5e/Alkalami-Regular.woff2
--- a/themes/fonts/5e/Davek.woff2
+++ b/themes/fonts/5e/Davek.woff2
--- a/themes/fonts/5e/Iokharic.woff2
+++ b/themes/fonts/5e/Iokharic.woff2
--- a/themes/fonts/5e/Rellanic.woff2
+++ b/themes/fonts/5e/Rellanic.woff2
--- a/themes/fonts/5e/fonts.less
+++ b/themes/fonts/5e/fonts.less
@@ -113,3 +113,23 @@
 	font-weight: 500;
 	font-style: normal;
 }
+
+@font-face {
+	font-family: Davek;
+	src: url('../../../fonts/5e/Davek.woff2');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: Iokharic;
+	src: url('../../../fonts/5e/Iokharic.woff2');
+	font-weight: 500;
+	font-style: normal;
+}
+@font-face {
+	font-family: Rellanic;
+	src: url('../../../fonts/5e/Rellanic.woff2');
+	font-weight: 500;
+	font-style: normal;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 791.04 953.29"><title>Davek</title><g id="Layer_2" data-name="Layer 2"><g id="Davek"><path d="M178.41,13.46a19.33,19.33,0,0,0-4.71,5.38q8.07,6.07,13.46,6.07a8.27,8.27,0,0,0,4.71-1.35,130.23,130.23,0,0,0,16.83-7.07,74.55,74.55,0,0,1,18.85-6.39h2.7q8.07,0,14.81,8.74a944.19,944.19,0,0,0,95.6,4.72q19.5,0,38.37-.67,69.33-2,139.68-5.72t139.7-5.06q16.82-.64,34.34-.66,50.49,0,98.29,3.36-17.5,12.12-22.55,31.64t-5,33.66q.64,22.89.66,45.1,0,47.13-3.36,97-6.07,74.05-9.78,148.11t-5,146.09v17.51a766.1,766.1,0,0,0,8.75,118.48,38.57,38.57,0,0,0-4,17.51,30.94,30.94,0,0,0,.67,6.06q2,12.12,3.36,23.22c.9,7.42,1.57,14.92,2,22.55v3.37a57.93,57.93,0,0,1-3.36,19.52c.43,4.5.67,8.77.67,12.8a260.65,260.65,0,0,1-2.7,37,344.26,344.26,0,0,0-4,52.52,133.5,133.5,0,0,0,8.09,45.44q8.07,22.57,33,36.68-6.06,8.78-20.19,8.77H762.1c-4.5-.45-8.53-.69-12.12-.69a78.11,78.11,0,0,0-21.54,2.7,579.1,579.1,0,0,0-63.64,3.71q-33.31,3.71-67.65,6.39t-68.66,3.37h-4a188.05,188.05,0,0,1-59.92-9.43q20.19-4,39.06-23.22t20.19-47.46q11.44-22.21,11.45-49.82a320.44,320.44,0,0,1,3.36-49.15q-9.45-4.69-10.09-8.75v-2.7a73,73,0,0,1,.66-8.74,105.81,105.81,0,0,0,3.37-12.8,7.49,7.49,0,0,0,.68-3.37q0-4.7-4.05-10.09c.45-4.93.69-10.1.69-15.48a311.71,311.71,0,0,0-3.37-46.45,207.31,207.31,0,0,1-1.35-24.25,274.58,274.58,0,0,1,4-45.1l15.5,6.73q-3.37-17.49-3.37-41.07,0-24.89,8.75-44.44a27.73,27.73,0,0,0,2-9.43,15.32,15.32,0,0,0-3.36-10.09,60.75,60.75,0,0,1-10.1-15.48l-7.39,6.73q2.67-47.79,8.74-99,3.35-33.63,3.37-65.29,0-14.81-.69-29a205.09,205.09,0,0,1-4-41.74,190.26,190.26,0,0,1,2-26.92q4-37,14.81-67.33a25.14,25.14,0,0,1-2.68-11.43,31.13,31.13,0,0,1,.66-6.07V140q0-6.72-8.74-10.09-3.37-16.83-5.73-31.3T521.07,77.41q-55.2,2.7-115.78,4.71-19.55.7-39.72.69-38.38,0-74.06-2.7c-5.4,4.5-8.08,9.21-8.08,14.14v1.34a41.5,41.5,0,0,0,4.37,15.49q3.7,7.4,7.4,15.16a35,35,0,0,1,3.71,15.13q32.31,34.35,64,68.68a335.89,335.89,0,0,1,51.83,73.38q13.46,7.4,18.51,17.49t10.11,19.87q5.06,9.78,10.1,18.85t16.5,11.78v12.12a194.5,194.5,0,0,1-37.38-4q-20.52-4-40.73-6.73a114.48,114.48,0,0,0-17.49-1.35,97.2,97.2,0,0,0-20.2,2q-17.52,4.05-31,20.19-16.84-1.35-27.27-9.75a76.13,76.13,0,0,1-17.51-20.2q-7.06-11.76-14.47-24.9a79.77,79.77,0,0,0-18.84-22.57A305.87,305.87,0,0,1,177.73,237q-28.29-33.67-54.54-69T68,99.31A381.16,381.16,0,0,0,0,38.37q12.79,0,22.89-9.75A190.69,190.69,0,0,1,44.76,10.44Q56.54,2,68.66,0H72Q82.8,0,97,10.76Z"/></g></g></svg>