Merge branch 'master' into separateApiErrors-#2975

2025-12-26 05:12:39 +00:00 · 2024-01-17 14:11:13 -05:00
parent fb91761c31 5ab89b2583
commit eef3d7738e
20 changed files with 1387 additions and 1031 deletions
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -1,9 +1,8 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const createClass = require('create-react-class');
+const { useState, useRef, useEffect } = React;
 const _ = require('lodash');
-const cx = require('classnames');

 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
@@ -13,244 +12,221 @@ const ErrorBar = require('./errorBar/errorBar.jsx');
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
+const dedent = require('dedent-tabs').default;

 const Themes = require('themes/themes.json');

 const PAGE_HEIGHT = 1056;
-const PPR_THRESHOLD = 50;

-const BrewRenderer = createClass({
-	displayName     : 'BrewRenderer',
-	getDefaultProps : function() {
-		return {
-			text     : '',
-			style    : '',
-			renderer : 'legacy',
-			theme    : '5ePHB',
-			lang     : '',
-			errors   : []
-		};
-	},
-	getInitialState : function() {
-		let pages;
-		if(this.props.renderer == 'legacy') {
-			pages = this.props.text.split('\\page');
-		} else {
-			pages = this.props.text.split(/^\\page$/gm);
-		}
+const INITIAL_CONTENT = dedent`
+	<!DOCTYPE html><html><head>
+	<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+	<link href='/homebrew/bundle.css' rel='stylesheet' />
+	<base target=_blank>
+	</head><body style='overflow: hidden'><div></div></body></html>`;

-		return {
-			viewablePageNumber : 0,
-			height             : 0,
-			isMounted          : false,
+//v=====----------------------< Brew Page Component >---------------------=====v//
+const BrewPage = (props)=>{
+	props = {
+		contents : '',
+		index    : 0,
+		...props
+	};
+	return <div className={props.className} id={`p${props.index + 1}`} >
+	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: props.contents }} />
+	       </div>;
+};

-			pages          : pages,
-			usePPR         : pages.length >= PPR_THRESHOLD,
-			visibility     : 'hidden',
-			initialContent : `<!DOCTYPE html><html><head>
-												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
-												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-												<link href='/homebrew/bundle.css' rel='stylesheet' />
-												<base target=_blank>
-												</head><body style='overflow: hidden'><div></div></body></html>`
-		};
-	},
-	height     : 0,
-	lastRender : <div></div>,

-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.updateSize);
-	},
+//v=====--------------------< Brew Renderer Component >-------------------=====v//
+const renderedPages = [];
+let rawPages      = [];

-	componentDidUpdate : function(prevProps) {
-		if(prevProps.text !== this.props.text) {
-			let pages;
-			if(this.props.renderer == 'legacy') {
-				pages = this.props.text.split('\\page');
-			} else {
-				pages = this.props.text.split(/^\\page$/gm);
-			}
-			this.setState({
-				pages  : pages,
-				usePPR : pages.length >= PPR_THRESHOLD
-			});
-		}
-	},
+const BrewRenderer = (props)=>{
+	props = {
+		text              : '',
+		style             : '',
+		renderer          : 'legacy',
+		theme             : '5ePHB',
+		lang              : '',
+		errors            : [],
+		currentEditorPage : 0,
+		...props
+	};

-	updateSize : function() {
-		this.setState({
-			height : this.refs.main.parentNode.clientHeight,
-		});
-	},
+	const [state, setState] = useState({
+		viewablePageNumber : 0,
+		height             : PAGE_HEIGHT,
+		isMounted          : false,
+		visibility         : 'hidden',
+	});

-	handleScroll : function(e){
-		const target = e.target;
-		this.setState((prevState)=>({
-			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+	const mainRef  = useRef(null);
+
+	if(props.renderer == 'legacy') {
+		rawPages = props.text.split('\\page');
+	} else {
+		rawPages = props.text.split(/^\\page$/gm);
+	}
+
+	useEffect(()=>{ // Unmounting steps
+		return ()=>{window.removeEventListener('resize', updateSize);};
+	}, []);
+
+	const updateSize = ()=>{
+		setState((prevState)=>({
+			...prevState,
+			height : mainRef.current.parentNode.clientHeight,
 		}));
-	},
+	};

-	shouldRender : function(pageText, index){
-		if(!this.state.isMounted) return false;
+	const handleScroll = (e)=>{
+		const target = e.target;
+		setState((prevState)=>({
+			...prevState,
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length)
+		}));
+	};

-		const viewIndex = this.state.viewablePageNumber;
-		if(index == viewIndex - 3) return true;
-		if(index == viewIndex - 2) return true;
-		if(index == viewIndex - 1) return true;
-		if(index == viewIndex)     return true;
-		if(index == viewIndex + 1) return true;
-		if(index == viewIndex + 2) return true;
-		if(index == viewIndex + 3) return true;
+	const shouldRender = (index)=>{
+		if(!state.isMounted) return false;

-		//Check for style tages
-		if(pageText.indexOf('<style>') !== -1) return true;
+		if(Math.abs(index - state.viewablePageNumber) <= 3)
+			return true;
+
+		if(index + 1 == props.currentEditorPage)
+			return true;

 		return false;
-	},
+	};

-	sanitizeScriptTags : function(content) {
+	const sanitizeScriptTags = (content)=>{
 		return content
 			.replace(/<script/ig, '&lt;script')
 			.replace(/<\/script>/ig, '&lt;/script&gt;');
-	},
+	};

-	renderPageInfo : function(){
-		return <div className='pageInfo' ref='main'>
+	const renderPageInfo = ()=>{
+		return <div className='pageInfo' ref={mainRef}>
 			<div>
-				{this.props.renderer}
+				{props.renderer}
 			</div>
 			<div>
-				{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+				{state.viewablePageNumber + 1} / {rawPages.length}
 			</div>
 		</div>;
-	},
+	};

-	renderPPRmsg : function(){
-		if(!this.state.usePPR) return;
-
-		return <div className='ppr_msg'>
-			Partial Page Renderer is enabled, because your brew is so large. May affect rendering.
-		</div>;
-	},
-
-	renderDummyPage : function(index){
+	const renderDummyPage = (index)=>{
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
-	},
+	};

-	renderStyle : function() {
-		if(!this.props.style) return;
-		const cleanStyle = this.sanitizeScriptTags(this.props.style);
-		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
+	const renderStyle = ()=>{
+		if(!props.style) return;
+		const cleanStyle = sanitizeScriptTags(props.style);
+		//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} </style>` }} />;
 		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
-	},
+	};

-	renderPage : function(pageText, index){
-		let cleanPageText = this.sanitizeScriptTags(pageText);
-		if(this.props.renderer == 'legacy')
-			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
-		else {
+	const renderPage = (pageText, index)=>{
+		let cleanPageText = sanitizeScriptTags(pageText);
+		if(props.renderer == 'legacy') {
+			const html = MarkdownLegacy.render(cleanPageText);
+			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
+		} else {
 			cleanPageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-			return (
-				<div className='page' id={`p${index + 1}`} key={index} >
-					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
-				</div>
-			);
+			const html = Markdown.render(cleanPageText);
+			return <BrewPage className='page' index={index} key={index} contents={html} />;
 		}
-	},
+	};

-	renderPages : function(){
-		if(this.state.usePPR){
-			return _.map(this.state.pages, (page, index)=>{
-				if(this.shouldRender(page, index) && typeof window !== 'undefined'){
-					return this.renderPage(page, index);
-				} else {
-					return this.renderDummyPage(index);
-				}
-			});
-		}
-		if(this.props.errors && this.props.errors.length) return this.lastRender;
-		this.lastRender = _.map(this.state.pages, (page, index)=>{
-			if(typeof window !== 'undefined') {
-				return this.renderPage(page, index);
-			} else {
-				return this.renderDummyPage(index);
+	const renderPages = ()=>{
+		if(props.errors && props.errors.length)
+			return renderedPages;
+
+		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
+			renderedPages.length = 0;
+
+		_.forEach(rawPages, (page, index)=>{
+			if((shouldRender(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
 			}
 		});
-		return this.lastRender;
-	},
+		return renderedPages;
+	};

-	frameDidMount : function(){	//This triggers when iFrame finishes internal "componentDidMount"
+	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			this.updateSize();
-			window.addEventListener('resize', this.updateSize);
-			this.renderPages(); //Make sure page is renderable before showing
-			this.setState({
+			updateSize();
+			window.addEventListener('resize', updateSize);
+			renderPages(); //Make sure page is renderable before showing
+			setState((prevState)=>({
+				...prevState,
 				isMounted  : true,
 				visibility : 'visible'
-			});
+			}));
 		}, 100);
-	},
+	};

-	emitClick : function(){
-		// console.log('iFrame clicked');
+	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
 		if(!window || !document) return;
 		document.dispatchEvent(new MouseEvent('click'));
-	},
+	};

-	render : function(){
-		//render in iFrame so broken code doesn't crash the site.
-		//Also render dummy page while iframe is mounting.
-		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
-					? <div className='brewRenderer' onScroll={this.handleScroll}>
-						<div className='pages' ref='pages'>
-							{this.renderDummyPage(1)}
-						</div>
+	const rendererPath  = props.renderer == 'V3' ? 'V3' : 'Legacy';
+	const themePath     = props.theme ?? '5ePHB';
+	const baseThemePath = Themes[rendererPath][themePath].baseTheme;
+
+	return (
+		<>
+			{/*render dummy page while iFrame is mounting.*/}
+			{!state.isMounted
+				? <div className='brewRenderer' onScroll={handleScroll}>
+					<div className='pages'>
+						{renderDummyPage(1)}
 					</div>
-	        : null}
+				</div>
+				: null}

-				<Frame id='BrewRenderer' initialContent={this.state.initialContent}
-					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
-					contentDidMount={this.frameDidMount}
-					onClick={()=>{this.emitClick();}}
-				>
-					<div className={'brewRenderer'}
-						onScroll={this.handleScroll}
-						style={{ height: this.state.height }}>
+			{/*render in iFrame so broken code doesn't crash the site.*/}
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+				style={{ width: '100%', height: '100%', visibility: state.visibility }}
+				contentDidMount={frameDidMount}
+				onClick={()=>{emitClick();}}
+			>
+				<div className={'brewRenderer'}
+					onScroll={handleScroll}
+					style={{ height: state.height }}>

-						<ErrorBar errors={this.props.errors} />
-						<div className='popups'>
-							<RenderWarnings />
-							<NotificationPopup />
-						</div>
-						<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
-						{baseThemePath &&
-							<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
-						}
-						<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
-						{/* Apply CSS from Style tab and render pages from Markdown tab */}
-						{this.state.isMounted
-							&&
-							<>
-								{this.renderStyle()}
-								<div className='pages' ref='pages' lang={`${this.props.lang || 'en'}`}>
-									{this.renderPages()}
-								</div>
-							</>
-						}
+					<ErrorBar errors={props.errors} />
+					<div className='popups'>
+						<RenderWarnings />
+						<NotificationPopup />
 					</div>
-				</Frame>
-				{this.renderPageInfo()}
-				{this.renderPPRmsg()}
-			</React.Fragment>
-		);
-	}
-});
+					<link href={`/themes/${rendererPath}/Blank/style.css`} rel='stylesheet'/>
+					{baseThemePath &&
+						<link href={`/themes/${rendererPath}/${baseThemePath}/style.css`} rel='stylesheet'/>
+					}
+					<link href={`/themes/${rendererPath}/${themePath}/style.css`} rel='stylesheet'/>
+
+					{/* Apply CSS from Style tab and render pages from Markdown tab */}
+					{state.isMounted
+						&&
+						<>
+							{renderStyle()}
+							<div className='pages' lang={`${props.lang || 'en'}`}>
+								{renderPages()}
+							</div>
+						</>
+					}
+				</div>
+			</Frame>
+			{renderPageInfo()}
+		</>
+	);
+};

 module.exports = BrewRenderer;
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -1,46 +1,44 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';

-.brewRenderer{
+.brewRenderer {
 	will-change : transform;
 	overflow-y  : scroll;
-	.pages{
+	:where(.pages) {
 		margin : 30px 0px;
-		&>.page{
+		& > :where(.page) {
+			width         : 215.9mm;
+			height        : 279.4mm;
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
+			box-shadow    : 1px 4px 14px #000000;
 		}
 	}
 }
-.pane{
-	position : relative;
-}
-.pageInfo{
+.pane { position : relative; }
+.pageInfo {
 	position         : absolute;
 	right            : 17px;
 	bottom           : 0;
 	z-index          : 1000;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 	div {
-		display: inline-block;
+		display          : inline-block;
 		padding          : 8px 10px;
-		&:not(:last-child){
-			border-right: 1px solid #666;
-		}
+		&:not(:last-child) { border-right : 1px solid #666666; }
 	}
 }
-.ppr_msg{
+.ppr_msg {
 	position         : absolute;
-	left             : 0px;
 	bottom           : 0;
+	left             : 0px;
 	z-index          : 1000;
 	padding          : 8px 10px;
-	background-color : #333;
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
+	background-color : #333333;
 }
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -160,9 +160,27 @@ const Editor = createClass({
 							}
 						}

+						// Superscript
+						if(line.includes('\^')) {
+							const regex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/g;
+							let match;
+							while ((match = regex.exec(line)) != null) {
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 1 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 1 }, { className: 'superscript' });
+							}
+						}
+
+						// Subscript
+						if(line.includes('^^')) {
+							const regex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/g;
+							let match;
+							while ((match = regex.exec(line)) != null) {
+								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) - 2 }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length + 2 }, { className: 'subscript' });
+							}
+						}
+
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
-							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
+							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
 								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
@@ -170,7 +188,7 @@ const Editor = createClass({
 						}
 						// Highlight inline spans {{content}}
 						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
+							const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
 							let match;
 							let blockCount = 0;
 							while ((match = regex.exec(line)) != null) {
@@ -189,7 +207,7 @@ const Editor = createClass({
 							// Highlight block divs {{\n Content \n}}
 							let endCh = line.length+1;

-							const match = line.match(/^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/);
+							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
 							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -43,6 +43,18 @@
 			font-weight : bold;
 			color       : green;
 		}
+		.superscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : goldenrod;
+			vertical-align : super;
+			font-size      : 0.9em;
+		}
+		.subscript:not(.cm-comment) {
+			font-weight    : bold;
+			color          : rgb(123, 123, 15);
+			vertical-align : sub;
+			font-size      : 0.9em;
+		}
 	}

 	.brewJump {
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -74,6 +74,7 @@ const Snippetbar = createClass({
 		}
 	},

+
 	mergeCustomizer : function(valueA, valueB, key) {
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
@@ -102,10 +103,12 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},

-	toggleThemeSelector : function(){
-		this.setState({
-			themeSelector : !this.state.themeSelector
-		});
+	toggleThemeSelector : function(e){
+		if(e.target.tagName != 'SELECT'){
+			this.setState({
+				themeSelector : !this.state.themeSelector
+			});
+		}
 	},

 	changeTheme : function(e){
@@ -119,7 +122,7 @@ const Snippetbar = createClass({

 	renderThemeSelector : function(){
 		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}>
+			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
 				{EditorThemes.map((theme, key)=>{
 					return <option key={key} value={theme}>{theme}</option>;
 				})}
@@ -176,8 +179,9 @@ const Snippetbar = createClass({
 			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 				onClick={this.toggleThemeSelector} >
 				<i className='fas fa-palette' />
+				{this.state.themeSelector && this.renderThemeSelector()}
 			</div>
-			{this.state.themeSelector && this.renderThemeSelector()}
+			
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
@@ -228,7 +232,7 @@ const SnippetGroup = createClass({
 		return _.map(snippets, (snippet)=>{
 			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'>{snippet.name}</span>
+				<span className='name'title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -1,177 +1,190 @@
@import (less) './client/icons/customIcons.less';
-.snippetBar{
+@import (less) '././././themes/fonts/5e/fonts.less';
+
+.snippetBar {
 	@menuHeight      : 25px;
 	position         : relative;
 	height           : @menuHeight;
-	background-color : #ddd;
-	.editors{
+	color            : black;
+	background-color : #DDDDDD;
+
+	.editors {
 		position        : absolute;
-		display         : flex;
 		top             : 0px;
 		right           : 0px;
-		height          : @menuHeight;
+		display         : flex;
 		justify-content : space-between;
-		&>div{
-			height      : @menuHeight;
+		height          : @menuHeight;
+		& > div {
 			width       : @menuHeight;
-			cursor      : pointer;
+			height      : @menuHeight;
 			line-height : @menuHeight;
 			text-align  : center;
-			&:hover,&.selected{
-				background-color : #999;
-			}
-			&.text{
+			cursor      : pointer;
+			&:hover,&.selected { background-color : #999999; }
+			&.text {
 				.tooltipLeft('Brew Editor');
 			}
-			&.style{
+			&.style {
 				.tooltipLeft('Style Editor');
 			}
-			&.meta{
+			&.meta {
 				.tooltipLeft('Properties');
 			}
-			&.undo{
+			&.undo {
 				.tooltipLeft('Undo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active{
-					color : black;
-				}
+				&.active { color : inherit; }
 			}
-			&.redo{
+			&.redo {
 				.tooltipLeft('Redo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active{
-					color : black;
-				}
+				&.active { color : inherit; }
 			}
-			&.foldAll{
+			&.foldAll {
 				.tooltipLeft('Fold All');
 				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
+				color     : inherit;
 			}
-			&.unfoldAll{
+			&.unfoldAll {
 				.tooltipLeft('Unfold All');
 				font-size : 0.75em;
-				color     : grey;
-				&.active{
-					color : black;
-				}
+				color     : inherit;
 			}
-			&.editorTheme{
+			&.editorTheme {
 				.tooltipLeft('Editor Themes');
 				font-size : 0.75em;
 				color     : black;
-				&.active{
-					color : white;
-					background-color: black;
+				&.active {
+					position         : relative;
+					background-color : #999999;
 				}
 			}
 			&.divider {
-				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
-				width: 5px;
-				&:hover{
-					background-color: inherit;
-				}
+				width      : 5px;
+				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+				&:hover { background-color : inherit; }
 			}
 		}
-		.themeSelector{
-			position: absolute;
-			left: -65px;
-			top: 30px;
-			z-index: 999;
-			width: 170px;
-			background-color: black;
-    		border-radius: 5px;
+		.themeSelector {
+			position         : absolute;
+			top              : 25px;
+			right            : 0;
+			z-index          : 1;
+			display          : flex;
+			align-items      : center;
+			justify-content  : center;
+			width            : 170px;
+			height           : inherit;
+			background-color : inherit;
 		}
 	}
-	.snippetBarButton{
-		height         : @menuHeight;
-		line-height    : @menuHeight;
+	.snippetBarButton {
 		display        : inline-block;
+		height         : @menuHeight;
 		padding        : 0px 5px;
-		font-weight    : 800;
 		font-size      : 0.625em;
+		font-weight    : 800;
+		line-height    : @menuHeight;
 		text-transform : uppercase;
 		cursor         : pointer;
-		&:hover, &.selected{
-			background-color : #999;
-		}
-		i{
-			vertical-align : middle;
+		&:hover, &.selected { background-color : #999999; }
+		i {
 			margin-right   : 3px;
 			font-size      : 1.4em;
+			vertical-align : middle;
 		}
 	}
-	.toggleMeta{
-		position     : absolute;
-		top          : 0px;
-		right        : 0px;
-		border-left  : 1px solid black;
-		.tooltipLeft("Edit Brew Properties");
+	.toggleMeta {
+		position    : absolute;
+		top         : 0px;
+		right       : 0px;
+		border-left : 1px solid black;
+		.tooltipLeft('Edit Brew Properties');
 	}
-	.snippetGroup{
-		border-right   : 1px solid black;
-		&:hover{
-			&>.dropdown{
-				visibility : visible;
-			}
+	.snippetGroup {
+		border-right   : 1px solid currentColor;
+		&:hover {
+			& > .dropdown { visibility : visible; }
 		}
-		.dropdown{
+		.dropdown {
 			position         : absolute;
 			top              : 100%;
-			visibility       : hidden;
 			z-index          : 1000;
-			margin-left      : -5px;
 			padding          : 0px;
-			background-color : #ddd;
-			.snippet{
-				position: relative;
-				.animate(background-color);
+			margin-left      : -5px;
+			visibility       : hidden;
+			background-color : #DDDDDD;
+			.snippet {
+				position    : relative;
 				display     : flex;
 				align-items : center;
 				min-width   : max-content;
 				padding     : 5px;
-				cursor      : pointer;
 				font-size   : 10px;
-				i{
+				cursor      : pointer;
+				.animate(background-color);
+				i {
+					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
-					height       : 1.2em;
-					&~i{
-						margin-right: 0;
-						margin-left: 5px;
+					& ~ i {
+						margin-right : 0;
+						margin-left  : 5px;
+					}
+					/* Fonts */
+					&.font {
+						height : auto;
+						&::before {
+							font-size : 1.4em;
+							content   : 'ABC';
+						}
+
+						&.OpenSans {font-family : 'OpenSans';}
+						&.CodeBold {font-family : 'CodeBold';}
+						&.CodeLight {font-family : 'CodeLight';}
+						&.ScalySansRemake {font-family : 'ScalySansRemake';}
+						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
+						&.MrEavesRemake {font-family : 'MrEavesRemake';}
+						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
+						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
+						&.WalterTurncoat {font-family : 'WalterTurncoat';}
+						&.Lato {font-family : 'Lato';}
+						&.Courier {font-family : 'Courier';}
+						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
+						&.Overpass {font-family : 'Overpass';}
+						&.Davek {font-family : 'Davek';}
+						&.Iokharic {font-family : 'Iokharic';}
+						&.Rellanic {font-family : 'Rellanic';}
+						&.TimesNewRoman {font-family : 'Times New Roman';}
 					}
 				}
-				.name {
-					margin-right  : auto;
-				}
+				.name { margin-right : auto; }
 				.beta {
-					color         : white;
-					padding       : 4px 6px;
-					line-height   : 1em;
-					margin-left   : 5px;
 					align-self    : center;
+					padding       : 4px 6px;
+					margin-left   : 5px;
+					font-family   : monospace;
+					line-height   : 1em;
+					color         : white;
 					background    : grey;
 					border-radius : 12px;
-					font-family   : monospace;
 				}
-				&:hover{
-					background-color : #999;
-					&>.dropdown{
+				&:hover {
+					background-color : #999999;
+					& > .dropdown {
 						visibility : visible;
 						&.side {
-							left: 100%;
-							top: 0%;
-							margin-left:0;
-							box-shadow: -1px 1px 2px 0px #999;
+							top         : 0%;
+							left        : 100%;
+							margin-left : 0;
+							box-shadow  : -1px 1px 2px 0px #999999;
 						}
 					}
 				}
 			}
 		}
 	}
-}
+}
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -220,6 +220,7 @@ const ListPage = createClass({
 	render : function(){
 		return <div className='listPage sitePage'>
 			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet'/>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
 			{this.renderSortOptions()}
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -2,17 +2,18 @@
 .noColumns(){
 	column-count         : auto;
 	column-fill          : auto;
-	column-gap           : auto;
+	column-gap           : normal;
 	column-width         : auto;
 	-webkit-column-count : auto;
 	-moz-column-count    : auto;
 	-webkit-column-width : auto;
 	-moz-column-width    : auto;
-	-webkit-column-gap   : auto;
-	-moz-column-gap      : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
+	contain				 : unset;
 }
 .listPage{
 	.content{
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -50,7 +50,8 @@ const EditPage = createClass({
 			url                    : '',
 			autoSave               : true,
 			autoSaveWarning        : false,
-			unsavedTime            : new Date()
+			unsavedTime            : new Date(),
+			currentEditorPage      : 0
 		};
 	},
 	savedBrew : null,
@@ -109,9 +110,10 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);

 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			isPending  : true,
-			htmlErrors : htmlErrors
+			brew              : { ...prevState.brew, text: text },
+			isPending         : true,
+			htmlErrors        : htmlErrors,
+			currentEditorPage : this.refs.editor.getCurrentPage()
 		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},

@@ -405,6 +407,7 @@ const EditPage = createClass({
 						theme={this.state.brew.theme}
 						errors={this.state.htmlErrors}
 						lang={this.state.brew.lang}
+						currentEditorPage={this.state.currentEditorPage}
 					/>
 				</SplitPane>
 			</div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,11 @@
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
-        "@babel/core": "^7.23.3",
-        "@babel/plugin-transform-runtime": "^7.23.3",
-        "@babel/preset-env": "^7.23.3",
+        "@babel/core": "^7.23.7",
+        "@babel/plugin-transform-runtime": "^7.23.7",
+        "@babel/preset-env": "^7.23.8",
        "@babel/preset-react": "^7.23.3",
-        "@googleapis/drive": "^8.4.0",
+        "@googleapis/drive": "^8.6.0",
        "body-parser": "^1.20.2",
        "classnames": "^2.3.2",
        "codemirror": "^5.65.6",
@@ -24,40 +24,40 @@
        "express": "^4.18.2",
        "express-async-handler": "^1.2.0",
        "express-static-gzip": "2.1.7",
-        "fs-extra": "11.1.1",
+        "fs-extra": "11.2.0",
        "js-yaml": "^4.1.0",
        "jwt-simple": "^0.5.6",
        "less": "^3.13.1",
        "lodash": "^4.17.21",
        "marked": "5.1.1",
-        "marked-extended-tables": "^1.0.7",
-        "marked-gfm-heading-id": "^3.1.0",
-        "marked-smartypants-lite": "^1.0.1",
+        "marked-extended-tables": "^1.0.8",
+        "marked-gfm-heading-id": "^3.1.2",
+        "marked-smartypants-lite": "^1.0.2",
        "markedLegacy": "npm:marked@^0.3.19",
-        "moment": "^2.29.4",
-        "mongoose": "^8.0.0",
+        "moment": "^2.30.1",
+        "mongoose": "^8.0.4",
        "nanoid": "3.3.4",
        "nconf": "^0.12.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-frame-component": "^4.1.3",
-        "react-router-dom": "6.18.0",
+        "react-router-dom": "6.21.2",
        "sanitize-filename": "1.6.3",
        "superagent": "^8.1.2",
        "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
      },
      "devDependencies": {
-        "eslint": "^8.53.0",
-        "eslint-plugin-jest": "^27.6.0",
+        "eslint": "^8.56.0",
+        "eslint-plugin-jest": "^27.6.2",
        "eslint-plugin-react": "^7.33.2",
        "jest": "^29.7.0",
        "jest-expect-message": "^1.1.3",
        "postcss-less": "^6.0.0",
        "stylelint": "^15.11.0",
-        "stylelint-config-recess-order": "^4.3.0",
+        "stylelint-config-recess-order": "^4.4.0",
        "stylelint-config-recommended": "^13.0.0",
        "stylelint-stylistic": "^0.4.3",
-        "supertest": "^6.3.3"
+        "supertest": "^6.3.4"
      },
      "engines": {
        "node": "^20.8.x",
@@ -86,11 +86,11 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
      "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
        "chalk": "^2.4.2"
      },
      "engines": {
@@ -98,28 +98,28 @@
      }
    },
    "node_modules/@babel/compat-data": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz",
-      "integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.3.tgz",
-      "integrity": "sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz",
+      "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==",
      "dependencies": {
        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.3",
-        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-compilation-targets": "^7.23.6",
        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.2",
-        "@babel/parser": "^7.23.3",
+        "@babel/helpers": "^7.23.7",
+        "@babel/parser": "^7.23.6",
        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.3",
-        "@babel/types": "^7.23.3",
+        "@babel/traverse": "^7.23.7",
+        "@babel/types": "^7.23.6",
        "convert-source-map": "^2.0.0",
        "debug": "^4.1.0",
        "gensync": "^1.0.0-beta.2",
@@ -140,11 +140,11 @@
      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
    },
    "node_modules/@babel/generator": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.3.tgz",
-      "integrity": "sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
      "dependencies": {
-        "@babel/types": "^7.23.3",
+        "@babel/types": "^7.23.6",
        "@jridgewell/gen-mapping": "^0.3.2",
        "@jridgewell/trace-mapping": "^0.3.17",
        "jsesc": "^2.5.1"
@@ -189,13 +189,13 @@
      }
    },
    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
-      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
      "dependencies": {
-        "@babel/compat-data": "^7.22.9",
-        "@babel/helper-validator-option": "^7.22.15",
-        "browserslist": "^4.21.9",
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
        "lru-cache": "^5.1.1",
        "semver": "^6.3.1"
      },
@@ -242,9 +242,9 @@
      }
    },
    "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz",
-      "integrity": "sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==",
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz",
+      "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==",
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.22.6",
        "@babel/helper-plugin-utils": "^7.22.5",
@@ -412,9 +412,9 @@
      }
    },
    "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
      "engines": {
        "node": ">=6.9.0"
      }
@@ -428,9 +428,9 @@
      }
    },
    "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
      "engines": {
        "node": ">=6.9.0"
      }
@@ -449,24 +449,24 @@
      }
    },
    "node_modules/@babel/helpers": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
-      "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz",
+      "integrity": "sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==",
      "dependencies": {
        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.2",
-        "@babel/types": "^7.23.0"
+        "@babel/traverse": "^7.23.7",
+        "@babel/types": "^7.23.6"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/highlight": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.13.tgz",
-      "integrity": "sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
        "chalk": "^2.4.2",
        "js-tokens": "^4.0.0"
      },
@@ -475,9 +475,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz",
-      "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -516,9 +516,9 @@
      }
    },
    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz",
-      "integrity": "sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz",
+      "integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==",
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-plugin-utils": "^7.22.5"
@@ -814,9 +814,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.3.tgz",
-      "integrity": "sha512-59GsVNavGxAXCDDbakWSMJhajASb4kBCqDjqJsv+p5nKdbz7istmZ3HrX3L2LuiI80+zsOADCvooqQH3qGCucQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz",
+      "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==",
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-plugin-utils": "^7.22.5",
@@ -861,9 +861,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.3.tgz",
-      "integrity": "sha512-QPZxHrThbQia7UdvfpaRRlq/J9ciz1J4go0k+lPBXbgaNeY7IQrBj/9ceWjvMMI07/ZBzHl/F0R/2K0qH7jCVw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz",
+      "integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5"
      },
@@ -890,9 +890,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.3.tgz",
-      "integrity": "sha512-PENDVxdr7ZxKPyi5Ffc0LjXdnJyrJxyqF5T5YjlVg4a0VFfQHW0r8iAtRiDXkfHlu1wwcvdtnndGYIeJLSuRMQ==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz",
+      "integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==",
      "dependencies": {
        "@babel/helper-create-class-features-plugin": "^7.22.15",
        "@babel/helper-plugin-utils": "^7.22.5",
@@ -906,15 +906,14 @@
      }
    },
    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.3.tgz",
-      "integrity": "sha512-FGEQmugvAEu2QtgtU0uTASXevfLMFfBeVCIIdcQhn/uBQsMTjBajdnAtanQlOcuihWh10PZ7+HWvc7NtBwP74w==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz",
+      "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-compilation-targets": "^7.23.6",
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-optimise-call-expression": "^7.22.5",
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/helper-replace-supers": "^7.22.20",
        "@babel/helper-split-export-declaration": "^7.22.6",
@@ -986,9 +985,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.3.tgz",
-      "integrity": "sha512-vTG+cTGxPFou12Rj7ll+eD5yWeNl5/8xvQvF08y5Gv3v4mZQoyFf8/n9zg4q5vvCWt5jmgymfzMAldO7orBn7A==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz",
+      "integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
@@ -1016,9 +1015,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.3.tgz",
-      "integrity": "sha512-yCLhW34wpJWRdTxxWtFZASJisihrfyMOTOQexhVzA78jlU+dH7Dw+zQgcPepQ5F3C6bAIiblZZ+qBggJdHiBAg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz",
+      "integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
@@ -1031,11 +1030,12 @@
      }
    },
    "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.3.tgz",
-      "integrity": "sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz",
+      "integrity": "sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==",
      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -1061,9 +1061,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.3.tgz",
-      "integrity": "sha512-H9Ej2OiISIZowZHaBwF0tsJOih1PftXJtE8EWqlEIwpc7LMTGq0rPOrywKLQ4nefzx8/HMR0D3JGXoMHYvhi0A==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz",
+      "integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-json-strings": "^7.8.3"
@@ -1090,9 +1090,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.3.tgz",
-      "integrity": "sha512-+pD5ZbxofyOygEp+zZAfujY2ShNCXRpDRIPOiBmTO693hhyOEteZgl876Xs9SAHPQpcV0vz8LvA/T+w8AzyX8A==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz",
+      "integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
@@ -1211,9 +1211,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.3.tgz",
-      "integrity": "sha512-xzg24Lnld4DYIdysyf07zJ1P+iIfJpxtVFOzX4g+bsJ3Ng5Le7rXx9KwqKzuyaUeRnt+I1EICwQITqc0E2PmpA==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz",
+      "integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
@@ -1226,9 +1226,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.3.tgz",
-      "integrity": "sha512-s9GO7fIBi/BLsZ0v3Rftr6Oe4t0ctJ8h4CCXfPoEJwmvAPMyNrfkOOJzm6b9PX9YXcCJWWQd/sBF/N26eBiMVw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz",
+      "integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
@@ -1241,9 +1241,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.3.tgz",
-      "integrity": "sha512-VxHt0ANkDmu8TANdE9Kc0rndo/ccsmfe2Cx2y5sI4hu3AukHQ5wAu4cM7j3ba8B9548ijVyclBU+nuDQftZsog==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz",
+      "integrity": "sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==",
      "dependencies": {
        "@babel/compat-data": "^7.23.3",
        "@babel/helper-compilation-targets": "^7.22.15",
@@ -1274,9 +1274,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.3.tgz",
-      "integrity": "sha512-LxYSb0iLjUamfm7f1D7GpiS4j0UAC8AOiehnsGAP8BEsIX8EOi3qV6bbctw8M7ZvLtcoZfZX5Z7rN9PlWk0m5A==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz",
+      "integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
@@ -1289,9 +1289,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.3.tgz",
-      "integrity": "sha512-zvL8vIfIUgMccIAK1lxjvNv572JHFJIKb4MWBz5OGdBQA0fB0Xluix5rmOby48exiJc987neOmP/m9Fnpkz3Tg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz",
+      "integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.22.5",
        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
@@ -1334,9 +1334,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.3.tgz",
-      "integrity": "sha512-a5m2oLNFyje2e/rGKjVfAELTVI5mbA0FeZpBnkOWWV7eSmKQ+T/XW0Vf+29ScLzSxX+rnsarvU0oie/4m6hkxA==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz",
+      "integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==",
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.22.5",
        "@babel/helper-create-class-features-plugin": "^7.22.15",
@@ -1455,15 +1455,15 @@
      }
    },
    "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.3.tgz",
-      "integrity": "sha512-XcQ3X58CKBdBnnZpPaQjgVMePsXtSZzHoku70q9tUAQp02ggPQNM04BF3RvlW1GSM/McbSOQAzEK4MXbS7/JFg==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.7.tgz",
+      "integrity": "sha512-fa0hnfmiXc9fq/weK34MUV0drz2pOL/vfKWvN7Qw127hiUPabFCUMgAbYWcchRzMJit4o5ARsK/s+5h0249pLw==",
      "dependencies": {
        "@babel/helper-module-imports": "^7.22.15",
        "@babel/helper-plugin-utils": "^7.22.5",
-        "babel-plugin-polyfill-corejs2": "^0.4.6",
-        "babel-plugin-polyfill-corejs3": "^0.8.5",
-        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "babel-plugin-polyfill-corejs2": "^0.4.7",
+        "babel-plugin-polyfill-corejs3": "^0.8.7",
+        "babel-plugin-polyfill-regenerator": "^0.5.4",
        "semver": "^6.3.1"
      },
      "engines": {
@@ -1604,17 +1604,17 @@
      }
    },
    "node_modules/@babel/preset-env": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.3.tgz",
-      "integrity": "sha512-ovzGc2uuyNfNAs/jyjIGxS8arOHS5FENZaNn4rtE7UdKMMkqHCvboHfcuhWLZNX5cB44QfcGNWjaevxMzzMf+Q==",
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz",
+      "integrity": "sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==",
      "dependencies": {
-        "@babel/compat-data": "^7.23.3",
-        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-compilation-targets": "^7.23.6",
        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-validator-option": "^7.22.15",
+        "@babel/helper-validator-option": "^7.23.5",
        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
        "@babel/plugin-syntax-async-generators": "^7.8.4",
        "@babel/plugin-syntax-class-properties": "^7.12.13",
@@ -1635,25 +1635,25 @@
        "@babel/plugin-syntax-top-level-await": "^7.14.5",
        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
        "@babel/plugin-transform-arrow-functions": "^7.23.3",
-        "@babel/plugin-transform-async-generator-functions": "^7.23.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.7",
        "@babel/plugin-transform-async-to-generator": "^7.23.3",
        "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
-        "@babel/plugin-transform-block-scoping": "^7.23.3",
+        "@babel/plugin-transform-block-scoping": "^7.23.4",
        "@babel/plugin-transform-class-properties": "^7.23.3",
-        "@babel/plugin-transform-class-static-block": "^7.23.3",
-        "@babel/plugin-transform-classes": "^7.23.3",
+        "@babel/plugin-transform-class-static-block": "^7.23.4",
+        "@babel/plugin-transform-classes": "^7.23.8",
        "@babel/plugin-transform-computed-properties": "^7.23.3",
        "@babel/plugin-transform-destructuring": "^7.23.3",
        "@babel/plugin-transform-dotall-regex": "^7.23.3",
        "@babel/plugin-transform-duplicate-keys": "^7.23.3",
-        "@babel/plugin-transform-dynamic-import": "^7.23.3",
+        "@babel/plugin-transform-dynamic-import": "^7.23.4",
        "@babel/plugin-transform-exponentiation-operator": "^7.23.3",
-        "@babel/plugin-transform-export-namespace-from": "^7.23.3",
-        "@babel/plugin-transform-for-of": "^7.23.3",
+        "@babel/plugin-transform-export-namespace-from": "^7.23.4",
+        "@babel/plugin-transform-for-of": "^7.23.6",
        "@babel/plugin-transform-function-name": "^7.23.3",
-        "@babel/plugin-transform-json-strings": "^7.23.3",
+        "@babel/plugin-transform-json-strings": "^7.23.4",
        "@babel/plugin-transform-literals": "^7.23.3",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.23.3",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
        "@babel/plugin-transform-member-expression-literals": "^7.23.3",
        "@babel/plugin-transform-modules-amd": "^7.23.3",
        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
@@ -1661,15 +1661,15 @@
        "@babel/plugin-transform-modules-umd": "^7.23.3",
        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
        "@babel/plugin-transform-new-target": "^7.23.3",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.3",
-        "@babel/plugin-transform-numeric-separator": "^7.23.3",
-        "@babel/plugin-transform-object-rest-spread": "^7.23.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+        "@babel/plugin-transform-numeric-separator": "^7.23.4",
+        "@babel/plugin-transform-object-rest-spread": "^7.23.4",
        "@babel/plugin-transform-object-super": "^7.23.3",
-        "@babel/plugin-transform-optional-catch-binding": "^7.23.3",
-        "@babel/plugin-transform-optional-chaining": "^7.23.3",
+        "@babel/plugin-transform-optional-catch-binding": "^7.23.4",
+        "@babel/plugin-transform-optional-chaining": "^7.23.4",
        "@babel/plugin-transform-parameters": "^7.23.3",
        "@babel/plugin-transform-private-methods": "^7.23.3",
-        "@babel/plugin-transform-private-property-in-object": "^7.23.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.23.4",
        "@babel/plugin-transform-property-literals": "^7.23.3",
        "@babel/plugin-transform-regenerator": "^7.23.3",
        "@babel/plugin-transform-reserved-words": "^7.23.3",
@@ -1683,9 +1683,9 @@
        "@babel/plugin-transform-unicode-regex": "^7.23.3",
        "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.6",
-        "babel-plugin-polyfill-corejs3": "^0.8.5",
-        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "babel-plugin-polyfill-corejs2": "^0.4.7",
+        "babel-plugin-polyfill-corejs3": "^0.8.7",
+        "babel-plugin-polyfill-regenerator": "^0.5.4",
        "core-js-compat": "^3.31.0",
        "semver": "^6.3.1"
      },
@@ -1758,19 +1758,19 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.3.tgz",
-      "integrity": "sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
+      "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
      "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.3",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-function-name": "^7.23.0",
        "@babel/helper-hoist-variables": "^7.22.5",
        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.3",
-        "@babel/types": "^7.23.3",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.23.6",
+        "@babel/types": "^7.23.6",
+        "debug": "^4.3.1",
        "globals": "^11.1.0"
      },
      "engines": {
@@ -1778,11 +1778,11 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz",
-      "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
        "@babel/helper-validator-identifier": "^7.22.20",
        "to-fast-properties": "^2.0.0"
      },
@@ -1907,9 +1907,9 @@
      }
    },
    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
-      "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
      "dev": true,
      "dependencies": {
        "ajv": "^6.12.4",
@@ -1957,18 +1957,18 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "8.53.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.53.0.tgz",
-      "integrity": "sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
+      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
      "dev": true,
      "engines": {
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
    "node_modules/@googleapis/drive": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@googleapis/drive/-/drive-8.4.0.tgz",
-      "integrity": "sha512-oB0HfGoJp/5KSZlrkCZ2EJOifSqwqSTPB3OQxjjePJ0EpARUJteVwTAhCrOI1l6/P/gVwF3S7PwmLXaC8txrxA==",
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/@googleapis/drive/-/drive-8.6.0.tgz",
+      "integrity": "sha512-Af3/5i6h7gbjHnwFuO9zMTpYOy2yhhfZlNciUEjb14L3ZdT1WNIDM038viIAb9ovFzkrIDqLSfUbFCgh1pywkw==",
      "dependencies": {
        "googleapis-common": "^7.0.0"
      },
@@ -2837,9 +2837,9 @@
      }
    },
    "node_modules/@remix-run/router": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
-      "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
      "engines": {
        "node": ">=14.0.0"
      }
@@ -3734,12 +3734,12 @@
      }
    },
    "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz",
-      "integrity": "sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz",
+      "integrity": "sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==",
      "dependencies": {
        "@babel/compat-data": "^7.22.6",
-        "@babel/helper-define-polyfill-provider": "^0.4.3",
+        "@babel/helper-define-polyfill-provider": "^0.4.4",
        "semver": "^6.3.1"
      },
      "peerDependencies": {
@@ -3747,23 +3747,23 @@
      }
    },
    "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.5.tgz",
-      "integrity": "sha512-Q6CdATeAvbScWPNLB8lzSO7fgUVBkQt6zLgNlfyeCr/EQaEQR+bWiBYYPYAFyE528BMjRhL+1QBMOI4jc/c5TA==",
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz",
+      "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==",
      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.4.3",
-        "core-js-compat": "^3.32.2"
+        "@babel/helper-define-polyfill-provider": "^0.4.4",
+        "core-js-compat": "^3.33.1"
      },
      "peerDependencies": {
        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
      }
    },
    "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz",
-      "integrity": "sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz",
+      "integrity": "sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==",
      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.4.3"
+        "@babel/helper-define-polyfill-provider": "^0.4.4"
      },
      "peerDependencies": {
        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -4227,9 +4227,9 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
-      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "version": "4.22.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
+      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
      "funding": [
        {
          "type": "opencollective",
@@ -4245,9 +4245,9 @@
        }
      ],
      "dependencies": {
-        "caniuse-lite": "^1.0.30001541",
-        "electron-to-chromium": "^1.4.535",
-        "node-releases": "^2.0.13",
+        "caniuse-lite": "^1.0.30001565",
+        "electron-to-chromium": "^1.4.601",
+        "node-releases": "^2.0.14",
        "update-browserslist-db": "^1.0.13"
      },
      "bin": {
@@ -4408,9 +4408,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001547",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
-      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
+      "version": "1.0.30001570",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz",
+      "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==",
      "funding": [
        {
          "type": "opencollective",
@@ -4771,11 +4771,11 @@
      }
    },
    "node_modules/core-js-compat": {
-      "version": "3.33.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.0.tgz",
-      "integrity": "sha512-0w4LcLXsVEuNkIqwjjf9rjCoPhK8uqA4tMRh4Ge26vfLtUutshn+aRJU21I9LCJlh2QQHfisNToLjw1XEJLTWw==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz",
+      "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==",
      "dependencies": {
-        "browserslist": "^4.22.1"
+        "browserslist": "^4.22.2"
      },
      "funding": {
        "type": "opencollective",
@@ -5381,9 +5381,9 @@
      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.551",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.551.tgz",
-      "integrity": "sha512-/Ng/W/kFv7wdEHYzxdK7Cv0BHEGSkSB3M0Ssl8Ndr1eMiYeas/+Mv4cNaDqamqWx6nd2uQZfPz6g25z25M/sdw=="
+      "version": "1.4.612",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.612.tgz",
+      "integrity": "sha512-dM8BMtXtlH237ecSMnYdYuCkib2QHq0kpWfUnavjdYsyr/6OsAwg5ZGUfnQ9KD1Ga4QgB2sqXlB2NT8zy2GnVg=="
    },
    "node_modules/elliptic": {
      "version": "6.5.4",
@@ -5587,15 +5587,15 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.53.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
-      "integrity": "sha512-N4VuiPjXDUa4xVeV/GC/RV3hQW9Nw+Y463lkWaKKXKYMvmRiRDAtfpuPFLN+E1/6ZhyR8J2ig+eVREnYgUsiag==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
+      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
      "dev": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.3",
-        "@eslint/js": "8.53.0",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.56.0",
        "@humanwhocodes/config-array": "^0.11.13",
        "@humanwhocodes/module-importer": "^1.0.1",
        "@nodelib/fs.walk": "^1.2.8",
@@ -5642,9 +5642,9 @@
      }
    },
    "node_modules/eslint-plugin-jest": {
-      "version": "27.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.6.0.tgz",
-      "integrity": "sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==",
+      "version": "27.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.6.2.tgz",
+      "integrity": "sha512-CI1AlKrsNhYFoP48VU8BVWOi7+qHTq4bRxyUlGjeU8SfFt8abjXhjOuDzUoMp68DoXIx17KpNpIkMrl4s4ZW0g==",
      "dev": true,
      "dependencies": {
        "@typescript-eslint/utils": "^5.10.0"
@@ -6481,9 +6481,9 @@
      }
    },
    "node_modules/fs-extra": {
-      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
-      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
      "dependencies": {
        "graceful-fs": "^4.2.0",
        "jsonfile": "^6.0.1",
@@ -10052,30 +10052,30 @@
      }
    },
    "node_modules/marked-extended-tables": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.7.tgz",
-      "integrity": "sha512-DwURXYCPxhIdEP6y0rI9Od3qPM6ieXK7ce6hqR0/9MpkSmBUMrrBtoH3fMp6+oEXjfmIq4YBGPi9Ios80N3Q2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.8.tgz",
+      "integrity": "sha512-GcVQP7EnfQ98o09ooqM4t4M0qfpKdKuk7/z4qZfgkLyXTXsIyFS1eeBmfC36o1NbR6aSq8ynL/LeTz3w4RS27Q==",
      "peerDependencies": {
-        "marked": ">=3 <10"
+        "marked": ">=3 <12"
      }
    },
    "node_modules/marked-gfm-heading-id": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-3.1.0.tgz",
-      "integrity": "sha512-PYgLXDbL64Ga6kCpvVuKVoIVsV6MKUtkOXnR8mIqyjiycAeKNhQxcGpO0mHEogOTzyY8A8TcK49k5VwYMUCCbg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-3.1.2.tgz",
+      "integrity": "sha512-SdIZvhNxDgndFkDa2WRcFP4ahYm6k6hoHdTCN+fD7HRiI/R3Eimcw/Yl7ikQ+0KUuDpi75NnYQiThZnZsNr9Dg==",
      "dependencies": {
        "github-slugger": "^2.0.0"
      },
      "peerDependencies": {
-        "marked": ">=4 <10"
+        "marked": ">=4 <12"
      }
    },
    "node_modules/marked-smartypants-lite": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/marked-smartypants-lite/-/marked-smartypants-lite-1.0.1.tgz",
-      "integrity": "sha512-XeK3ephFrim4MBLJCCSxx6whqE9HiIt9JsSLR5x3FySid5iopUJkI23/rx+HUhuavFFdRAnPIIaDxHsFBc5clg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/marked-smartypants-lite/-/marked-smartypants-lite-1.0.2.tgz",
+      "integrity": "sha512-cEANts+s3+gnTzXPvPT2z4V8NfbMEL9QooKUviug0DkaKkXQWrUwDAmFnQAkLSJCw2BQcD8YPDyxu0HJ3mg36w==",
      "peerDependencies": {
-        "marked": ">= 4.0.0 < 10"
+        "marked": ">=4 <12"
      }
    },
    "node_modules/markedLegacy": {
@@ -10436,9 +10436,9 @@
      }
    },
    "node_modules/moment": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
      "engines": {
        "node": "*"
      }
@@ -10453,9 +10453,9 @@
      }
    },
    "node_modules/mongoose": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.0.tgz",
-      "integrity": "sha512-PzwkLgm1Jhj0NQdgGfnFsu0QP9V1sBFgbavEgh/IPAUzKAagzvEhuaBuAQOQGjczVWnpIU9tBqyd02cOTgsPlA==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.4.tgz",
+      "integrity": "sha512-wN9qvdevX3+922VnLT7CpaZRT3jmVCBOK2QMHMGeScQxDRnFMPpkuI9StEPpZo/3x8t+kbzH7F8RMPsyNwyM4w==",
      "dependencies": {
        "bson": "^6.2.0",
        "kareem": "2.5.1",
@@ -10834,9 +10834,9 @@
      "dev": true
    },
    "node_modules/node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
    "node_modules/nodemon": {
      "version": "2.0.21",
@@ -11873,11 +11873,11 @@
      "dev": true
    },
    "node_modules/react-router": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
-      "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+      "version": "6.21.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.2.tgz",
+      "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==",
      "dependencies": {
-        "@remix-run/router": "1.11.0"
+        "@remix-run/router": "1.14.2"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -11887,12 +11887,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
-      "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+      "version": "6.21.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.2.tgz",
+      "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==",
      "dependencies": {
-        "@remix-run/router": "1.11.0",
-        "react-router": "6.18.0"
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.2"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -13327,9 +13327,9 @@
      }
    },
    "node_modules/stylelint-config-recess-order": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.3.0.tgz",
-      "integrity": "sha512-EWVtxZ8oq4/meTrRNUDrS5TqMz6TX72JjKDwVQq0JJDXE+P/o7UuFw3wWV/0O9yvJfh/da6nJY71ZUn/wSfB4g==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz",
+      "integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==",
      "dev": true,
      "dependencies": {
        "stylelint-order": "6.x"
@@ -13519,13 +13519,13 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
    },
    "node_modules/supertest": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/supertest/-/supertest-6.3.3.tgz",
-      "integrity": "sha512-EMCG6G8gDu5qEqRQ3JjjPs6+FYT1a7Hv5ApHvtSghmOFJYtsU5S+pSb6Y2EUeCEY3CmEL3mmQ8YWlPOzQomabA==",
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/supertest/-/supertest-6.3.4.tgz",
+      "integrity": "sha512-erY3HFDG0dPnhw4U+udPfrzXa4xhSG+n4rxfRuZWCUvjFWwKl+OxWf/7zk50s84/fAAs7vf5QAb9uRa0cCykxw==",
      "dev": true,
      "dependencies": {
        "methods": "^1.1.2",
-        "superagent": "^8.0.5"
+        "superagent": "^8.1.2"
      },
      "engines": {
        "node": ">=6.4.0"
--- a/package.json
+++ b/package.json
@@ -79,11 +79,11 @@
    ]
  },
  "dependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
    "@babel/preset-react": "^7.23.3",
-    "@googleapis/drive": "^8.4.0",
+    "@googleapis/drive": "^8.6.0",
    "body-parser": "^1.20.2",
    "classnames": "^2.3.2",
    "codemirror": "^5.65.6",
@@ -93,39 +93,39 @@
    "express": "^4.18.2",
    "express-async-handler": "^1.2.0",
    "express-static-gzip": "2.1.7",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
    "js-yaml": "^4.1.0",
    "jwt-simple": "^0.5.6",
    "less": "^3.13.1",
    "lodash": "^4.17.21",
    "marked": "5.1.1",
-    "marked-extended-tables": "^1.0.7",
-    "marked-gfm-heading-id": "^3.1.0",
-    "marked-smartypants-lite": "^1.0.1",
+    "marked-extended-tables": "^1.0.8",
+    "marked-gfm-heading-id": "^3.1.2",
+    "marked-smartypants-lite": "^1.0.2",
    "markedLegacy": "npm:marked@^0.3.19",
-    "moment": "^2.29.4",
-    "mongoose": "^8.0.0",
+    "moment": "^2.30.1",
+    "mongoose": "^8.0.4",
    "nanoid": "3.3.4",
    "nconf": "^0.12.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.18.0",
+    "react-router-dom": "6.21.2",
    "sanitize-filename": "1.6.3",
    "superagent": "^8.1.2",
    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
  },
  "devDependencies": {
-    "eslint": "^8.53.0",
-    "eslint-plugin-jest": "^27.6.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jest": "^27.6.2",
    "eslint-plugin-react": "^7.33.2",
    "jest": "^29.7.0",
    "jest-expect-message": "^1.1.3",
    "postcss-less": "^6.0.0",
    "stylelint": "^15.11.0",
-    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-recess-order": "^4.4.0",
    "stylelint-config-recommended": "^13.0.0",
    "stylelint-stylistic": "^0.4.3",
-    "supertest": "^6.3.3"
+    "supertest": "^6.3.4"
  }
 }
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -7,7 +7,7 @@ const cx = require('classnames');
 const closeTag = require('./close-tag');

 let CodeMirror;
-if(typeof navigator !== 'undefined'){
+if(typeof window !== 'undefined'){
 	CodeMirror = require('codemirror');

 	//Language Modes
@@ -112,6 +112,10 @@ const CodeEditor = createClass({
 				'Shift-Tab'        : this.dedent,
 				'Ctrl-B'           : this.makeBold,
 				'Cmd-B'            : this.makeBold,
+				'Shift-Ctrl-='     : this.makeSuper,
+				'Shift-Cmd-='      : this.makeSuper,
+				'Ctrl-='           : this.makeSub,
+				'Cmd-='            : this.makeSub,
 				'Ctrl-I'           : this.makeItalic,
 				'Cmd-I'            : this.makeItalic,
 				'Ctrl-U'           : this.makeUnderline,
@@ -219,6 +223,25 @@ const CodeEditor = createClass({
 		}
 	},

+	makeSuper : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
+		}
+	},
+
+	makeSub : function() {
+		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
+		if(selection.length === 0){
+			const cursor = this.codeMirror.getCursor();
+			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+		}
+	},
+
+
 	makeNbsp : function() {
 		this.codeMirror.replaceSelection('&nbsp;', 'end');
 	},
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -34,7 +34,7 @@ const mustacheSpans = {
 	start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
-		const inlineRegex = /{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *|}}/g;
+		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
 		const match = completeSpan.exec(src);
 		if(match) {
 			//Find closing delimiter
@@ -45,7 +45,7 @@ const mustacheSpans = {
 			let delim;
 			while (delim = inlineRegex.exec(match[0])) {
 				if(!tags) {
-					tags = ` ${processStyleTags(delim[0].substring(2))}`;
+					tags = `${processStyleTags(delim[0].substring(2))}`;
 					endTags = delim[0].length;
 				}
 				if(delim[0].startsWith('{{')) {
@@ -84,7 +84,7 @@ const mustacheDivs = {
 	start(src) { return src.match(/\n *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeBlock = /^ *{{[^\n}]* *\n.*\n *}}/s;                // Regex for the complete token
-		const blockRegex = /^ *{{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1 *$|^ *}}$/gm;
+		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
 		const match = completeBlock.exec(src);
 		if(match) {
 			//Find closing delimiter
@@ -95,8 +95,8 @@ const mustacheDivs = {
 			let delim;
 			while (delim = blockRegex.exec(match[0])?.[0].trim()) {
 				if(!tags) {
-					tags = ` ${processStyleTags(delim.substring(2))}`;
-					endTags = delim.length;
+					tags = `${processStyleTags(delim.substring(2))}`;
+					endTags = delim.length + src.indexOf(delim);
 				}
 				if(delim.startsWith('{{')) {
 					blockCount++;
@@ -132,14 +132,14 @@ const mustacheInjectInline = {
 	level : 'inline',
 	start(src) { return src.match(/ *{[^{\n]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/g;
+		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
 		const match = inlineRegex.exec(src);
 		if(match) {
 			const lastToken = tokens[tokens.length - 1];
 			if(!lastToken || lastToken.type == 'mustacheInjectInline')
 				return false;

-			const tags = ` ${processStyleTags(match[1])}`;
+			const tags = `${processStyleTags(match[1])}`;
 			lastToken.originalType = lastToken.type;
 			lastToken.type         = 'mustacheInjectInline';
 			lastToken.tags         = tags;
@@ -167,7 +167,7 @@ const mustacheInjectBlock = {
 		level : 'block',
 		start(src) { return src.match(/\n *{[^{\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 		tokenizer(src, tokens) {
-			const inlineRegex = /^ *{(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\1}/ym;
+			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
 			const match = inlineRegex.exec(src);
 			if(match) {
 				const lastToken = tokens[tokens.length - 1];
@@ -175,7 +175,7 @@ const mustacheInjectBlock = {
 					return false;

 				lastToken.originalType = 'mustacheInjectBlock';
-				lastToken.tags         = ` ${processStyleTags(match[1])}`;
+				lastToken.tags         = `${processStyleTags(match[1])}`;
 				return {
 					type : 'mustacheInjectBlock', // Should match "name" above
 					raw  : match[0],              // Text to consume from the source
@@ -206,6 +206,34 @@ const mustacheInjectBlock = {
 	}
 };

+const superSubScripts = {
+	name  : 'superSubScript',
+	level : 'inline',
+	start(src) { return src.match(/\^/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const superRegex = /^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/m;
+		const subRegex   = /^\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/m;
+		let isSuper = false;
+		let match = subRegex.exec(src);
+		if(!match){
+			match = superRegex.exec(src);
+			if(match)
+				isSuper = true;
+		}
+		if(match?.length) {
+			return {
+				type   : 'superSubScript', // Should match "name" above
+				raw    : match[0],          // Text to consume from the source
+				tag    : isSuper ? 'sup' : 'sub',
+				tokens : this.lexer.inlineTokens(match[1])
+			};
+		}
+	},
+	renderer(token) {
+		return `<${token.tag}>${this.parser.parseInline(token.tokens)}</${token.tag}>`;
+	}
+};
+
 const definitionLists = {
 	name  : 'definitionLists',
 	level : 'block',
@@ -238,7 +266,7 @@ const definitionLists = {
 	}
 };

-Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists] });
+Marked.use({ extensions: [mustacheSpans, mustacheDivs, mustacheInjectInline, definitionLists, superSubScripts] });
 Marked.use(mustacheInjectBlock);
 Marked.use({ renderer: renderer, mangle: false });
 Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite());
@@ -326,16 +354,19 @@ const voidTags = new Set([
 ]);

 const processStyleTags = (string)=>{
-	//split tags up. quotes can only occur right after colons.
+	//split tags up. quotes can only occur right after : or =.
 	//TODO: can we simplify to just split on commas?
-	const tags = string.match(/(?:[^, ":]+|:(?:"[^"]*"|))+/g);
+	const tags = string.match(/(?:[^, ":=]+|[:=](?:"[^"]*"|))+/g);

-	if(!tags)	return '"';
+	const id         = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
+	const classes    = _.remove(tags, (tag)=>(!tag.includes(':')) && (!tag.includes('=')));
+	const attributes = _.remove(tags, (tag)=>(tag.includes('='))).map((tag)=>tag.replace(/="?([^"]*)"?/g, '="$1"'));
+	const styles     = tags?.length ? tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;').trim()) : [];

-	const id      = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
-	const classes = _.remove(tags, (tag)=>!tag.includes(':'));
-	const styles  = tags.map((tag)=>tag.replace(/:"?([^"]*)"?/g, ':$1;'));
-	return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
+	return `${classes?.length ? ` ${classes.join(' ')}`        : ''}"` +
+		`${id                   ? ` id="${id}"`                  : ''}` +
+		`${styles?.length       ? ` style="${styles.join(' ')}"` : ''}` +
+		`${attributes?.length   ? ` ${attributes.join(' ')}`     : ''}`;
 };

 module.exports = {
--- a/tests/markdown/mustache-syntax.test.js
+++ b/tests/markdown/mustache-syntax.test.js
@@ -13,137 +13,134 @@ String.prototype.trimReturns = function(){
 // Remove the `.failing()` method once you have fixed the issue.

 describe('Inline: When using the Inline syntax {{ }}', ()=>{
-	it.failing('Renders a mustache span with text only', function() {
+	it('Renders a mustache span with text only', function() {
 		const source = '{{ text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">text</span>');
 	});

-	it.failing('Renders a mustache span with text only, but with spaces', function() {
+	it('Renders a mustache span with text only, but with spaces', function() {
 		const source = '{{ this is a text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block">this is a text</span>');
 	});

-	it.failing('Renders an empty mustache span', function() {
+	it('Renders an empty mustache span', function() {
 		const source = '{{}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});

-	it.failing('Renders a mustache span with just a space', function() {
+	it('Renders a mustache span with just a space', function() {
 		const source = '{{ }}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});

-	it.failing('Renders a mustache span with a few spaces only', function() {
+	it('Renders a mustache span with a few spaces only', function() {
 		const source = '{{     }}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block"></span>');
 	});

-	it.failing('Renders a mustache span with text and class', function() {
+	it('Renders a mustache span with text and class', function() {
 		const source = '{{my-class text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag.
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">text</span>');
 	});

-	it.failing('Renders a mustache span with text and two classes', function() {
+	it('Renders a mustache span with text and two classes', function() {
 		const source = '{{my-class,my-class2 text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag.
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class my-class2">text</span>');
 	});

-	it.failing('Renders a mustache span with text with spaces and class', function() {
+	it('Renders a mustache span with text with spaces and class', function() {
 		const source = '{{my-class this is a text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block my-class">this is a text</span>');
 	});

-	it.failing('Renders a mustache span with text and id', function() {
+	it('Renders a mustache span with text and id', function() {
 		const source = '{{#my-span text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
 	});

-	it.failing('Renders a mustache span with text and two ids', function() {
+	it('Renders a mustache span with text and two ids', function() {
 		const source = '{{#my-span,#my-favorite-span text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" id="my-span">text</span>');
 	});

-	it.failing('Renders a mustache span with text and css property', function() {
+	it('Renders a mustache span with text and css property', function() {
 		const source = '{{color:red text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
 	});

-	it.failing('Renders a mustache span with text and two css properties', function() {
+	it('Renders a mustache span with text and two css properties', function() {
 		const source = '{{color:red,padding:5px text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red; padding:5px;">text</span>');
 	});

-	it.failing('Renders a mustache span with text and css property which contains quotes', function() {
+	it('Renders a mustache span with text and css property which contains quotes', function() {
 		const source = '{{font-family:"trebuchet ms" text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text</span>');
 	});

-	it.failing('Renders a mustache span with text and two css properties which contains quotes', function() {
+	it('Renders a mustache span with text and two css properties which contains quotes', function() {
 		const source = '{{font-family:"trebuchet ms",padding:"5px 10px" text}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms; padding:5px 10px;">text</span>');
 	});


-	it.failing('Renders a mustache span with text with quotes and css property which contains quotes', function() {
+	it('Renders a mustache span with text with quotes and css property which contains double quotes', function() {
 		const source = '{{font-family:"trebuchet ms" text "with quotes"}}';
 		const rendered = Markdown.render(source);
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="font-family:trebuchet ms;">text “with quotes”</span>');
 	});

+
+	it('Renders a mustache span with text with quotes and css property which contains double and simple quotes', function() {
+		const source = `{{--stringVariable:"'string'" text "with quotes"}}`;
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text “with quotes”</span>`);
+	});
+
+
 	it('Renders a mustache span with text, id, class and a couple of css properties', function() {
 		const source = '{{pen,#author,color:orange,font-family:"trebuchet ms" text}}';
 		const rendered = Markdown.render(source);
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;">text</span>');
 	});
+
+	it('Renders a span with added attributes', function() {
+		const source = 'Text and {{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e, text}} and more text!';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p>Text and <span class="inline-block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e">text</span> and more text!</p>\n');
+	});
 });

 //  BLOCK SYNTAX

 describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
-	it.failing('Renders a div with text only', function() {
+	it('Renders a div with text only', function() {
 		const source = dedent`{{
 		text
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"><p>text</p></div>`);
 	});

-	it.failing('Renders an empty div', function() {
+	it('Renders an empty div', function() {
 		const source = dedent`{{

 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block"></div>`);
 	});

@@ -151,52 +148,62 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 		const source = dedent`{{
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// this actually renders in HB as '{{ }}'...
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>{{}}</p>`);
 	});

-	it.failing('Renders a div with a single class', function() {
+	it('Renders a div with a single class', function() {
 		const source = dedent`{{cat

 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"></div>`);
 	});

-	it.failing('Renders a div with a single class and text', function() {
+	it('Renders a div with a single class and text', function() {
 		const source = dedent`{{cat
 		Sample text.
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat"><p>Sample text.</p></div>`);
 	});

-	it.failing('Renders a div with two classes and text', function() {
+	it('Renders a div with two classes and text', function() {
 		const source = dedent`{{cat,dog
 		Sample text.
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat dog"><p>Sample text.</p></div>`);
 	});

-	it.failing('Renders a div with a style and text', function() {
+	it('Renders a div with a style and text', function() {
 		const source = dedent`{{color:red
 		Sample text.
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds two extra \s before closing `>` in opening tag
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red;"><p>Sample text.</p></div>`);
 	});

-	it.failing('Renders a div with a class, style and text', function() {
+	it('Renders a div with a style that has a string variable, and text', function() {
+		const source = dedent`{{--stringVariable:"'string'"
+		Sample text.
+		}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with a style that has a string variable, and text', function() {
+		const source = dedent`{{--stringVariable:"'string'"
+		Sample text.
+		}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string';"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with a class, style and text', function() {
 		const source = dedent`{{cat,color:red
 		Sample text.
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s after the class attribute
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" style="color:red;"><p>Sample text.</p></div>`);
 	});

@@ -208,14 +215,27 @@ describe(`Block: When using the Block syntax {{tags\\ntext\\n}}`, ()=>{
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block cat" id="dog" style="color:red;"><p>Sample text.</p></div>`);
 	});

-	it.failing('Renders a div with a single ID', function() {
+	it('Renders a div with a single ID', function() {
 		const source = dedent`{{#cat,#dog
 		Sample text.
 		}}`;
 		const rendered = Markdown.render(source).trimReturns();
-		// FIXME: adds extra \s before closing `>` in opening tag, and another after class names
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" id="cat"><p>Sample text.</p></div>`);
 	});
+
+	it('Renders a div with an ID, class, style and text, and a variable assignment', function() {
+		const source = dedent`{{color:red,cat,#dog,a="b and c",d="e"
+		Sample text.
+		}}`;
+		const rendered = Markdown.render(source).trimReturns();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class=\"block cat\" id=\"dog\" style=\"color:red;\" a=\"b and c\" d=\"e\"><p>Sample text.</p></div>`);
+	});
+
+	it('Renders a div with added attributes', function() {
+		const source = '{{pen,#author,color:orange,font-family:"trebuchet ms",a="b and c",d=e\nText and text and more text!\n}}\n';
+		const rendered = Markdown.render(source);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block pen" id="author" style="color:orange; font-family:trebuchet ms;" a="b and c" d="e"><p>Text and text and more text!</p>\n</div>');
+	});
 });

 // MUSTACHE INJECTION SYNTAX
@@ -235,12 +255,24 @@ describe('Injection: When an injection tag follows an element', ()=>{
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block ClassName">text</span>');
 		});

+		it.failing('Renders a span "text" with injected attribute', function() {
+			const source = '{{ text}}{a="b and c"}';
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span a="b and c" class="inline-block ">text</span>');
+		});
+
 		it.failing('Renders a span "text" with injected style', function() {
 			const source = '{{ text}}{color:red}';
 			const rendered = Markdown.render(source);
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<span class="inline-block" style="color:red;">text</span>');
 		});

+		it.failing('Renders a span "text" with injected style using a string variable', function() {
+			const source = `{{ text}}{--stringVariable:"'string'"}`;
+			const rendered = Markdown.render(source);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<span class="inline-block" style="--stringVariable:'string';">text</span>`);
+		});
+
 		it.failing('Renders a span "text" with two injected styles', function() {
 			const source = '{{ text}}{color:red,background:blue}';
 			const rendered = Markdown.render(source);
@@ -270,6 +302,12 @@ describe('Injection: When an injection tag follows an element', ()=>{
 			const rendered = Markdown.render(source).trimReturns();
 			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><span class="inline-block" style="color:red;">text</span>{background:blue}</p>');
 		});
+
+		it('Renders an image with added attributes', function() {
+			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img class="" style="position:absolute; bottom:20px; left:130px; width:220px;" a="b and c" d="e" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug"></p>`);
+		});
 	});

 	describe('and that element is a block', ()=>{
@@ -297,7 +335,16 @@ describe('Injection: When an injection tag follows an element', ()=>{
 			}}
 			{color:red,background:blue}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<div class="block" style="color:red; background:blue;"><p>text</p></div>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="color:red; background:blue"><p>text</p></div>`);
+		});
+
+		it.failing('renders a div "text" with injected variable string', function() {
+			const source = dedent`{{
+			text
+			}}
+			{--stringVariable:"'string'"}`;
+			const rendered = Markdown.render(source).trimReturns();
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class="block" style="--stringVariable:'string'"><p>text</p></div>`);
 		});

 		it.failing('renders an h2 header "text" with injected class name', function() {
--- a/themes/Legacy/5ePHB/style.less
+++ b/themes/Legacy/5ePHB/style.less
@@ -40,7 +40,7 @@ body {
 	-webkit-column-gap   : 1cm;
 	-moz-column-gap      : 1cm;
 }
-.phb{
+.phb, .page{
 	.useColumns();
 	counter-increment : phb-page-numbers;
 	position          : relative;
@@ -59,6 +59,9 @@ body {
 	page-break-before : always;
 	page-break-after  : always;
 	contain           : size;
+}
+
+.phb{
 	//*****************************
 	// *            BASE
 	// *****************************/
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -1,5 +1,6 @@
@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
+@import (less) './themes/fonts/icon fonts/font-icons.less';

 :root {
 	//Colors
@@ -14,16 +15,13 @@
 	--HB_Color_Footnotes             : #C9AD6A; // Gold
 }

-@page { margin : 0; }
-body { counter-reset : phb-page-numbers; }
-* { -webkit-print-color-adjust : exact; }
 .useSansSerif() {
 	font-family : 'ScalySansRemake';
 	font-size   : 0.318cm;
 	line-height : 1.2em;
 	p,dl,ul,ol { line-height : 1.2em; }
 	ul, ol { padding-left : 1em; }
-	em { font-style  : italic; }
+	em { font-style : italic; }
 	strong {
 		font-weight    : 800;
 		letter-spacing : -0.02em;
@@ -42,55 +40,31 @@ body { counter-reset : phb-page-numbers; }
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
-.columnWrapper {
-	column-gap        : inherit;
-	max-height        : 100%;
-	column-span       : all;
-	columns           : inherit;
-}
 .page {
 	.useColumns();
-	position          : relative;
-	z-index           : 15;
-	box-sizing        : border-box;
-	width             : 215.9mm;
-	height            : 279.4mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
-	overflow          : hidden;
-	font-family       : 'BookInsanityRemake';
-	font-size         : 0.34cm;
-	counter-increment : phb-page-numbers;
-	background-color  : var(--HB_Color_Background);
-	background-image  : @backgroundImage;
-	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
+	font-family      : 'BookInsanityRemake';
+	font-size        : 0.34cm;
+	background-image : @backgroundImage;
 }
-//*****************************
+// *****************************
 // *            BASE
-	// *****************************/
+// *****************************/

 .page {
 	p {
-		display       : block;
-		line-height   : 1.25em;
-		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
-		& + * { margin-top : 0.325cm; }
+		line-height : 1.25em;
+		& + * { margin-top : 0.325cm; }  //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 		& + p { margin-top : 0; }
 	}
 	ul {
-		padding-left        : 1.4em;
-		margin-bottom       : 0.8em;
-		line-height         : 1.25em;
-		list-style-position : outside;
-		list-style-type     : disc;
+		padding-left  : 1.4em;
+		margin-bottom : 0.8em;
+		line-height   : 1.25em;
 	}
 	ol {
-		padding-left        : 1.4em;
-		margin-bottom       : 0.8em;
-		line-height         : 1.25em;
-		list-style-position : outside;
-		list-style-type     : decimal;
+		padding-left  : 1.4em;
+		margin-bottom : 0.8em;
+		line-height   : 1.25em;
 	}
 	//Indents after p or lists
 	p + p, ul + p, ol + p { text-indent : 1em; }
@@ -99,24 +73,12 @@ body { counter-reset : phb-page-numbers; }
 		font-weight    : bold;
 		letter-spacing : -0.02em;
 	}
-	em { font-style : italic; }
-	sup {
-		font-size      : smaller;
-		line-height    : 0;
-		vertical-align : super;
-	}
-	sub {
-		font-size      : smaller;
-		line-height    : 0;
-		vertical-align : sub;
-	}
-	//*****************************
+	// *****************************
 	// *           HEADERS
 	// *****************************/
 	h1,h2,h3,h4 {
-		font-family   : 'MrEavesRemake';
-		font-weight   : 800;
-		color         : var(--HB_Color_HeaderText);
+		font-family : 'MrEavesRemake';
+		color       : var(--HB_Color_HeaderText);
 	}
 	h1 {
 		margin-bottom       : 0.18cm; //Margin-bottom only because this is WIDE
@@ -145,8 +107,8 @@ body { counter-reset : phb-page-numbers; }
 	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
+		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
@@ -162,8 +124,8 @@ body { counter-reset : phb-page-numbers; }
 	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
+		font-size   : 0.458cm;
+		line-height : 0.971em; //Font is misaligned. Shift up slightly
 		& + * { margin-top : 0.09cm; }
 	}
 	* + h4 {
@@ -172,19 +134,17 @@ body { counter-reset : phb-page-numbers; }
 	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
+		font-family : 'ScalySansSmallCapsRemake';
+		font-size   : 0.423cm;
+		line-height : 0.951em; //Font is misaligned. Shift up slightly
 		& + * { margin-top : 0.2cm; }
 	}
-	//*****************************
+	// *****************************
 	// *          TABLE
 	// *****************************/
 	table {
 		.useSansSerif();
-		width         : 100%;
-		line-height   : 16px;
+		line-height : 16px;
 		& + * { margin-top : 0.325cm; }
 		thead {
 			display     : table-row-group;
@@ -200,15 +160,15 @@ body { counter-reset : phb-page-numbers; }
 			tr {
 				td {
 					//padding : 0.14em 0.4em;
-					padding     : 0px 1.5px;   // Both of these are temporary, just to force
+					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); }
 			}
 		}
 	}
-	//*****************************
-	// *            	QUOTE
+	// *****************************
+	// *          QUOTE
 	// *****************************/
 	.quote {

@@ -241,9 +201,7 @@ body { counter-reset : phb-page-numbers; }
 		
 	}

-
-
-	//*****************************
+	// *****************************
 	// *            NOTE
 	// *****************************/
 	.note {
@@ -257,7 +215,7 @@ body { counter-reset : phb-page-numbers; }
 		border-image-outset : 9px 0px;
 		box-shadow          : 1px 4px 14px #888888;
 		.page :where(&) {
-			margin-top        : 9px; //Prevent top border getting cut off on colbreak
+			margin-top : 9px; //Prevent top border getting cut off on colbreak
 		}
 		& + * { margin-top : 0.45cm; }
 		h5 { font-size : 0.375cm; }
@@ -267,7 +225,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 		:last-child { margin-bottom : 0; }
 	}
-	//************************************
+	// ************************************
 	// *       DESCRIPTIVE TEXT BOX
 	// ************************************/
 	.descriptive {
@@ -291,7 +249,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 		:last-child { margin-bottom : 0; }
 	}
-	//*****************************
+	// *****************************
 	// *    Images Snippets
 	// *****************************/

@@ -320,42 +278,10 @@ body { counter-reset : phb-page-numbers; }
 	}

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

 	/* Watercolor */
-	[class*='watercolor'] {
-		position            : absolute;
-		z-index             : -2;
-		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 */
-		background-color    : var(--HB_Color_WatercolorStain);			/* default color */
-		background-size     : cover;
-		-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;
-		--wc                : @watercolor1;         /* default image */
-	}
-
+	
 	.watercolor1 { --wc : @watercolor1; }
 	.watercolor2 { --wc : @watercolor2; }
 	.watercolor3 { --wc : @watercolor3; }
@@ -369,7 +295,7 @@ body { counter-reset : phb-page-numbers; }
 	.watercolor11 { --wc : @watercolor11; }
 	.watercolor12 { --wc : @watercolor12; }

-	//*****************************
+	// *****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/
 	.monster {
@@ -390,24 +316,24 @@ body { counter-reset : phb-page-numbers; }
 			box-shadow            : 1px 4px 14px #888888;
 		}

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

 		//Headers
 		h2 {
-			margin        : 0;
-			font-size     : 0.62cm;
-			line-height   : 1em;
+			margin      : 0;
+			font-size   : 0.62cm;
+			line-height : 1em;
 			& + p {
 				margin-bottom : 0;
 				font-size     : 0.304cm; //Monster size and type subtext
 			}
 		}
 		h3 {
-			font-family    : 'ScalySansSmallCapsRemake';
-			font-size      : 0.45cm;
-			border-bottom  : 1.5px solid var(--HB_Color_HeaderText);
+			font-family   : 'ScalySansSmallCapsRemake';
+			font-size     : 0.45cm;
+			border-bottom : 1.5px solid var(--HB_Color_HeaderText);
 		}

 		//Triangle dividers
@@ -443,6 +369,8 @@ body { counter-reset : phb-page-numbers; }
 			tr { background-color : transparent; }
 			td,th { padding : 0px; }
 		}
+		//indent fix after bulleted lists
+		:is(ul,ol) + p { text-indent : 0; }

 		:last-child { margin-bottom : 0; }
 	}
@@ -452,10 +380,10 @@ body { counter-reset : phb-page-numbers; }
 		.useColumns(0.96, @fillMode: balance);
 	}

-	//*****************************
+	// *****************************
 	// *           FOOTER
 	// *****************************/
-	&:after {
+	&::after {
 		position         : absolute;
 		bottom           : 0px;
 		left             : 0px;
@@ -495,23 +423,18 @@ body { counter-reset : phb-page-numbers; }
 		color      : var(--HB_Color_Footnotes);
 		text-align : right;
 	}
-	//************************************
+	// ************************************
 	// *           CODE BLOCKS
 	// ************************************/
 	code {
 		padding          : 0px 4px;
-		font-family      : 'Courier New', 'Courier', monospace;
-		font-size        : 0.325;
+		font-size        : 0.325cm;
 		color            : #58180D;
-		overflow-wrap    : break-word;
-		white-space      : pre-wrap;
 		background-color : #FAF7EA;
 		border-radius    : 4px;
 	}

 	pre code {
-		display             : inline-block;
-		width               : 100%;
 		padding             : 0.15cm;
 		margin-bottom       : 2px;
 		border-style        : solid;
@@ -525,26 +448,13 @@ body { counter-reset : phb-page-numbers; }
 		}
 		& + * { margin-top : 0.325cm; }
 	}
-	//*****************************
+	// *****************************
 	// *          EXTRAS
 	// *****************************/
 	hr {
 		margin     : 0px;
 		visibility : hidden;
 	}
-	.columnSplit {
-		visibility                 : hidden;
-		-webkit-column-break-after : always;
-		break-after                : always;
-		-moz-column-break-after    : always;
-	}
-	//Avoid breaking up
-	blockquote,table {
-		z-index                     : 15;
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
 	//Text indent right after table
 	table + p { text-indent : 1em; }
 	// Nested lists
@@ -552,18 +462,13 @@ body { counter-reset : phb-page-numbers; }
 		margin-bottom : 0px;
 		margin-left   : 1.5em;
 	}
-	li {
-		-webkit-column-break-inside : avoid;
-		page-break-inside           : avoid;
-		break-inside                : avoid;
-	}
 }
-//*****************************
+// *****************************
 // *         SPELL LIST
 // *****************************/
 .page .spellList {
 	.useSansSerif();
-	column-count        : 2;
+	column-count : 2;
 	ul + h5 { margin-top : 15px; }
 	p, ul {
 		font-size   : 0.352cm;
@@ -581,7 +486,7 @@ body { counter-reset : phb-page-numbers; }
 	&.wide { column-count : 4; }
 }

-//*****************************
+// *****************************
 // *       CLASS TABLE
 // *****************************/
 .page .classTable {
@@ -628,7 +533,7 @@ body { counter-reset : phb-page-numbers; }
 	}
 	h5 + table { margin-top : 0.2cm; }
 }
-//*****************************
+// *****************************
 // *    FRONT COVER PAGE
 // *****************************/
 .page:has(.frontCover) {
@@ -722,7 +627,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *    INSIDE COVER PAGE
 // *****************************/
 .page:has(.insideCover) {
@@ -767,7 +672,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *      BACK COVER
 // *****************************/
 .page:has(.backCover) {
@@ -849,10 +754,10 @@ body { counter-reset : phb-page-numbers; }
 	}
 }

-//*****************************
+// *****************************
 // *      PART COVER
-	// *****************************/
-	.page:has(.partCover) {
+// *****************************/
+.page:has(.partCover) {
 	padding-top : 0;
 	text-align  : center;
 	columns     : 1;
@@ -888,7 +793,7 @@ body { counter-reset : phb-page-numbers; }
 	}
 }

-//*****************************
+// *****************************
 // *      TABLE OF CONTENTS
 // *****************************/
 .page {
@@ -957,33 +862,25 @@ body { counter-reset : phb-page-numbers; }
 	}
 }

-//*****************************
+// *****************************
 // *    DEFINITION LISTS
 // *****************************/
 .page {
 	dl {
-		padding-left : 1em;
 		line-height  : 1.25em;
-		white-space  : pre-line;
-		& + * { margin-top : 0.17cm; }
+		& + * {	margin-top : 0.17cm; }
 	}
 	p + dl { margin-top : 0.17cm; }
 	dt {
-		display      : inline;
 		margin-right : 5px;
 		margin-left  : -1em;
 	}
-	dd {
-		display     : inline;
-		margin-left : 0px;
-		text-indent : 0px;
-	}
 }

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

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

@@ -1022,7 +919,7 @@ body { counter-reset : phb-page-numbers; }
 		}
 	}
 }
-//*****************************
+// *****************************
 // *       INDEX
 // *****************************/
 .page {
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -111,6 +111,21 @@ module.exports = [
 				icon : 'fas fa-code',
 				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
 			},
+			{
+				name : 'Homebrewery Credit',
+				icon : 'fas fa-dice-d20',
+				gen  : function(){
+					return dedent`
+						{{homebreweryCredits
+						Made With
+						
+						{{homebreweryIcon}}
+						
+						The Homebrewery  
+						[Homebrewery.Naturalcrit.com](https://homebrewery.naturalcrit.com)
+						}}\n\n`;
+				},
+			}
 		]
 	},
 	{
@@ -289,6 +304,99 @@ module.exports = [
 			}
 		]
 	},
+	/**************** FONTS *************/
+	{
+		groupName : 'Fonts',
+		icon	  : 'fas fa-keyboard',
+		view	  : 'text',
+		snippets  : [
+			{
+				name : 'Open Sans',
+				icon : 'font OpenSans',
+				gen	 : dedent`{{font-family:OpenSans Dummy Text}}`
+			},
+			{
+				name : 'Code Bold',
+				icon : 'font CodeBold',
+				gen	 : dedent`{{font-family:CodeBold Dummy Text}}`
+			},
+			{
+				name : 'Code Light',
+				icon : 'font CodeLight',
+				gen	 : dedent`{{font-family:CodeLight Dummy Text}}`
+			},
+			{
+				name : 'Scaly Sans Remake',
+				icon : 'font ScalySansRemake',
+				gen	 : dedent`{{font-family:ScalySansRemake Dummy Text}}`
+			},
+			{
+				name : 'Book Insanity Remake',
+				icon : 'font BookInsanityRemake',
+				gen	 : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
+			},
+			{
+				name : 'Mr Eaves Remake',
+				icon : 'font MrEavesRemake',
+				gen	 : dedent`{{font-family:MrEavesRemake Dummy Text}}`
+			},
+			{
+				name: 'Solbera Imitation Remake',
+				icon: 'font SolberaImitationRemake',
+				gen: dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
+			  },
+			  {
+				name: 'Scaly Sans Small Caps Remake',
+				icon: 'font ScalySansSmallCapsRemake',
+				gen: dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
+			  },
+			  {
+				name: 'Walter Turncoat',
+				icon: 'font WalterTurncoat',
+				gen: dedent`{{font-family:WalterTurncoat Dummy Text}}`
+			  },
+			  {
+				name: 'Lato',
+				icon: 'font Lato',
+				gen: dedent`{{font-family:Lato Dummy Text}}`
+			  },
+			  {
+				name: 'Courier',
+				icon: 'font Courier',
+				gen: dedent`{{font-family:Courier Dummy Text}}`
+			  },
+			  {
+				name: 'Nodesto Caps Condensed',
+				icon: 'font NodestoCapsCondensed',
+				gen: dedent`{{font-family:NodestoCapsCondensed Dummy Text}}`
+			  },
+			  {
+				name: 'Overpass',
+				icon: 'font Overpass',
+				gen: dedent`{{font-family:Overpass Dummy Text}}`
+			  },
+			  {
+				name: 'Davek',
+				icon: 'font Davek',
+				gen: dedent`{{font-family:Davek Dummy Text}}`
+			  },
+			  {
+				name: 'Iokharic',
+				icon: 'font Iokharic',
+				gen: dedent`{{font-family:Iokharic Dummy Text}}`
+			  },
+			  {
+				name: 'Rellanic',
+				icon: 'font Rellanic',
+				gen: dedent`{{font-family:Rellanic Dummy Text}}`
+			  },
+			  {
+				name: 'Times New Roman',
+				icon: 'font TimesNewRoman',
+				gen: dedent`{{font-family:"Times New Roman" Dummy Text}}`
+			  }
+		]
+	},

 	/**************** PAGE *************/

--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -7,13 +7,9 @@
 	--HB_Color_WatercolorStain       : #000000; // Black
 }

-@page { margin: 0; }
-body {
-	counter-reset : phb-page-numbers;
-}
-*{
-	-webkit-print-color-adjust : exact;
-}
+@page { margin : 0; }
+body { counter-reset : phb-page-numbers; }
+* { -webkit-print-color-adjust : exact; }

 //*****************************
 // *    MUSTACHE DIVS/SPANS
@@ -23,9 +19,7 @@ body {
 		break-inside      : avoid;
 		display           : inline-block;
 		width             : 100%;
-		img {
-			z-index : 0;
-		}
+		img { z-index : 0; }
 	}
 	.inline-block {
 		display     : inline-block;
@@ -33,99 +27,81 @@ body {
 	}
 }

-.useColumns(@multiplier : 1, @fillMode: auto){
+.useColumns(@multiplier : 1, @fillMode: auto) {
 	column-fill          : @fillMode;
 	column-count         : 2;
 }
-.columnWrapper{
+.columnWrapper {
+	column-gap        : inherit;
 	max-height        : 100%;
 	column-span       : all;
 	columns           : inherit;
-	column-gap        : inherit;
 	column-fill       : inherit;
 }
-.page{
+.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;
+	width             : 215.9mm;
+	height            : 279.4mm;
+	padding           : 1.4cm 1.9cm 1.7cm;
 	overflow          : hidden;
+	counter-increment : phb-page-numbers;
+	background-color  : var(--HB_Color_Background);
 	text-rendering    : optimizeLegibility;
-	page-break-before : always;
-	page-break-after  : always;
 	contain           : size;
 }
-	//*****************************
-	// *            BASE
+//*****************************
+// *            BASE
 	// *****************************/
-.page{
-	p{
-		overflow-wrap : break-word;
+.page {
+	p {
 		display       : block;
+		overflow-wrap : break-word;
 	}
-	strong{
-		font-weight : bold;
-	}
-	em{
-		font-style : italic;
-	}
-	sup{
+	strong { font-weight : bold; }
+	em { font-style : italic; }
+	sup {
+		font-size      : smaller;
+		line-height    : 0;
 		vertical-align : super;
-		font-size      : smaller;
-		line-height    : 0;
 	}
-	sub{
-		vertical-align : sub;
+	sub {
 		font-size      : smaller;
 		line-height    : 0;
+		vertical-align : sub;
 	}
 	ul {
+		padding-left        : 1.4em;
 		list-style-position : outside; //Needed for multiline list items
 		list-style-type     : disc;
-		padding-left        : 1.4em;
 	}
 	ol {
+		padding-left        : 1.4em;
 		list-style-position : outside;
 		list-style-type     : decimal;
-		padding-left        : 1.4em;
-	}
-	img{
-		z-index : -1;
 	}
+	img { z-index : -1; }

 	//*****************************
 	// *           HEADERS
 	// *****************************/
-	h1,h2,h3,h4,h5,h6{
+	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;
-	}
+	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{
+	table {
 		width : 100%;
-		thead{
+		thead {
 			display     : table-row-group;
 			font-weight : bold;
 		}
@@ -137,42 +113,40 @@ body {
 	//************************************
 	// *           CODE BLOCKS
 	// ************************************/
-	code{
-    font-family      : "Courier New", Courier, monospace;
-		white-space      : pre-wrap;
+	code {
+		font-family      : 'Courier New', "Courier", monospace;
 		overflow-wrap    : break-word;
+		white-space      : pre-wrap;
 	}

-	pre code{
-		width               : 100%;
+	pre code {
 		display             : inline-block;
+		width               : 100%;
 	}
 	//*****************************
 	// *          EXTRAS
 	// *****************************/
 	.columnSplit {
+		margin-top                 : 0;
 		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{
+	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{
+	ul ul,ol ol,ul ol,ol ul {
 		margin-bottom : 0px;
 		margin-left   : 1.5em;
 	}
-	li{
+	li {
 		-webkit-column-break-inside : avoid;
 		page-break-inside           : avoid;
 		break-inside                : avoid;
@@ -180,69 +154,66 @@ body {

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

 	/* Watercolor */
-	[class*="watercolor"] {
+	[class*='watercolor'] {
 		position            : absolute;
+		z-index             : -2;
 		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 */
+		background-color    : var(--HB_Color_WatercolorStain);			/* default color */
+		background-size     : cover;
 		-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;
+		--wc                : @watercolor1;         /* default image */
 	}

-	.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; }
+	.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"] {
+	[class*='imageMask'] {
 		position              : absolute;
-		height                : 200%;
-		width                 : 200%;
-		left                  : 50%;
 		bottom                : 50%;
-		--rotation            : 0;
-		--revealer            : none;
-		--checkerboard        : none;
-		--scaleX              : 1;
-		--scaleY              : 1;
+		left                  : 50%;
+		z-index               : -1;
+		width                 : 200%;
+		height                : 200%;
+		background-image      : var(--checkerboard);
+		background-size       : 20px;
+		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-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
@@ -251,61 +222,63 @@ body {
 		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));
+		--rotation            : 0;
+		--revealer            : none;
+		--checkerboard        : none;
+		--scaleX              : 1;
+		--scaleY              : 1;
 		& > p:has(img) {
 			position   : absolute;
-			width      : 50%;
-			height     : 50%;
 			bottom     : 50%;
 			left       : 50%;
+			width      : 50%;
+			height     : 50%;
 			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
 		}
 		& img {
 			position : absolute;
-			display  : block;
 			bottom   : 0;
+			display  : block;
 		}
 		&.bottom {
 			--rotation : 0;
-			& img {bottom: 0;}
+			& img {bottom : 0;}
 		}
 		&.top {
 			--rotation : 180;
-			& img {top: 0;}
+			& img {top : 0;}
 		}
 		&.left {
 			--rotation : 90;
-			& img {left: 0;}
+			& img {left : 0;}
 		}
 		&.right {
 			--rotation : -90;
-			& img {right: 0;}
+			& 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
+			--revealer     : linear-gradient(0deg, rgba(0,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); }
+		&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"] {
+	[class*='imageMaskCenter'] {
+		bottom                : calc(var(--offsetY));
+		left                  : calc(var(--offsetX));
 		width                 : 100%;
 		height                : 100%;
-		left                  : calc(var(--offsetX));
-		bottom                : calc(var(--offsetY));
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : no-repeat;
 		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
@@ -314,48 +287,48 @@ body {
 		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;
+			width      : 100%;
+			height     : 100%;
 			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)));
+				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); }
+		&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));
+	[class*='imageMaskCorner'] {
 		bottom                : calc(-50% + var(--offsetY));
+		left                  : calc(-50% + var(--offsetX));
+		width                 : 200%;
+		height                : 200%;
+		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
 		-webkit-mask-image    : var(--wc), var(--revealer);
 		-webkit-mask-repeat   : no-repeat;
 		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
@@ -364,56 +337,55 @@ body {
 		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) {
+			bottom     : 25%;
+			left       : 25%;
 			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)));
+				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); }
+		&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"); }
 	}
 }

@@ -425,16 +397,16 @@ body {
 		padding-left : 1em;
 		white-space  : pre-line;
 	}
-  dt {
-    display      : inline;
-    margin-right : 0.5ch;
+	dt {
+		display      : inline;
+		margin-right : 0.5ch;
 		margin-left  : -1em;
-  }
-  dd {
+	}
+	dd {
 		display     : inline;
 		margin-left : 0;
 		text-indent : 0;
-  }
+	}
 }

 //*****************************
@@ -444,9 +416,7 @@ body {
 	.blank {
 		height     : 1em;
 		margin-top : 0;
-		& + * {
-			margin-top : 0;
-		}
+		& + * { margin-top : 0; }
 	}
 }

@@ -454,12 +424,39 @@ body {
 // *         WIDE
 // *****************************/
 .page {
-	.wide{
+	.wide {
 		column-span         : all;
 		display             : block;
 		margin-bottom       : 1em;
-		&+* {
-			margin-top : 0;
-		}
+		& + * { margin-top : 0; }
 	}
 }
+
+//*****************************
+//*        CREDITS
+//*****************************/
+.page .homebreweryCredits {
+	p {
+		font-family    : 'NodestoCapsWide';
+		font-size      : 0.4cm;
+		line-height    : 1em;
+		text-align     : center;
+		text-indent    : 0;
+		letter-spacing : 0.08em;
+	}
+	a {
+		color           : inherit;
+		text-decoration : none;
+		&:hover { text-decoration : underline; }
+	}
+	.homebreweryIcon {
+		display          : block;
+		height           : 1.5cm;
+		margin           : 0 auto;
+		background-color : black;
+		-webkit-mask     : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
+		mask             : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
+	}
+	.homebreweryIcon.red { background-color : red; }
+	.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
+}
--- a/fonts/Elderberry-Inn-Icons.woff2
+++ b/fonts/Elderberry-Inn-Icons.woff2
--- a/fonts/font-icons.less
+++ b/fonts/font-icons.less
@@ -0,0 +1,224 @@
+/* Main Font, serif */
+@font-face {
+	font-family : 'Eldeberry-Inn';
+	font-style : normal;
+	font-weight : normal;
+	src : url('../../../fonts/icon fonts/Elderberry-Inn-Icons.woff2');
+} 
+
+.page { 
+	span.ei {
+		display                 : inline-block;
+		margin-right            : 3px;
+		font-family             : 'Eldeberry-Inn';
+		line-height             : 1;
+		vertical-align          : baseline;
+		-moz-osx-font-smoothing : grayscale;
+		-webkit-font-smoothing  : antialiased;
+		text-rendering          : auto;
+
+		&.book::before { content : '\E900'; } 
+		&.screen::before { content : '\E901'; } 
+
+		/* Spell levels */ 
+		&.spell-0::before { content : '\E902'; } 
+		&.spell-1::before { content : '\E903'; } 
+		&.spell-2::before { content : '\E904'; } 
+		&.spell-3::before { content : '\E905'; } 
+		&.spell-4::before { content : '\E906'; } 
+		&.spell-5::before { content : '\E907'; } 
+		&.spell-6::before { content : '\E908'; } 
+		&.spell-7::before { content : '\E909'; } 
+		&.spell-8::before { content : '\E90A'; } 
+		&.spell-9::before { content : '\E90B'; }
+
+		/* Damage types */ 
+		&.acid::before { content : '\E90C'; } 
+		&.bludgeoning::before { content : '\E90D'; } 
+		&.cold::before { content : '\E90E'; } 
+		&.fire::before { content : '\E90F'; } 
+		&.force::before { content : '\E910'; } 
+		&.lightning::before { content : '\E911'; } 
+		&.necrotic::before { content : '\E912'; } 
+		&.piercing::before { content : '\E914'; } 
+		&.poison::before { content : '\E913'; } 
+		&.psychic::before { content : '\E915'; } 
+		&.radiant::before { content : '\E916'; } 
+		&.slashing::before { content : '\E917'; } 
+		&.thunder::before { content : '\E918'; }
+
+		/* DnD Conditions */ 
+		&.blinded::before { content : '\E919'; } 
+		&.charmed::before { content : '\E91A'; } 
+		&.deafened::before { content : '\E91B'; } 
+		&.exhaust-1::before { content : '\E91C'; } 
+		&.exhaust-2::before { content : '\E91D'; } 
+		&.exhaust-3::before { content : '\E91E'; } 
+		&.exhaust-4::before { content : '\E91F'; } 
+		&.exhaust-5::before { content : '\E920'; } 
+		&.exhaust-6::before { content : '\E921'; } 
+		&.frightened::before { content : '\E922'; } 
+		&.grappled::before { content : '\E923'; } 
+		&.incapacitated::before { content : '\E924'; } 
+		&.invisible::before { content : '\E926'; } 
+		&.paralyzed::before { content : '\E927'; } 
+		&.petrified::before { content : '\E928'; } 
+		&.poisoned::before { content : '\E929'; } 
+		&.prone::before { content : '\E92A'; } 
+		&.restrained::before { content : '\E92B'; } 
+		&.stunned::before { content : '\E92C'; } 
+		&.unconscious::before { content : '\E925'; }
+
+		/* Character Classes and Features */ 
+		&.barbarian-rage::before { content : '\E92D'; } 
+		&.barbarian-reckless-attack::before { content : '\E92E'; } 
+		&.bardic-inspiration::before { content : '\E92F'; } 
+		&.cleric-channel-divinity::before { content : '\E930'; } 
+		&.druid-wild-shape::before { content : '\E931'; } 
+		&.fighter-action-surge::before { content : '\E932'; } 
+		&.fighter-second-wind::before { content : '\E933'; } 
+		&.monk-flurry-blows::before { content : '\E934'; }
+		&.monk-patient-defense::before { content : '\E935'; } 
+		&.monk-step-of-the-wind::before { content : '\E936'; } 
+		&.monk-step-of-the-wind-2::before { content : '\E937'; } 
+		&.monk-step-of-the-wind-3::before { content : '\E938'; }
+		&.monk-stunning-strike::before { content : '\E939'; }
+		&.monk-stunning-strike-2::before { content : '\E939'; } 
+		&.paladin-divine-smite::before { content : '\E93B'; } 
+		&.paladin-lay-on-hands::before { content : '\E93C'; } 
+		&.barbarian-abilities::before { content : '\E93D'; } 
+		&.barbarian::before { content : '\E93E'; } 
+		&.bard-abilities::before { content : '\E93F'; } 
+		&.bard::before { content : '\E940'; } 
+		&.cleric-abilities::before { content : '\E941'; } 
+		&.cleric::before { content : '\E942'; } 
+		&.druid-abilities::before { content : '\E943'; } 
+		&.druid::before { content : '\E944'; } 
+		&.fighter-abilities::before { content : '\E945'; } 
+		&.fighter::before { content : '\E946'; } 
+		&.monk-abilities::before { content : '\E947'; } 
+		&.monk::before { content : '\E948'; } 
+		&.paladin-abilities::before { content : '\E949'; } 
+		&.paladin::before { content : '\E94A'; } 
+		&.ranger-abilities::before { content : '\E94B'; } 
+		&.ranger::before { content : '\E94C'; } 
+		&.rogue-abilities::before { content : '\E94D'; } 
+		&.rogue::before { content : '\E94E'; } 
+		&.sorcerer-abilities::before { content : '\E94F'; } 
+		&.sorcerer::before { content : '\E950'; } 
+		&.warlock-abilities::before { content : '\E951'; } 
+		&.warlock::before { content : '\E952'; } 
+		&.wizard-abilities::before { content : '\E953'; } 
+		&.wizard::before { content : '\E954'; }
+
+		/* Types of actions */ 
+		&.movement::before { content : '\E955'; } 
+		&.action::before { content : '\E956'; } 
+		&.bonus-action::before { content : '\E957'; } 
+		&.reaction::before { content : '\E958'; } 
+
+		/* SRD Spells */ 
+		&.acid-arrow::before { content : '\E959'; } 
+		&.action-1::before { content : '\E95A'; } 
+		&.alter-self::before { content : '\E95B'; } 
+		&.alter-self-2::before { content : '\E95C'; } 
+		&.animal-friendship::before { content : '\E95E'; } 
+		&.animate-dead::before { content : '\E95F'; } 
+		&.animate-objects::before { content : '\E960'; } 
+		&.animate-objects-2::before { content : '\E961'; } 
+		&.bane::before { content : '\E962'; } 
+		&.bless::before { content : '\E963'; }
+		&.blur::before { content : '\E964'; }
+		&.bonus::before { content : '\E965'; }
+		&.branding-smite::before { content : '\E966'; }
+		&.burning-hands::before { content : '\E967'; }
+		&.charm-person::before { content : '\E968'; }
+		&.chill-touch::before { content : '\E969'; }
+		&.cloudkill::before { content : '\E96A'; }
+		&.comprehend-languages::before { content : '\E96B'; }
+		&.cone-of-cold::before { content : '\E96C'; }
+		&.conjure-elemental::before { content : '\E96D'; }
+		&.conjure-minor-elemental::before { content : '\E96E'; }
+		&.control-water::before { content : '\E96F'; }
+		&.counterspell::before { content : '\E970'; }
+		&.cure-wounds::before { content : '\E971'; }
+		&.dancing-lights::before { content : '\E972'; }
+		&.darkness::before { content : '\E973'; }
+		&.detect-magic::before { content : '\E974'; }
+		&.disguise-self::before { content : '\E975'; }
+		&.disintegrate::before { content : '\E976'; }
+		&.dispel-evil-and-good::before { content : '\E977'; }
+		&.dispel-magic::before { content : '\E978'; }
+		&.dominate-monster::before { content : '\E979'; }
+		&.dominate-person::before { content : '\E97A'; }
+		&.eldritch-blast::before { content : '\E97B'; }
+		&.enlarge-reduce::before { content : '\E97C'; }
+		&.entangle::before { content : '\E97D'; }
+		&.faerie-fire::before { content : '\E97E'; }
+		&.faerie-fire2::before { content : '\E97F'; }
+		&.feather-fall::before { content : '\E980'; }
+		&.find-familiar::before { content : '\E981'; }
+		&.finger-of-death::before { content : '\E982'; } 
+		&.fireball::before { content : '\E983'; } 
+		&.floating-disk::before { content : '\E984'; } 
+		&.fly::before { content : '\E985'; } 
+		&.fog-cloud::before { content : '\E986'; } 
+		&.gaseous-form::before { content : '\E987'; } 
+		&.gaseous-form2::before { content : '\E988'; } 
+		&.gentle-repose::before { content : '\E989'; } 
+		&.gentle-repose2::before { content : '\E98A'; } 
+		&.globe-of-invulnerability::before { content : '\E98B'; } 
+		&.guiding-bolt::before { content : '\E98C'; } 
+		&.healing-word::before { content : '\E98D'; } 
+		&.heat-metal::before { content : '\E98E'; } 
+		&.hellish-rebuke::before { content : '\E98F'; } 
+		&.heroes-feast::before { content : '\E990'; } 
+		&.heroism::before { content : '\E991'; } 
+		&.hideous-laughter::before { content : '\E992'; } 
+		&.identify::before { content : '\E993'; } 
+		&.illusory-script::before { content : '\E994'; } 
+		&.inflict-wounds::before { content : '\E995'; } 
+		&.light::before { content : '\E996'; } 
+		&.longstrider::before { content : '\E997'; } 
+		&.mage-armor::before { content : '\E998'; } 
+		&.mage-hand::before { content : '\E999'; } 
+		&.magic-missile::before { content : '\E99A'; } 
+		&.mass-cure-wounds::before { content : '\E99B'; } 
+		&.mass-healing-word::before { content : '\E99C'; } 
+		&.Mending::before { content : '\E99D'; } 
+		&.message::before { content : '\E99E'; } 
+		&.Minor-illusion::before { content : '\E99F'; } 
+		&.movement1::before { content : '\E9A0'; } 
+		&.polymorph::before { content : '\E9A1'; } 
+		&.power-word-kill::before { content : '\E9A2'; } 
+		&.power-word-stun::before { content : '\E9A3'; } 
+		&.prayer-of-healing::before { content : '\E9A4'; } 
+		&.prestidigitation::before { content : '\E9A5'; } 
+		&.protection-from-evil-and-good::before { content : '\E9A6'; } 
+		&.raise-read::before { content : '\E9A7'; } 
+		&.raise-read2::before { content : '\E9A8'; } 
+		&.reaction1::before { content : '\E9A9'; } 
+		&.resurrection::before { content : '\E9AA'; } 
+		&.resurrection2::before { content : '\E9AB'; } 
+		&.revivify::before { content : '\E9AC'; } 
+		&.revivify2::before { content : '\E9AD'; } 
+		&.sacred-flame::before { content : '\E9AE'; } 
+		&.sanctuary::before { content : '\E9AF'; } 
+		&.scorching-ray::before { content : '\E9B0'; } 
+		&.sending::before { content : '\E9B1'; } 
+		&.shatter::before { content : '\E9B2'; } 
+		&.shield::before { content : '\E9B3'; } 
+		&.silent-image::before { content : '\E9B4'; } 
+		&.sleep::before { content : '\E9B5'; } 
+		&.speak-with-animals::before { content : '\E9B6'; } 
+		&.telekinesis::before { content : '\E9B7'; } 
+		&.true-strike::before { content : '\E9B8'; } 
+		&.vicious-mockery::before { content : '\E9B9'; } 
+		&.wall-of-fire::before { content : '\E9BA'; } 
+		&.wall-of-force::before { content : '\E9BB'; } 
+		&.wall-of-ice::before { content : '\E9BC'; } 
+		&.wall-of-stone::before { content : '\E9BD'; } 
+		&.wall-of-thorns::before { content : '\E9BE'; } 
+		&.wish::before { content : '\E9BF'; } 
+	}
+}