formatted css, removed iframe print function, replaced with print.window(), add @media css to storeUI.html that print's only brewRenderer

app.py

@@ -33,11 +33,6 @@ def apply_headers(response):
     response.headers["Cross-Origin-Opener-Policy"] = "same-origin-allow-popups"
     return response
 
-# # Default route for index
-# @app.route('/')
-# def index():
-#     return send_from_directory('.', 'storeUI.html')  # Make sure this points to your main HTML file
-
 @app.route('/')
 def index():
     css_files = {
@@ -50,7 +45,6 @@ def index():
     }
     return render_template('storeUI.html', css_files=css_files)
 
-
 CORS(app)# Route to handle the incoming POST request with user description
 
 @app.route('/process-description', methods=['POST'])
@@ -84,17 +78,6 @@ def generate_image():
         return jsonify({'image_url': image_url})
     except Exception as e:
         return jsonify({'error': str(e)}), 500
-    
-# New route to convert HTML to PDF
-@app.route('/proxy.html', methods=['POST'])
-def proxy():
-    data = request.json
-    html_content = data.get('htmlContent', '')
-    print(f"Received HTML content: {html_content}")
-
-    # Render the proxy HTML with the provided content
-    return render_template('proxy.html', html_content=html_content)
-
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=True)  # Run the app on localhost, port 7860

scripts.js

@@ -98,7 +98,7 @@ document.addEventListener("DOMContentLoaded", function() {
             // Handle print button click
             if (event.target.id === 'printButton') {
                 console.log('Print button clicked. Element ID:', event.target.id);
-                openPrintModal();
+                printScreen();
             }
     
             // Handle generate image button click
@@ -190,65 +190,12 @@ document.addEventListener("DOMContentLoaded", function() {
         console.log('Autofill complete, all blocks moved to page-container');
     }
 
-    // This works in principal when deployed. It looks like shit but it does function. 
-    function openPrintModal() {
-        // Clone the original content before modifying
-        originalContent = document.body.cloneNode(true);
-        var brewRendererContent = document.getElementById('brewRenderer').innerHTML;
-
-        // Create a hidden iframe or select an existing one
-        var printIframe = document.createElement('iframe');
-        printIframe.style.position = 'fixed';
-        printIframe.style.width = '0px';
-        printIframe.style.height = '0px';
-        printIframe.style.border = 'none'; // Make the iframe invisible
-        document.body.appendChild(printIframe);
-        // Write the modal content to the iframe
-        var iframeDoc = printIframe.contentWindow.document;
-        iframeDoc.open();
-
-        fetch('/proxy.html', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ htmlContent: brewRendererContent }),
-        })
-        .then(response => response.text())
-        .then(html => {
-            document.getElementById('modalPreviewContent').innerHTML = html;
-
-            var modal = document.getElementById('printModal');
-            modal.style.display = "block";
-
-            document.getElementById('print-button').onclick = function() {
-                printIframe.contentWindow.print();
-            };
-
-            document.getElementById('cancel-button').onclick = function() {
-                closePrintModal();
-            };
-
-            document.getElementsByClassName('close')[0].onclick = function() {
-                closePrintModal();
-            };
-            iframeDoc.write(document.getElementById('modalPreviewContent').innerHTML);
-            iframeDoc.close();
-             // Wait for the content to load, then trigger the print dialog
-        printIframe.contentWindow.focus();
-        printIframe.contentWindow.print();
-        })
-        
-        .catch(error => {
-            console.error('Error loading the print preview:', error);
-        });
+    // This works in principal when deployed. It looks like shit but it does function. Still can't print but it is in an iframe. 
+    function printScreen() {
+        window.print()
     }
 
-    function closePrintModal() {
-        var modal = document.getElementById('printModal');
-        modal.style.display = "none";
-        document.getElementById('modalPreviewContent').innerHTML = '';
-    }
+    
 
     // Store initial positions of the blocks
     function storeInitialPositions() {

static/5ePHBstyle.css

@@ -1,20 +1,1505 @@
-@font-face{font-family:BookInsanityRemake;src:url('./themes/fonts/5e/Bookinsanity.woff2');font-weight:normal;font-style:normal}@font-face{font-family:BookInsanityRemake;src:url('./themes/fonts/5e/Bookinsanity Bold.woff2');font-weight:bold;font-style:normal}@font-face{font-family:BookInsanityRemake;src:url('./themes/fonts/5e/Bookinsanity Italic.woff2');font-weight:normal;font-style:italic}@font-face{font-family:BookInsanityRemake;src:url('./themes/fonts/5e/Bookinsanity Bold Italic.woff2');font-weight:bold;font-style:italic}@font-face{font-family:ScalySansRemake;src:url('./themes/fonts/5e/Scaly Sans.woff2');font-weight:normal;font-style:normal}@font-face{font-family:ScalySansRemake;src:url('./themes/fonts/5e/Scaly Sans Bold.woff2');font-weight:bold;font-style:normal}@font-face{font-family:ScalySansRemake;src:url('./themes/fonts/5e/Scaly Sans Italic.woff2');font-weight:normal;font-style:italic}@font-face{font-family:ScalySansRemake;src:url('./themes/fonts/5e/Scaly Sans Bold Italic.woff2');font-weight:bold;font-style:italic}@font-face{font-family:ScalySansSmallCapsRemake;src:url('./themes/fonts/5e/Scaly Sans Caps.woff2');font-weight:normal;font-style:normal}@font-face{font-family:WalterTurncoat;src:url('./themes/fonts/5e/WalterTurncoat-Regular.woff2');font-weight:normal;font-style:normal}@font-face{font-family:MrEavesRemake;src:url('./themes/fonts/5e/Mr Eaves Small Caps.woff2');font-weight:normal;font-style:normal}@font-face{font-family:SolberaImitationRemake;src:url('./themes/fonts/5e/Solbera Imitation Tweak.woff2');font-weight:normal;font-style:normal}@font-face{font-family:NodestoCapsCondensed;src:url('./themes/fonts/5e/Nodesto Caps Condensed.woff2');font-weight:normal;font-style:normal}@font-face{font-family:NodestoCapsCondensed;src:url('./themes/fonts/5e/Nodesto Caps Condensed Bold.woff2');font-weight:bold;font-style:normal}@font-face{font-family:NodestoCapsCondensed;src:url('./themes/fonts/5e/Nodesto Caps Condensed Italic.woff2');font-weight:normal;font-style:italic}@font-face{font-family:NodestoCapsCondensed;src:url('./themes/fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');font-weight:bold;font-style:italic}@font-face{font-family:NodestoCapsWide;src:url('./themes/fonts/5e/Nodesto Caps Wide.woff2');font-weight:normal;font-style:normal}@font-face{font-family:Overpass;src:url('./themes/fonts/5e/Overpass Medium.woff2');font-weight:500;font-style:normal}@font-face{font-family:Davek;src:url('./themes/fonts/5e/Davek.woff2');font-weight:500;font-style:normal}@font-face{font-family:Iokharic;src:url('./themes/fonts/5e/Iokharic.woff2');font-weight:500;font-style:normal}@font-face{font-family:Rellanic;src:url('./themes/fonts/5e/Rellanic.woff2');font-weight:500;font-style:normal}:root{--HB_Color_Background:#EEE5CE;--HB_Color_Accent:#E0E5C1;--HB_Color_HeaderUnderline:#C0AD6A;--HB_Color_HorizontalRule:#9C2B1B;--HB_Color_HeaderText:#58180D;--HB_Color_MonsterStatBackground:#F2E5B5;--HB_Color_CaptionText:#766649;--HB_Color_WatercolorStain:#BBAD82;--HB_Color_Footnotes:#C9AD6A}@page{margin:0}body{counter-reset:phb-page-numbers}*{-webkit-print-color-adjust:exact}.columnWrapper{column-gap:inherit;max-height:100%;column-span:all;columns:inherit}.page{column-count:2;column-fill:auto;column-gap:.9cm;column-width:8cm;-webkit-column-count:2;-moz-column-count:2;-webkit-column-width:8cm;-moz-column-width:8cm;-webkit-column-gap:.9cm;-moz-column-gap:.9cm;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:.34cm;counter-increment:phb-page-numbers;background-color:var(--HB_Color_Background);background-image:url('./themes/assets/parchmentBackground.jpg');text-rendering:optimizeLegibility;page-break-before:always;page-break-after:always}.page p{display:block;line-height:1.25em;overflow-wrap:break-word}.page p+*{margin-top:.325cm}.page p+p{margin-top:0}.page ul{padding-left:1.4em;margin-bottom:.8em;line-height:1.25em;list-style-position:outside;list-style-type:disc}.page ol{padding-left:1.4em;margin-bottom:.8em;line-height:1.25em;list-style-position:outside;list-style-type:decimal}.page p+p,.page ul+p,.page ol+p{text-indent:1em}.page img{z-index:-1}.page strong{font-weight:bold;letter-spacing:-0.02em}.page em{font-style:italic}.page sup{font-size:smaller;line-height:0;vertical-align:super}.page sub{font-size:smaller;line-height:0;vertical-align:sub}.page h1,.page h2,.page h3,.page h4{font-family:"MrEavesRemake";font-weight:800;color:var(--HB_Color_HeaderText)}.page h1{margin-bottom:.18cm;column-span:all;font-size:.89cm;line-height:1em;-webkit-column-span:all;-moz-column-span:all}.page h1+p::first-letter{float:left;padding-bottom:2px;padding-left:40px;margin-top:-0.3cm;margin-bottom:-20px;margin-left:-40px;font-family:"SolberaImitationRemake";font-size:3.5cm;line-height:1em;color:rgba(0,0,0,0);background-image:linear-gradient(-45deg, #322814, #998250, #322814);-webkit-background-clip:text;background-clip:text}.page h1+p::first-line{font-variant:small-caps}.page h2{font-size:.75cm;line-height:.988em}.page h3{font-size:.575cm;line-height:.995em;border-bottom:2px solid var(--HB_Color_HeaderUnderline)}.page h3+*{margin-top:.17cm}.page *+h3{margin-top:.155cm}.page h4{font-size:.458cm;line-height:.971em}.page h4+*{margin-top:.09cm}.page *+h4{margin-top:.235cm}.page h5{font-family:"ScalySansSmallCapsRemake";font-size:.423cm;font-weight:900;line-height:.951em}.page h5+*{margin-top:.2cm}.page table{font-family:"ScalySansRemake";font-size:.318cm;line-height:1.2em;width:100%;line-height:16px}.page table p,.page table dl,.page table ul,.page table ol{line-height:1.2em}.page table ul,.page table ol{padding-left:1em}.page table em{font-style:italic}.page table strong{font-weight:800;letter-spacing:-0.02em}.page table h5+*{margin-top:.1cm}.page table+*{margin-top:.325cm}.page table thead{display:table-row-group;font-weight:800}.page table thead th{padding:0 1.5px;vertical-align:bottom}.page table tbody tr td{padding:0 1.5px}.page table tbody tr:nth-child(odd){background-color:var(--HB_Color_Accent)}.page .quote>p{font-style:italic;line-height:.54cm}.page .quote>p:first-child::first-line{font-size:.38cm;font-style:normal;font-variant:small-caps}.page .quote p+.attribution{margin-top:0}.page .quote .attribution{display:block;font-style:normal;line-height:.54cm;text-align:right}.page .quote .attribution::before{margin-right:.2em;content:'---'}.page .quote+*{margin-top:.54cm}.page .note{font-family:"ScalySansRemake";font-size:.318cm;line-height:1.2em;padding:.13cm .16cm;background-color:var(--HB_Color_Accent);border-style:solid;border-width:1px;border-image:url('../dependencies/themes/assets/noteBorder.png') 12 stretch;border-image-width:11px;border-image-outset:9px 0px;box-shadow:1px 4px 14px #888888}.page .note p,.page .note dl,.page .note ul,.page .note ol{line-height:1.2em}.page .note ul,.page .note ol{padding-left:1em}.page .note em{font-style:italic}.page .note strong{font-weight:800;letter-spacing:-0.02em}.page .note h5+*{margin-top:.1cm}.page :where(.page .note){margin-top:9px}.page .note+*{margin-top:.45cm}.page .note h5{font-size:.375cm}.page .note p{display:block;padding-bottom:0px}.page .note :last-child{margin-bottom:0}.page .descriptive{font-family:"ScalySansRemake";font-size:.318cm;line-height:1.2em;padding:.1em;background-color:#FAF7EA;border-style:solid;border-width:7px;border-image:url('themes/assets/descriptiveBorder.png') 12 stretch;border-image-outset:4px;box-shadow:0 0 6px #FAF7EA}.page .descriptive p,.page .descriptive dl,.page .descriptive ul,.page .descriptive ol{line-height:1.2em}.page .descriptive ul,.page .descriptive ol{padding-left:1em}.page .descriptive em{font-style:italic}.page .descriptive strong{font-weight:800;letter-spacing:-0.02em}.page .descriptive h5+*{margin-top:.1cm}.page :where(.page .descriptive){margin-top:4px}.page .descriptive+*{margin-top:.45cm}.page .descriptive h5{font-size:.375cm}.page .descriptive p{display:block;padding-bottom:0px;line-height:1.5em}.page .descriptive :last-child{margin-bottom:0}.page .artist{position:absolute;width:auto;font-family:"WalterTurncoat";font-size:.27cm;color:var(--HB_Color_CaptionText);text-align:center}.page .artist p,.page .artist p+p{margin:unset;line-height:1em;text-indent:unset}.page .artist h5{font-family:"WalterTurncoat";font-size:1.3em}.page .artist a{color:inherit;text-decoration:unset}.page .artist a:hover{text-decoration:underline}.page .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)}.page .watermark p{margin-bottom:none}.page [class*='watercolor']{position:absolute;z-index:-2;width:2000px;height:2000px;background-color:var(--HB_Color_WatercolorStain);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:url('/assets/watercolor/watercolor1.png')}.page .watercolor1{--wc:url('/assets/watercolor/watercolor1.png')}.page .watercolor2{--wc:url('/assets/watercolor/watercolor2.png')}.page .watercolor3{--wc:url('/assets/watercolor/watercolor3.png')}.page .watercolor4{--wc:url('/assets/watercolor/watercolor4.png')}.page .watercolor5{--wc:url('/assets/watercolor/watercolor5.png')}.page .watercolor6{--wc:url('/assets/watercolor/watercolor6.png')}.page .watercolor7{--wc:url('/assets/watercolor/watercolor7.png')}.page .watercolor8{--wc:url('/assets/watercolor/watercolor8.png')}.page .watercolor9{--wc:url('/assets/watercolor/watercolor9.png')}.page .watercolor10{--wc:url('/assets/watercolor/watercolor10.png')}.page .watercolor11{--wc:url('/assets/watercolor/watercolor11.png')}.page .watercolor12{--wc:url('/assets/watercolor/watercolor12.png')}.page .monster{font-family:"ScalySansRemake";font-size:.318cm;line-height:1.2em;position:relative;padding:0px;margin-bottom:.325cm}.page .monster p,.page .monster dl,.page .monster ul,.page .monster ol{line-height:1.2em}.page .monster ul,.page .monster ol{padding-left:1em}.page .monster em{font-style:italic}.page .monster strong{font-weight:800;letter-spacing:-0.02em}.page .monster h5+*{margin-top:.1cm}.page .monster.frame{width:calc(100% + .32cm);padding:4px 2px;margin-right:-0.16cm;margin-left:-0.16cm;background-color:var(--HB_Color_MonsterStatBackground);background-image:url('./themes/assets/parchmentBackgroundGrayscale.jpg');background-attachment:fixed;background-blend-mode:overlay;border-style:solid;border-width:7px 6px;border-image:url('./themes/assets/monsterBorderFancy.png') 14 round;border-image-outset:0px 2px;box-shadow:1px 4px 14px #888888}.page .monster h2{margin:0;font-size:.62cm;line-height:1em}.page .monster h2+p{margin-bottom:0;font-size:.304cm}.page .monster h3{padding-bottom:.05cm;font-family:"ScalySansRemake";font-weight:800;font-variant:small-caps;border-bottom:2px solid var(--HB_Color_HeaderText)}.page .monster hr{height:6px;margin:.12cm 0;visibility:visible;background-image:url('./themes/assets/redTriangle.png');background-size:100% 100%;border:none}.page .monster hr~:is(dl,p){color:var(--HB_Color_HeaderText)}.page .monster hr:last-of-type~:is(dl,p){color:inherit}.page .monster hr:last-of-type+*{margin-top:.325cm}.page .monster hr+table:first-of-type{margin:0;column-span:none;color:var(--HB_Color_HeaderText);background-color:transparent;border-style:none;border-image:none;-webkit-column-span:none}.page .monster hr+table:first-of-type tr{background-color:transparent}.page .monster hr+table:first-of-type td,.page .monster hr+table:first-of-type th{padding:0px}.page .monster :last-child{margin-bottom:0}.page .monster.wide{column-count:2;column-fill:balance;column-gap:.9cm;column-width:7.68cm;-webkit-column-count:2;-moz-column-count:2;-webkit-column-width:7.68cm;-moz-column-width:7.68cm;-webkit-column-gap:.9cm;-moz-column-gap:.9cm}.page:after{position:absolute;bottom:0px;left:0px;z-index:100;width:100%;height:50px;content:'';background-image:url('./themes/assets/PHB_footerAccent.png');background-size:cover}.page:nth-child(even)::after{transform:scaleX(-1)}.page:nth-child(even) .pageNumber{left:2px}.page:nth-child(even) .footnote{left:80px;text-align:left}.page .pageNumber{position:absolute;right:2px;bottom:22px;width:50px;font-size:.9em;color:var(--HB_Color_Footnotes);text-align:center;text-indent:0}.page .pageNumber.auto::after{content:counter(phb-page-numbers)}.page .footnote{position:absolute;right:80px;bottom:32px;z-index:150;width:200px;font-size:.8em;color:var(--HB_Color_Footnotes);text-align:right}.page code{padding:0px 4px;font-family:'Courier New',"Courier",monospace;font-size:.325;color:#58180D;overflow-wrap:break-word;white-space:pre-wrap;background-color:#FAF7EA;border-radius:4px}.page pre code{display:inline-block;width:100%;padding:.15cm;margin-bottom:2px;border-style:solid;border-width:1px;border-radius:12px;border-image:url('/assets/codeBorder.png') 26 stretch;border-image-width:10px;border-image-outset:2px}.page :where(.page pre code){margin-top:2px}.page pre code+*{margin-top:.325cm}.page hr{margin:0px;visibility:hidden}.page .columnSplit{visibility:hidden;-webkit-column-break-after:always;break-after:always;-moz-column-break-after:always}.page blockquote,.page table{z-index:15;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.page table+p{text-indent:1em}.page ul ul,.page ol ol,.page ul ol,.page ol ul{margin-bottom:0px;margin-left:1.5em}.page li{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.page .spellList{font-family:"ScalySansRemake";font-size:.318cm;line-height:1.2em;column-count:2}.page .spellList p,.page .spellList dl,.page .spellList ul,.page .spellList ol{line-height:1.2em}.page .spellList ul,.page .spellList ol{padding-left:1em}.page .spellList em{font-style:italic}.page .spellList strong{font-weight:800;letter-spacing:-0.02em}.page .spellList h5+*{margin-top:.1cm}.page .spellList ul+h5{margin-top:15px}.page .spellList p,.page .spellList ul{font-size:.352cm;line-height:1.265em}.page .spellList ul{padding-left:1em;margin-bottom:.5em;text-indent:-1em;list-style-type:none;-webkit-column-break-inside:auto;page-break-inside:auto;break-inside:auto}.page .spellList.wide{column-count:4}
-.page .classTable th[colspan]:not([rowspan]){white-space:nowrap}
-.page .classTable.frame{width:calc(100% + .2cm);
-    margin-top:.7cm;
-    margin-right:-0.1cm;
-    margin-bottom:.9cm;
-    margin-left:-0.1cm;
-    border-collapse:separate;
-    background-color:white;
-    border:initial;
-    border-style:solid;
-    border-image-source:url('../dependencies/themes/assets/frameBorder.png');
-    border-image-slice:200;
-    border-image-width:47px;
-    border-image-outset:.4cm .3cm;
-    border-image-repeat:stretch}
-.page.classTable.frame.wide:first-child{margin-top:.12cm}
-.page .classTable.frame+*{margin-top:0}
-.page .classTable.decoration{position:relative}
-.page .classTable.decoration::before{position:absolute;top:50%;left:50%;z-index:-1;width:7.75cm;height:calc(100% + 3.3cm);content:'';background-image:url('../../dependencies/assets/classTableDecoration.png'),url('/assets/classTableDecoration.png');filter:drop-shadow(0 0 1px #C8C5C080);background-repeat:no-repeat,no-repeat;background-position:top, bottom;background-size:contain, contain;transform:translateY(-50%) translateX(-50%)}.page .classTable.decoration.wide::before{width:calc(100% + 3.3cm);height:7.75cm;background-position:left, right}.page .classTable h5+table{margin-top:.2cm}.page:has(.frontCover){columns:1;text-align:center}.page:has(.frontCover)::after{all:unset}.page:has(.frontCover) h1{margin-top:1.2cm;margin-bottom:0;font-family:"NodestoCapsCondensed";font-size:2.245cm;font-weight:normal;line-height:.85em;color:white;text-shadow:unset;text-transform:uppercase;filter:drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)}.page:has(.frontCover) h2{font-family:"NodestoCapsCondensed";font-size:.85cm;font-weight:normal;color:white;letter-spacing:.1cm;filter:drop-shadow(0 0 1px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)}.page:has(.frontCover) hr{position:relative;display:block;width:12cm;height:.5cm;margin:auto;visibility:visible;background-image:url('/assets/horizontalRule.svg');filter:drop-shadow(0 0 3px black);background-size:100% 100%;border:none}.page:has(.frontCover) .banner{position:absolute;bottom:4.2cm;left:0;display:flex;flex-direction:column;justify-content:center;width:10.5cm;height:1.7cm;padding-top:.1cm;padding-left:1cm;font-family:"NodestoCapsCondensed";font-size:1cm;font-weight:normal;color:white;text-align:left;letter-spacing:.014cm;background-image:url('/assets/coverPageBanner.svg');filter:drop-shadow(2px 2px 2px black)}.page:has(.frontCover) .footnote{position:absolute;right:0;bottom:1.3cm;left:0;width:70%;margin-right:auto;margin-left:auto;font-family:"Overpass";font-size:.496cm;color:white;text-align:center;filter:drop-shadow(0 0 .7px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)}.page:has(.frontCover) .logo{position:absolute;top:.5cm;right:0;left:0;filter:drop-shadow(0 0 .075cm black)}.page:has(.frontCover) .logo img{width:100%;height:2cm}.page:has(.insideCover){columns:1;text-align:center}.page:has(.insideCover)::after{all:unset}.page:has(.insideCover) h1{margin-top:1.2cm;margin-bottom:0;font-family:"NodestoCapsCondensed";font-size:2.1cm;font-weight:normal;line-height:.85em;text-transform:uppercase}.page:has(.insideCover) h2{font-family:"NodestoCapsCondensed";font-size:.85cm;font-weight:normal;letter-spacing:.5cm}.page:has(.insideCover) hr{position:relative;display:block;width:12cm;height:.5cm;margin:auto;visibility:visible;background-image:url('/assets/horizontalRule.svg');background-size:100% 100%;border:none}.page:has(.insideCover) .logo{position:absolute;right:0;bottom:1cm;left:0;height:2cm}.page:has(.insideCover) .logo img{width:100%;height:2cm}.page:has(.backCover){padding:2.25cm 1.3cm 2cm 1.3cm;color:#FFFFFF;columns:1}.page:has(.backCover)::after{all:unset}.page:has(.backCover) .columnWrapper{width:7.6cm}.page:has(.backCover) .backCover{position:absolute;inset:0;z-index:-1;width:11cm;background-image:url('/assets/backCover.png');background-repeat:no-repeat;background-size:contain}.page:has(.backCover) .blank{height:1.4em}.page:has(.backCover) h1{margin-bottom:.3cm;font-family:"NodestoCapsCondensed";font-size:1.35cm;line-height:.95em;color:#ED1C24;text-align:center}.page:has(.backCover) h1+p::first-line,.page:has(.backCover) h1+p::first-letter{all:unset}.page:has(.backCover) img{position:absolute;top:0px;z-index:-2;height:100%}.page:has(.backCover) hr{width:4.5cm;height:.53cm;margin-top:1.1cm;margin-right:auto;margin-left:auto;visibility:visible;background-image:url('/assets/horizontalRule.svg');background-size:100% 100%;border:none}.page:has(.backCover) p{font-family:"Overpass";font-size:.332cm;line-height:1.5em}.page:has(.backCover) hr+p{margin-top:.6cm;text-align:center}.page:has(.backCover) .logo{position:absolute;bottom:2cm;left:1.2cm;z-index:0;width:7.6cm;height:1.5cm}.page:has(.backCover) .logo img{position:relative;z-index:0;width:100%;height:1.5cm}.page:has(.backCover) .logo p{position:relative;width:100%;font-family:"NodestoCapsWide";font-size:.4cm;line-height:1em;color:#FFFFFF;text-align:center;text-indent:0;letter-spacing:.08em}.page:has(.partCover){padding-top:0;text-align:center;columns:1}.page:has(.partCover) .partCover{position:absolute;top:0;left:0;width:100%;height:6cm;background-image:url('/assets/partCoverHeaderPHB.png');background-repeat:no-repeat;background-size:100%}.page:has(.partCover) h1{position:relative;margin-top:.4cm;font-family:"NodestoCapsCondensed";font-size:2.3cm;text-align:center;text-transform:uppercase}.page:has(.partCover) h2{position:relative;margin-top:-0.7em;margin-right:auto;margin-left:auto;font-family:"Overpass";font-size:.45cm;line-height:1.1em}.page:has(.toc)::after{display:none}.page .toc{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid}.page .toc h1{margin-bottom:.3cm;text-align:center}.page .toc a{display:inline;color:inherit;text-decoration:none}.page .toc a:hover{text-decoration:underline}.page .toc h4{margin-top:.2cm;line-height:.4cm}.page .toc h4+ul li{line-height:1.2em}.page .toc ul{padding-left:0;margin-top:0;list-style-type:none}.page .toc ul a{display:flex;flex-flow:row nowrap;justify-content:space-between;width:100%}.page .toc ul li+li h3{margin-top:.26cm;line-height:1em}.page .toc ul h3 span:first-child::after{border:none}.page .toc ul span{display:contents}.page .toc ul span:first-child::after{bottom:.08cm;flex:1;margin-right:.16cm;margin-bottom:.08cm;margin-left:.08cm;content:'';border-bottom:.05cm dotted #000000}.page .toc ul span:last-child{display:inline-block;align-self:flex-end;font-family:'BookInsanityRemake';font-size:.34cm;font-weight:normal;color:#000000}.page .toc ul ul{margin-left:1em}.page .toc.wide{column-count:2;column-fill:balance;column-gap:.9cm;column-width:7.68cm;-webkit-column-count:2;-moz-column-count:2;-webkit-column-width:7.68cm;-moz-column-width:7.68cm;-webkit-column-gap:.9cm;-moz-column-gap:.9cm}.page dl{padding-left:1em;line-height:1.25em;white-space:pre-line}.page dl+*{margin-top:.28cm}.page dl+*{margin-top:.17cm}.page p+dl{margin-top:.17cm}.page dt{display:inline;margin-right:5px;margin-left:-1em}.page dd{display:inline;margin-left:0px;text-indent:0px}.page .wide{margin-bottom:.325cm}.page h1+*{margin-top:0}.page .runeTable{margin-block:.7cm}.page .runeTable table{font-family:inherit}.page .runeTable table tbody tr{background:unset}.page .runeTable table th,.page .runeTable table td{width:1.3cm;height:1.3cm;font-weight:normal;text-transform:uppercase;vertical-align:middle;outline:1px solid #000000}.page .runeTable table th{font-family:"BookInsanityRemake";font-size:.45cm}.page .runeTable table td{font-size:.7cm}.page .runeTable.frame{border:initial;border-style:solid;border-image-source:url('/assets/scriptBorder.png');border-image-slice:170;border-image-width:1.4cm;border-image-outset:.45cm .35cm .4cm .4cm;border-image-repeat:stretch}.page .index{font-size:.218cm}.page .index ul ul{margin:0}.page .index ul{padding-left:0;text-indent:0;list-style-type:none}.page .index>ul>li{padding-left:1.5em;text-indent:-1.5em}
+@font-face {
+    font-family: BookInsanityRemake;
+    src: url('./themes/fonts/5e/Bookinsanity.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: BookInsanityRemake;
+    src: url('./themes/fonts/5e/Bookinsanity Bold.woff2');
+    font-weight: bold;
+    font-style: normal
+}
+
+@font-face {
+    font-family: BookInsanityRemake;
+    src: url('./themes/fonts/5e/Bookinsanity Italic.woff2');
+    font-weight: normal;
+    font-style: italic
+}
+
+@font-face {
+    font-family: BookInsanityRemake;
+    src: url('./themes/fonts/5e/Bookinsanity Bold Italic.woff2');
+    font-weight: bold;
+    font-style: italic
+}
+
+@font-face {
+    font-family: ScalySansRemake;
+    src: url('./themes/fonts/5e/Scaly Sans.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: ScalySansRemake;
+    src: url('./themes/fonts/5e/Scaly Sans Bold.woff2');
+    font-weight: bold;
+    font-style: normal
+}
+
+@font-face {
+    font-family: ScalySansRemake;
+    src: url('./themes/fonts/5e/Scaly Sans Italic.woff2');
+    font-weight: normal;
+    font-style: italic
+}
+
+@font-face {
+    font-family: ScalySansRemake;
+    src: url('./themes/fonts/5e/Scaly Sans Bold Italic.woff2');
+    font-weight: bold;
+    font-style: italic
+}
+
+@font-face {
+    font-family: ScalySansSmallCapsRemake;
+    src: url('./themes/fonts/5e/Scaly Sans Caps.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: WalterTurncoat;
+    src: url('./themes/fonts/5e/WalterTurncoat-Regular.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: MrEavesRemake;
+    src: url('./themes/fonts/5e/Mr Eaves Small Caps.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: SolberaImitationRemake;
+    src: url('./themes/fonts/5e/Solbera Imitation Tweak.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: NodestoCapsCondensed;
+    src: url('./themes/fonts/5e/Nodesto Caps Condensed.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: NodestoCapsCondensed;
+    src: url('./themes/fonts/5e/Nodesto Caps Condensed Bold.woff2');
+    font-weight: bold;
+    font-style: normal
+}
+
+@font-face {
+    font-family: NodestoCapsCondensed;
+    src: url('./themes/fonts/5e/Nodesto Caps Condensed Italic.woff2');
+    font-weight: normal;
+    font-style: italic
+}
+
+@font-face {
+    font-family: NodestoCapsCondensed;
+    src: url('./themes/fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
+    font-weight: bold;
+    font-style: italic
+}
+
+@font-face {
+    font-family: NodestoCapsWide;
+    src: url('./themes/fonts/5e/Nodesto Caps Wide.woff2');
+    font-weight: normal;
+    font-style: normal
+}
+
+@font-face {
+    font-family: Overpass;
+    src: url('./themes/fonts/5e/Overpass Medium.woff2');
+    font-weight: 500;
+    font-style: normal
+}
+
+@font-face {
+    font-family: Davek;
+    src: url('./themes/fonts/5e/Davek.woff2');
+    font-weight: 500;
+    font-style: normal
+}
+
+@font-face {
+    font-family: Iokharic;
+    src: url('./themes/fonts/5e/Iokharic.woff2');
+    font-weight: 500;
+    font-style: normal
+}
+
+@font-face {
+    font-family: Rellanic;
+    src: url('./themes/fonts/5e/Rellanic.woff2');
+    font-weight: 500;
+    font-style: normal
+}
+
+:root {
+    --HB_Color_Background: #EEE5CE;
+    --HB_Color_Accent: #E0E5C1;
+    --HB_Color_HeaderUnderline: #C0AD6A;
+    --HB_Color_HorizontalRule: #9C2B1B;
+    --HB_Color_HeaderText: #58180D;
+    --HB_Color_MonsterStatBackground: #F2E5B5;
+    --HB_Color_CaptionText: #766649;
+    --HB_Color_WatercolorStain: #BBAD82;
+    --HB_Color_Footnotes: #C9AD6A
+}
+
+@page {
+    margin: 0
+}
+
+body {
+    counter-reset: phb-page-numbers
+}
+
+* {
+    -webkit-print-color-adjust: exact
+}
+
+.columnWrapper {
+    column-gap: inherit;
+    max-height: 100%;
+    column-span: all;
+    columns: inherit
+}
+
+.page {
+    column-count: 2;
+    column-fill: auto;
+    column-gap: .9cm;
+    column-width: 8cm;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    -webkit-column-width: 8cm;
+    -moz-column-width: 8cm;
+    -webkit-column-gap: .9cm;
+    -moz-column-gap: .9cm;
+    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: .34cm;
+    counter-increment: phb-page-numbers;
+    background-color: var(--HB_Color_Background);
+    background-image: url('./themes/assets/parchmentBackground.jpg');
+    text-rendering: optimizeLegibility;
+    page-break-before: always;
+    page-break-after: always
+}
+
+.page p {
+    display: block;
+    line-height: 1.25em;
+    overflow-wrap: break-word
+}
+
+.page p+* {
+    margin-top: .325cm
+}
+
+.page p+p {
+    margin-top: 0
+}
+
+.page ul {
+    padding-left: 1.4em;
+    margin-bottom: .8em;
+    line-height: 1.25em;
+    list-style-position: outside;
+    list-style-type: disc
+}
+
+.page ol {
+    padding-left: 1.4em;
+    margin-bottom: .8em;
+    line-height: 1.25em;
+    list-style-position: outside;
+    list-style-type: decimal
+}
+
+.page p+p,
+.page ul+p,
+.page ol+p {
+    text-indent: 1em
+}
+
+.page img {
+    z-index: -1
+}
+
+.page strong {
+    font-weight: bold;
+    letter-spacing: -0.02em
+}
+
+.page em {
+    font-style: italic
+}
+
+.page sup {
+    font-size: smaller;
+    line-height: 0;
+    vertical-align: super
+}
+
+.page sub {
+    font-size: smaller;
+    line-height: 0;
+    vertical-align: sub
+}
+
+.page h1,
+.page h2,
+.page h3,
+.page h4 {
+    font-family: "MrEavesRemake";
+    font-weight: 800;
+    color: var(--HB_Color_HeaderText)
+}
+
+.page h1 {
+    margin-bottom: .18cm;
+    column-span: all;
+    font-size: .89cm;
+    line-height: 1em;
+    -webkit-column-span: all;
+    -moz-column-span: all
+}
+
+.page h1+p::first-letter {
+    float: left;
+    padding-bottom: 2px;
+    padding-left: 40px;
+    margin-top: -0.3cm;
+    margin-bottom: -20px;
+    margin-left: -40px;
+    font-family: "SolberaImitationRemake";
+    font-size: 3.5cm;
+    line-height: 1em;
+    color: rgba(0, 0, 0, 0);
+    background-image: linear-gradient(-45deg, #322814, #998250, #322814);
+    -webkit-background-clip: text;
+    background-clip: text
+}
+
+.page h1+p::first-line {
+    font-variant: small-caps
+}
+
+.page h2 {
+    font-size: .75cm;
+    line-height: .988em
+}
+
+.page h3 {
+    font-size: .575cm;
+    line-height: .995em;
+    border-bottom: 2px solid var(--HB_Color_HeaderUnderline)
+}
+
+.page h3+* {
+    margin-top: .17cm
+}
+
+.page *+h3 {
+    margin-top: .155cm
+}
+
+.page h4 {
+    font-size: .458cm;
+    line-height: .971em
+}
+
+.page h4+* {
+    margin-top: .09cm
+}
+
+.page *+h4 {
+    margin-top: .235cm
+}
+
+.page h5 {
+    font-family: "ScalySansSmallCapsRemake";
+    font-size: .423cm;
+    font-weight: 900;
+    line-height: .951em
+}
+
+.page h5+* {
+    margin-top: .2cm
+}
+
+.page table {
+    font-family: "ScalySansRemake";
+    font-size: .318cm;
+    line-height: 1.2em;
+    width: 100%;
+    line-height: 16px
+}
+
+.page table p,
+.page table dl,
+.page table ul,
+.page table ol {
+    line-height: 1.2em
+}
+
+.page table ul,
+.page table ol {
+    padding-left: 1em
+}
+
+.page table em {
+    font-style: italic
+}
+
+.page table strong {
+    font-weight: 800;
+    letter-spacing: -0.02em
+}
+
+.page table h5+* {
+    margin-top: .1cm
+}
+
+.page table+* {
+    margin-top: .325cm
+}
+
+.page table thead {
+    display: table-row-group;
+    font-weight: 800
+}
+
+.page table thead th {
+    padding: 0 1.5px;
+    vertical-align: bottom
+}
+
+.page table tbody tr td {
+    padding: 0 1.5px
+}
+
+.page table tbody tr:nth-child(odd) {
+    background-color: var(--HB_Color_Accent)
+}
+
+.page .quote>p {
+    font-style: italic;
+    line-height: .54cm
+}
+
+.page .quote>p:first-child::first-line {
+    font-size: .38cm;
+    font-style: normal;
+    font-variant: small-caps
+}
+
+.page .quote p+.attribution {
+    margin-top: 0
+}
+
+.page .quote .attribution {
+    display: block;
+    font-style: normal;
+    line-height: .54cm;
+    text-align: right
+}
+
+.page .quote .attribution::before {
+    margin-right: .2em;
+    content: '---'
+}
+
+.page .quote+* {
+    margin-top: .54cm
+}
+
+.page .note {
+    font-family: "ScalySansRemake";
+    font-size: .318cm;
+    line-height: 1.2em;
+    padding: .13cm .16cm;
+    background-color: var(--HB_Color_Accent);
+    border-style: solid;
+    border-width: 1px;
+    border-image: url('../dependencies/themes/assets/noteBorder.png') 12 stretch;
+    border-image-width: 11px;
+    border-image-outset: 9px 0px;
+    box-shadow: 1px 4px 14px #888888
+}
+
+.page .note p,
+.page .note dl,
+.page .note ul,
+.page .note ol {
+    line-height: 1.2em
+}
+
+.page .note ul,
+.page .note ol {
+    padding-left: 1em
+}
+
+.page .note em {
+    font-style: italic
+}
+
+.page .note strong {
+    font-weight: 800;
+    letter-spacing: -0.02em
+}
+
+.page .note h5+* {
+    margin-top: .1cm
+}
+
+.page :where(.page .note) {
+    margin-top: 9px
+}
+
+.page .note+* {
+    margin-top: .45cm
+}
+
+.page .note h5 {
+    font-size: .375cm
+}
+
+.page .note p {
+    display: block;
+    padding-bottom: 0px
+}
+
+.page .note :last-child {
+    margin-bottom: 0
+}
+
+.page .descriptive {
+    font-family: "ScalySansRemake";
+    font-size: .318cm;
+    line-height: 1.2em;
+    padding: .1em;
+    background-color: #FAF7EA;
+    border-style: solid;
+    border-width: 7px;
+    border-image: url('themes/assets/descriptiveBorder.png') 12 stretch;
+    border-image-outset: 4px;
+    box-shadow: 0 0 6px #FAF7EA
+}
+
+.page .descriptive p,
+.page .descriptive dl,
+.page .descriptive ul,
+.page .descriptive ol {
+    line-height: 1.2em
+}
+
+.page .descriptive ul,
+.page .descriptive ol {
+    padding-left: 1em
+}
+
+.page .descriptive em {
+    font-style: italic
+}
+
+.page .descriptive strong {
+    font-weight: 800;
+    letter-spacing: -0.02em
+}
+
+.page .descriptive h5+* {
+    margin-top: .1cm
+}
+
+.page :where(.page .descriptive) {
+    margin-top: 4px
+}
+
+.page .descriptive+* {
+    margin-top: .45cm
+}
+
+.page .descriptive h5 {
+    font-size: .375cm
+}
+
+.page .descriptive p {
+    display: block;
+    padding-bottom: 0px;
+    line-height: 1.5em
+}
+
+.page .descriptive :last-child {
+    margin-bottom: 0
+}
+
+.page .artist {
+    position: absolute;
+    width: auto;
+    font-family: "WalterTurncoat";
+    font-size: .27cm;
+    color: var(--HB_Color_CaptionText);
+    text-align: center
+}
+
+.page .artist p,
+.page .artist p+p {
+    margin: unset;
+    line-height: 1em;
+    text-indent: unset
+}
+
+.page .artist h5 {
+    font-family: "WalterTurncoat";
+    font-size: 1.3em
+}
+
+.page .artist a {
+    color: inherit;
+    text-decoration: unset
+}
+
+.page .artist a:hover {
+    text-decoration: underline
+}
+
+.page .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)
+}
+
+.page .watermark p {
+    margin-bottom: none
+}
+
+.page [class*='watercolor'] {
+    position: absolute;
+    z-index: -2;
+    width: 2000px;
+    height: 2000px;
+    background-color: var(--HB_Color_WatercolorStain);
+    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: url('/assets/watercolor/watercolor1.png')
+}
+
+.page .watercolor1 {
+    --wc: url('/assets/watercolor/watercolor1.png')
+}
+
+.page .watercolor2 {
+    --wc: url('/assets/watercolor/watercolor2.png')
+}
+
+.page .watercolor3 {
+    --wc: url('/assets/watercolor/watercolor3.png')
+}
+
+.page .watercolor4 {
+    --wc: url('/assets/watercolor/watercolor4.png')
+}
+
+.page .watercolor5 {
+    --wc: url('/assets/watercolor/watercolor5.png')
+}
+
+.page .watercolor6 {
+    --wc: url('/assets/watercolor/watercolor6.png')
+}
+
+.page .watercolor7 {
+    --wc: url('/assets/watercolor/watercolor7.png')
+}
+
+.page .watercolor8 {
+    --wc: url('/assets/watercolor/watercolor8.png')
+}
+
+.page .watercolor9 {
+    --wc: url('/assets/watercolor/watercolor9.png')
+}
+
+.page .watercolor10 {
+    --wc: url('/assets/watercolor/watercolor10.png')
+}
+
+.page .watercolor11 {
+    --wc: url('/assets/watercolor/watercolor11.png')
+}
+
+.page .watercolor12 {
+    --wc: url('/assets/watercolor/watercolor12.png')
+}
+
+.page .monster {
+    font-family: "ScalySansRemake";
+    font-size: .318cm;
+    line-height: 1.2em;
+    position: relative;
+    padding: 0px;
+    margin-bottom: .325cm
+}
+
+.page .monster p,
+.page .monster dl,
+.page .monster ul,
+.page .monster ol {
+    line-height: 1.2em
+}
+
+.page .monster ul,
+.page .monster ol {
+    padding-left: 1em
+}
+
+.page .monster em {
+    font-style: italic
+}
+
+.page .monster strong {
+    font-weight: 800;
+    letter-spacing: -0.02em
+}
+
+.page .monster h5+* {
+    margin-top: .1cm
+}
+
+.page .monster.frame {
+    width: calc(100% + .32cm);
+    padding: 4px 2px;
+    margin-right: -0.16cm;
+    margin-left: -0.16cm;
+    background-color: var(--HB_Color_MonsterStatBackground);
+    background-image: url('./themes/assets/parchmentBackgroundGrayscale.jpg');
+    background-attachment: fixed;
+    background-blend-mode: overlay;
+    border-style: solid;
+    border-width: 7px 6px;
+    border-image: url('./themes/assets/monsterBorderFancy.png') 14 round;
+    border-image-outset: 0px 2px;
+    box-shadow: 1px 4px 14px #888888
+}
+
+.page .monster h2 {
+    margin: 0;
+    font-size: .62cm;
+    line-height: 1em
+}
+
+.page .monster h2+p {
+    margin-bottom: 0;
+    font-size: .304cm
+}
+
+.page .monster h3 {
+    padding-bottom: .05cm;
+    font-family: "ScalySansRemake";
+    font-weight: 800;
+    font-variant: small-caps;
+    border-bottom: 2px solid var(--HB_Color_HeaderText)
+}
+
+.page .monster hr {
+    height: 6px;
+    margin: .12cm 0;
+    visibility: visible;
+    background-image: url('./themes/assets/redTriangle.png');
+    background-size: 100% 100%;
+    border: none
+}
+
+.page .monster hr~:is(dl, p) {
+    color: var(--HB_Color_HeaderText)
+}
+
+.page .monster hr:last-of-type~:is(dl, p) {
+    color: inherit
+}
+
+.page .monster hr:last-of-type+* {
+    margin-top: .325cm
+}
+
+.page .monster hr+table:first-of-type {
+    margin: 0;
+    column-span: none;
+    color: var(--HB_Color_HeaderText);
+    background-color: transparent;
+    border-style: none;
+    border-image: none;
+    -webkit-column-span: none
+}
+
+.page .monster hr+table:first-of-type tr {
+    background-color: transparent
+}
+
+.page .monster hr+table:first-of-type td,
+.page .monster hr+table:first-of-type th {
+    padding: 0px
+}
+
+.page .monster :last-child {
+    margin-bottom: 0
+}
+
+.page .monster.wide {
+    column-count: 2;
+    column-fill: balance;
+    column-gap: .9cm;
+    column-width: 7.68cm;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    -webkit-column-width: 7.68cm;
+    -moz-column-width: 7.68cm;
+    -webkit-column-gap: .9cm;
+    -moz-column-gap: .9cm
+}
+
+.page:after {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    z-index: 100;
+    width: 100%;
+    height: 50px;
+    content: '';
+    background-image: url('./themes/assets/PHB_footerAccent.png');
+    background-size: cover
+}
+
+.page:nth-child(even)::after {
+    transform: scaleX(-1)
+}
+
+.page:nth-child(even) .pageNumber {
+    left: 2px
+}
+
+.page:nth-child(even) .footnote {
+    left: 80px;
+    text-align: left
+}
+
+.page .pageNumber {
+    position: absolute;
+    right: 2px;
+    bottom: 22px;
+    width: 50px;
+    font-size: .9em;
+    color: var(--HB_Color_Footnotes);
+    text-align: center;
+    text-indent: 0
+}
+
+.page .pageNumber.auto::after {
+    content: counter(phb-page-numbers)
+}
+
+.page .footnote {
+    position: absolute;
+    right: 80px;
+    bottom: 32px;
+    z-index: 150;
+    width: 200px;
+    font-size: .8em;
+    color: var(--HB_Color_Footnotes);
+    text-align: right
+}
+
+.page code {
+    padding: 0px 4px;
+    font-family: 'Courier New', "Courier", monospace;
+    font-size: .325;
+    color: #58180D;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    background-color: #FAF7EA;
+    border-radius: 4px
+}
+
+.page pre code {
+    display: inline-block;
+    width: 100%;
+    padding: .15cm;
+    margin-bottom: 2px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 12px;
+    border-image: url('/assets/codeBorder.png') 26 stretch;
+    border-image-width: 10px;
+    border-image-outset: 2px
+}
+
+.page :where(.page pre code) {
+    margin-top: 2px
+}
+
+.page pre code+* {
+    margin-top: .325cm
+}
+
+.page hr {
+    margin: 0px;
+    visibility: hidden
+}
+
+.page .columnSplit {
+    visibility: hidden;
+    -webkit-column-break-after: always;
+    break-after: always;
+    -moz-column-break-after: always
+}
+
+.page blockquote,
+.page table {
+    z-index: 15;
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid
+}
+
+.page table+p {
+    text-indent: 1em
+}
+
+.page ul ul,
+.page ol ol,
+.page ul ol,
+.page ol ul {
+    margin-bottom: 0px;
+    margin-left: 1.5em
+}
+
+.page li {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid
+}
+
+.page .spellList {
+    font-family: "ScalySansRemake";
+    font-size: .318cm;
+    line-height: 1.2em;
+    column-count: 2
+}
+
+.page .spellList p,
+.page .spellList dl,
+.page .spellList ul,
+.page .spellList ol {
+    line-height: 1.2em
+}
+
+.page .spellList ul,
+.page .spellList ol {
+    padding-left: 1em
+}
+
+.page .spellList em {
+    font-style: italic
+}
+
+.page .spellList strong {
+    font-weight: 800;
+    letter-spacing: -0.02em
+}
+
+.page .spellList h5+* {
+    margin-top: .1cm
+}
+
+.page .spellList ul+h5 {
+    margin-top: 15px
+}
+
+.page .spellList p,
+.page .spellList ul {
+    font-size: .352cm;
+    line-height: 1.265em
+}
+
+.page .spellList ul {
+    padding-left: 1em;
+    margin-bottom: .5em;
+    text-indent: -1em;
+    list-style-type: none;
+    -webkit-column-break-inside: auto;
+    page-break-inside: auto;
+    break-inside: auto
+}
+
+.page .spellList.wide {
+    column-count: 4
+}
+
+.page .classTable th[colspan]:not([rowspan]) {
+    white-space: nowrap
+}
+
+.page .classTable.frame {
+    width: calc(100% + .2cm);
+    margin-top: .7cm;
+    margin-right: -0.1cm;
+    margin-bottom: .9cm;
+    margin-left: -0.1cm;
+    border-collapse: separate;
+    background-color: white;
+    border: initial;
+    border-style: solid;
+    border-image-source: url('../dependencies/themes/assets/frameBorder.png');
+    border-image-slice: 200;
+    border-image-width: 47px;
+    border-image-outset: .4cm .3cm;
+    border-image-repeat: stretch
+}
+
+.page.classTable.frame.wide:first-child {
+    margin-top: .12cm
+}
+
+.page .classTable.frame+* {
+    margin-top: 0
+}
+
+.page .classTable.decoration {
+    position: relative
+}
+
+.page .classTable.decoration::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -1;
+    width: 7.75cm;
+    height: calc(100% + 3.3cm);
+    content: '';
+    background-image: url('../../dependencies/assets/classTableDecoration.png'), url('/assets/classTableDecoration.png');
+    filter: drop-shadow(0 0 1px #C8C5C080);
+    background-repeat: no-repeat, no-repeat;
+    background-position: top, bottom;
+    background-size: contain, contain;
+    transform: translateY(-50%) translateX(-50%)
+}
+
+.page .classTable.decoration.wide::before {
+    width: calc(100% + 3.3cm);
+    height: 7.75cm;
+    background-position: left, right
+}
+
+.page .classTable h5+table {
+    margin-top: .2cm
+}
+
+.page:has(.frontCover) {
+    columns: 1;
+    text-align: center
+}
+
+.page:has(.frontCover)::after {
+    all: unset
+}
+
+.page:has(.frontCover) h1 {
+    margin-top: 1.2cm;
+    margin-bottom: 0;
+    font-family: "NodestoCapsCondensed";
+    font-size: 2.245cm;
+    font-weight: normal;
+    line-height: .85em;
+    color: white;
+    text-shadow: unset;
+    text-transform: uppercase;
+    filter: drop-shadow(0 0 1.5px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+}
+
+.page:has(.frontCover) h2 {
+    font-family: "NodestoCapsCondensed";
+    font-size: .85cm;
+    font-weight: normal;
+    color: white;
+    letter-spacing: .1cm;
+    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+}
+
+.page:has(.frontCover) hr {
+    position: relative;
+    display: block;
+    width: 12cm;
+    height: .5cm;
+    margin: auto;
+    visibility: visible;
+    background-image: url('/assets/horizontalRule.svg');
+    filter: drop-shadow(0 0 3px black);
+    background-size: 100% 100%;
+    border: none
+}
+
+.page:has(.frontCover) .banner {
+    position: absolute;
+    bottom: 4.2cm;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 10.5cm;
+    height: 1.7cm;
+    padding-top: .1cm;
+    padding-left: 1cm;
+    font-family: "NodestoCapsCondensed";
+    font-size: 1cm;
+    font-weight: normal;
+    color: white;
+    text-align: left;
+    letter-spacing: .014cm;
+    background-image: url('/assets/coverPageBanner.svg');
+    filter: drop-shadow(2px 2px 2px black)
+}
+
+.page:has(.frontCover) .footnote {
+    position: absolute;
+    right: 0;
+    bottom: 1.3cm;
+    left: 0;
+    width: 70%;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: "Overpass";
+    font-size: .496cm;
+    color: white;
+    text-align: center;
+    filter: drop-shadow(0 0 .7px black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
+}
+
+.page:has(.frontCover) .logo {
+    position: absolute;
+    top: .5cm;
+    right: 0;
+    left: 0;
+    filter: drop-shadow(0 0 .075cm black)
+}
+
+.page:has(.frontCover) .logo img {
+    width: 100%;
+    height: 2cm
+}
+
+.page:has(.insideCover) {
+    columns: 1;
+    text-align: center
+}
+
+.page:has(.insideCover)::after {
+    all: unset
+}
+
+.page:has(.insideCover) h1 {
+    margin-top: 1.2cm;
+    margin-bottom: 0;
+    font-family: "NodestoCapsCondensed";
+    font-size: 2.1cm;
+    font-weight: normal;
+    line-height: .85em;
+    text-transform: uppercase
+}
+
+.page:has(.insideCover) h2 {
+    font-family: "NodestoCapsCondensed";
+    font-size: .85cm;
+    font-weight: normal;
+    letter-spacing: .5cm
+}
+
+.page:has(.insideCover) hr {
+    position: relative;
+    display: block;
+    width: 12cm;
+    height: .5cm;
+    margin: auto;
+    visibility: visible;
+    background-image: url('/assets/horizontalRule.svg');
+    background-size: 100% 100%;
+    border: none
+}
+
+.page:has(.insideCover) .logo {
+    position: absolute;
+    right: 0;
+    bottom: 1cm;
+    left: 0;
+    height: 2cm
+}
+
+.page:has(.insideCover) .logo img {
+    width: 100%;
+    height: 2cm
+}
+
+.page:has(.backCover) {
+    padding: 2.25cm 1.3cm 2cm 1.3cm;
+    color: #FFFFFF;
+    columns: 1
+}
+
+.page:has(.backCover)::after {
+    all: unset
+}
+
+.page:has(.backCover) .columnWrapper {
+    width: 7.6cm
+}
+
+.page:has(.backCover) .backCover {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    width: 11cm;
+    background-image: url('/assets/backCover.png');
+    background-repeat: no-repeat;
+    background-size: contain
+}
+
+.page:has(.backCover) .blank {
+    height: 1.4em
+}
+
+.page:has(.backCover) h1 {
+    margin-bottom: .3cm;
+    font-family: "NodestoCapsCondensed";
+    font-size: 1.35cm;
+    line-height: .95em;
+    color: #ED1C24;
+    text-align: center
+}
+
+.page:has(.backCover) h1+p::first-line,
+.page:has(.backCover) h1+p::first-letter {
+    all: unset
+}
+
+.page:has(.backCover) img {
+    position: absolute;
+    top: 0px;
+    z-index: -2;
+    height: 100%
+}
+
+.page:has(.backCover) hr {
+    width: 4.5cm;
+    height: .53cm;
+    margin-top: 1.1cm;
+    margin-right: auto;
+    margin-left: auto;
+    visibility: visible;
+    background-image: url('/assets/horizontalRule.svg');
+    background-size: 100% 100%;
+    border: none
+}
+
+.page:has(.backCover) p {
+    font-family: "Overpass";
+    font-size: .332cm;
+    line-height: 1.5em
+}
+
+.page:has(.backCover) hr+p {
+    margin-top: .6cm;
+    text-align: center
+}
+
+.page:has(.backCover) .logo {
+    position: absolute;
+    bottom: 2cm;
+    left: 1.2cm;
+    z-index: 0;
+    width: 7.6cm;
+    height: 1.5cm
+}
+
+.page:has(.backCover) .logo img {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 1.5cm
+}
+
+.page:has(.backCover) .logo p {
+    position: relative;
+    width: 100%;
+    font-family: "NodestoCapsWide";
+    font-size: .4cm;
+    line-height: 1em;
+    color: #FFFFFF;
+    text-align: center;
+    text-indent: 0;
+    letter-spacing: .08em
+}
+
+.page:has(.partCover) {
+    padding-top: 0;
+    text-align: center;
+    columns: 1
+}
+
+.page:has(.partCover) .partCover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6cm;
+    background-image: url('/assets/partCoverHeaderPHB.png');
+    background-repeat: no-repeat;
+    background-size: 100%
+}
+
+.page:has(.partCover) h1 {
+    position: relative;
+    margin-top: .4cm;
+    font-family: "NodestoCapsCondensed";
+    font-size: 2.3cm;
+    text-align: center;
+    text-transform: uppercase
+}
+
+.page:has(.partCover) h2 {
+    position: relative;
+    margin-top: -0.7em;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: "Overpass";
+    font-size: .45cm;
+    line-height: 1.1em
+}
+
+.page:has(.toc)::after {
+    display: none
+}
+
+.page .toc {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid
+}
+
+.page .toc h1 {
+    margin-bottom: .3cm;
+    text-align: center
+}
+
+.page .toc a {
+    display: inline;
+    color: inherit;
+    text-decoration: none
+}
+
+.page .toc a:hover {
+    text-decoration: underline
+}
+
+.page .toc h4 {
+    margin-top: .2cm;
+    line-height: .4cm
+}
+
+.page .toc h4+ul li {
+    line-height: 1.2em
+}
+
+.page .toc ul {
+    padding-left: 0;
+    margin-top: 0;
+    list-style-type: none
+}
+
+.page .toc ul a {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    width: 100%
+}
+
+.page .toc ul li+li h3 {
+    margin-top: .26cm;
+    line-height: 1em
+}
+
+.page .toc ul h3 span:first-child::after {
+    border: none
+}
+
+.page .toc ul span {
+    display: contents
+}
+
+.page .toc ul span:first-child::after {
+    bottom: .08cm;
+    flex: 1;
+    margin-right: .16cm;
+    margin-bottom: .08cm;
+    margin-left: .08cm;
+    content: '';
+    border-bottom: .05cm dotted #000000
+}
+
+.page .toc ul span:last-child {
+    display: inline-block;
+    align-self: flex-end;
+    font-family: 'BookInsanityRemake';
+    font-size: .34cm;
+    font-weight: normal;
+    color: #000000
+}
+
+.page .toc ul ul {
+    margin-left: 1em
+}
+
+.page .toc.wide {
+    column-count: 2;
+    column-fill: balance;
+    column-gap: .9cm;
+    column-width: 7.68cm;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    -webkit-column-width: 7.68cm;
+    -moz-column-width: 7.68cm;
+    -webkit-column-gap: .9cm;
+    -moz-column-gap: .9cm
+}
+
+.page dl {
+    padding-left: 1em;
+    line-height: 1.25em;
+    white-space: pre-line
+}
+
+.page dl+* {
+    margin-top: .28cm
+}
+
+.page dl+* {
+    margin-top: .17cm
+}
+
+.page p+dl {
+    margin-top: .17cm
+}
+
+.page dt {
+    display: inline;
+    margin-right: 5px;
+    margin-left: -1em
+}
+
+.page dd {
+    display: inline;
+    margin-left: 0px;
+    text-indent: 0px
+}
+
+.page .wide {
+    margin-bottom: .325cm
+}
+
+.page h1+* {
+    margin-top: 0
+}
+
+.page .runeTable {
+    margin-block: .7cm
+}
+
+.page .runeTable table {
+    font-family: inherit
+}
+
+.page .runeTable table tbody tr {
+    background: unset
+}
+
+.page .runeTable table th,
+.page .runeTable table td {
+    width: 1.3cm;
+    height: 1.3cm;
+    font-weight: normal;
+    text-transform: uppercase;
+    vertical-align: middle;
+    outline: 1px solid #000000
+}
+
+.page .runeTable table th {
+    font-family: "BookInsanityRemake";
+    font-size: .45cm
+}
+
+.page .runeTable table td {
+    font-size: .7cm
+}
+
+.page .runeTable.frame {
+    border: initial;
+    border-style: solid;
+    border-image-source: url('/assets/scriptBorder.png');
+    border-image-slice: 170;
+    border-image-width: 1.4cm;
+    border-image-outset: .45cm .35cm .4cm .4cm;
+    border-image-repeat: stretch
+}
+
+.page .index {
+    font-size: .218cm
+}
+
+.page .index ul ul {
+    margin: 0
+}
+
+.page .index ul {
+    padding-left: 0;
+    text-indent: 0;
+    list-style-type: none
+}
+
+.page .index>ul>li {
+    padding-left: 1.5em;
+    text-indent: -1.5em
+}

templates/proxy.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Print Preview</title>
-    <link href="/static/all.css" rel="stylesheet" />
-    <link href="/static/css.css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-    <link href='/static/bundle.css' rel='stylesheet' />
-    <link href="/static/style.css" rel='stylesheet' />
-    <link href="/static/5ePHBstyle.css" rel='stylesheet' />
-    <link href="/static/storeUI.css" rel='stylesheet' />
-    <title>Print Preview - DnD Stat Block</title>
-    <style> 
-        @media print {
-                        
-        .page {
-            page-break-before: auto;
-        }
-        .columnWrapper {
-            overflow: visible;
-        }
-        
-        }
-        .page-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-</head>
-<body>
-        <div id= "brewRenderer" class="brewRenderer">
-            <!-- This div will display the content passed from the main app -->
-            <div id="printContent">{{ html_content|safe }}
-            </div>
-        </div>
-    <div id="preview-actions">
-        <button id="print-button">Print</button>
-        <button id="cancel-button">Cancel</button>
-    </div>
-
-    <script>
-        // Function to trigger print
-        document.getElementById('print-button').addEventListener('click', function() {
-            window.print();
-        });
-
-        // Function to close the preview without printing
-        document.getElementById('cancel-button').addEventListener('click', function() {
-            window.close(); // Close the preview window
-        });
-    </script>
-</html>

templates/storeUI.html

@@ -14,6 +14,29 @@
     <script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
 
     <style>
+        @media print {
+        /* Hide everything by default */
+        body * {
+            visibility: hidden;
+        }
+
+        /* Specifically show the section you want to print */
+        #brewRenderer, #brewRenderer * {
+            visibility: visible;
+            page-break-before: auto;
+            page-break-after: avoid;
+            page-break-inside: avoid;
+        }
+
+        /* Ensure the printable section takes up the full page */
+        #brewRenderer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: auto;
+        }
+    }
         /* Modal styles */
         .modal {
             display: none; /* Hidden by default */
@@ -69,7 +92,7 @@
             <button id="addPageButton">Add New Page</button>
             <button id="removePageButton">Remove Last Page</button>
             <button id="resetButton">Reset</button>
-            <button id="printButton">Open Tab to print</button>
+            <button id="printButton">Print</button>
         </div>
         <div class="page-container" id="pageContainer">
             
@@ -101,7 +124,7 @@
             <div id="modalPreviewContent"></div>
         </div>
     </div>
-    
+    <div id="iFrameContainer" style="display:none;"></div>
     <script src="scripts.js"></script>
         
     </script>