<!

-- Don't need to copy this part -->

<div class='korner'>If this brew is helpful, please consider supporting me on Ko-
Fi<a href='https://ko-fi.com/johnj' ></a></div>

<style>
@import url('https://fonts.googleapis.com/css2?
family=Enriqueta:wght@700&family=Rock+Salt&family=Rock+Salt&family=Nanum+Pen+Script
&display=swap');

/*

░██████╗░██╗░░░░░░░██╗░█████╗░██████╗░███████╗
██╔════╝░██║░░██╗░░██║██╔══██╗██╔══██╗██╔════╝
╚█████╗░░╚██╗████╗██╔╝███████║██║░░██║█████╗░░
░╚═══██╗░░████╔═████║░██╔══██║██║░░██║██╔══╝░░
██████╔╝░░╚██╔╝░╚██╔╝░██║░░██║██████╔╝███████╗
╚═════╝░░░░╚═╝░░░╚═╝░░╚═╝░░╚═╝╚═════╝░╚══════╝

░██████╗████████╗██╗░░░██╗██╗░░░░░███████╗░██████╗██╗░░██╗███████╗███████╗████████╗
██╔════╝╚══██╔══╝╚██╗░██╔╝██║░░░░░██╔════╝██╔════╝██║░░██║██╔════╝██╔════╝╚══██╔══╝
╚█████╗░░░░██║░░░░╚████╔╝░██║░░░░░█████╗░░╚█████╗░███████║█████╗░░█████╗░░░░░██║░░░
░╚═══██╗░░░██║░░░░░╚██╔╝░░██║░░░░░██╔══╝░░░╚═══██╗██╔══██║██╔══╝░░██╔══╝░░░░░██║░░░
██████╔╝░░░██║░░░░░░██║░░░███████╗███████╗██████╔╝██║░░██║███████╗███████╗░░░██║░░░
╚═════╝░░░░╚═╝░░░░░░╚═╝░░░╚══════╝╚══════╝╚═════╝░╚═╝░░╚═╝╚══════╝╚══════╝░░░╚═╝░░░

🄱🅈 🄶🄰🅉🄾🄾🄺

This stylesheet is developed for the Homebrewery to bring some alternative complete
styling for brews. Hopefully this helps those that want to brew for something
other than DnD 5e. But my biggest hope is to illustrate what can be done in
Homebrewery when taking a harder look at Markdown, HTML, and especially CSS. I
have made an attempt to stick as close to Markdown as possible and not rely too
much on alternate on HTML methods, which means a lot of weird CSS stuff (multi-
section tables, I'm looking at you).

The CSS is organized a little bit. If you see ROOT VARIABLES, it means those
properties can be changed easily or have some explanation. Otherwise, the rest is
up to you to figure out.

The last page of the brew is HIDDEN from the preview, and contains CSS that is not
SWADE specific. Feel free to look at it though and use what you can, it's mostly
for the book-style display and fancy preview background. */

/* =============================== */
/* ------- PAGE ADJUSTMENTS ------ */
/* =============================== */

.phb:after {
display:none;
}

/* ----- Folded Paper Shadows ----- */

/* -------------------------------- */

.phb:nth-of-type(2n+1):before {
 content:'';
position:absolute;
width:0;
height:100%;
top:0;
left:0;
z-index:500;
box-shadow:0 0 35px 10px black;
}

.phb:nth-of-type(2n):before {
content:'';
position:absolute;
width:0;
height:100%;
top:0;
right:0;
z-index:500;
box-shadow:0 0 35px 10px black;
}

/* ----- Background white overlay ----- */

/* ------------------------------------ */

.sw.pg:before {
content:'';
position:absolute;
width:90%;
height:90%;
background:#ffffffa6;
top:5%;
left:5%;
z-index:-1;
box-shadow:0 0 40px 30px #ffffffa6;
}

/* ----- SWADE LOGO ----- */

/* ---------------------- */

.sw #fan-content {
position:absolute;
width:130px;
top:50px;
right:30px;
transform:rotate(20deg);
z-index:100;
filter:drop-shadow(2px 2px 1px gray);
transition:transform .2s;
}

.sw #fan-content:hover {
transform:rotate(20deg) scale(1.05);
}

/* ----- DROP SHADOW ----- */

/* ----------------------- */

.sw .dropshadow {
filter:drop-shadow(2px 2px 6px gray)
 }

/* =============================== */
/* ------------ HEADERS ---------- */
/* =============================== */

.sw h1,.sw h2,.sw h3,.sw h4,.sw h5, .sw blockquote h4 em {

text-transform:uppercase;
font-family:'impact';
}

/* ------ H1 Chapter Headings ------ */

/* --------------------------------- */
/* - Big half page graphic headers - */
/* --------------------------------- */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root {
--splashy-text-color:hotpink;
--splashy-shadow-color:yellow;
--splashy-font:'rock salt'

.sw .chapter-head {
position:relative;
top:-30px;
height:340px;
column-span:all;
background-image:url('https://i.imgur.com/hnGXqZP.png');
background-size:cover;
padding-top:50px;
padding-bottom:50px;
}

.sw .chapter-head h1 {
color:black;
font-size:96px;
text-align:center;
height: 100px;
width: 108%;
margin-left: -4%;
padding-top: 30px;
margin-bottom: -10px;
margin-top: 0;
}

.sw .chapter-head h1::after {

content: '';
display: block;
position: relative;
background: url('https://i.imgur.com/FQsK0NF.png');
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
margin: auto auto;
 height: 1em;
width: 90%;
bottom: .8em;
z-index: 3;
}

.sw .chapter-head p {
color:maroon;
font-size:32px;
border:none;
position:relative;
font-family:impact;
text-transform:uppercase;
background:ed;
width:90%;
margin:auto auto !important;
line-height:1em;
padding:10px 0;
text-align:center;
top:.6em;
}

.sw .chapter-head.top p:last-of-type {

top:-3em;
}

.sw .chapter-head.right p:last-of-type {

text-align:right;
}

.sw .chapter-head.bottom p:last-of-type {

top:.6em;
}

.sw .chapter-head.left p:last-of-type {

text-align:left;
}

.sw .chapter-head p:first-of-type {

top:20px;
text-align:left;
transform:rotate(-15deg);
transform-origin:25%;
font-family:var(--splashy-font);
text-transform:unset;
color:maroon;
}

.sw .chapter-head h1 + p:first-letter {

font-family:inherit;
float:unset;
font-size:unset;
color:unset;
}

.sw .chapter-head.splashy.bottom p {
transform:translateY(20px)
}
 .sw .chapter-head.splashy p:first-of-type {
top:130px;
line-height:.4em;
transform:scalex(1.8) translatex(-10%);
font-size:3em;
text-align:center;

.sw .chapter-head.shadow p:first-of-type {

font-weight:700;
text-shadow:
3px 5px 2px var(--splashy-shadow-color),
-1px -1px 0 var(--splashy-shadow-color),
1px -1px 0 var(--splashy-shadow-color),
-1px 1px 0 var(--splashy-shadow-color),
1px 1px 0 var(--splashy-shadow-color);

.sw .chapter-bg {
position:absolute;
height:380px;
width:660px;
top:0px;
left:0px;
background:url('https://i.imgur.com/q03i8K7.png');
background-size:100% 100%;
background-repeat:norepeat;
transform:rotate(-3deg);
z-index:-1;
}

.sw .chapter-head img {

position:relative;
width:750px;
left:-45px;
top:-20px;
mask-image:url('https://i.imgur.com/bpMq3XN.png');
mask-size:100%;
-webkit-mask-image:url('https://i.imgur.com/bpMq3XN.png');
-webkit-mask-size:100%;
}

/* ------------ H2 ---------- */
/* -------------------------- */

.sw h2 {
height:100px;
width:108%;
margin-left:-4%;
padding-top:30px;
margin-top:0;
font-size:2.6em;
text-align:center;
color:#920B12;
background:url('https://i.imgur.com/mzLTyEh.png');
background-position:center;
background-size:contain;
 background-repeat:no-repeat;
position:relative;
z-index:500;
}

.sw h2:first-child {
margin-top:-.3em;
}

.sw h2::after {
content: '';
display: block;
position: relative;
background: url('https://i.imgur.com/FQsK0NF.png');
background-size: contain;
background-position: bottom;
background-repeat: repeat-x;
margin: auto auto;
height: 1em;
width: 90%;
bottom: .8em;
z-index: 3;
}

.sw .wide h2 {
background-size:100% 100px;
width:110%;
margin-left:-5%;
z-index:500
}

.sw h2 + p {
margin-top:-1.1em;

/* ------------ H3 ---------- */
/* -------------------------- */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root {
--wild-card-indicator-icon: url('https://i.imgur.com/bYx8Bt9.png');

.sw h3, .sw blockquote h3 {

color:black;
border-color:black;
margin-bottom:.3em;
}

.sw h3 strong {
font-weight:unset;
letter-spacing:unset;
}
 .sw h3 strong::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background: var(--wild-card-indicator-icon);
background-size:contain;
filter:brightness(0%);
top: 0;
left: 0;
margin-right:3px;
transform:rotate(-45deg) scale(1.3);
}

/* ------------ H4 ---------- */
/* -------------------------- */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root {
--core-skill-indicator-icon: url('https://i.imgur.com/WD6nLLD.png');

.sw h4 strong {
color:#920B12;
bottom-border-color:#920B12;
font-weight:unset;
letter-spacing:unset;
}

.sw h4 strong::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background: var(--core-skill-indicator-icon);
background-size:contain;
filter:hue-rotate(1deg) saturate(92%) brightness(60%);
top: 0;
left: 0;
margin-right:5px;
transform: scale(1.2);
}

.sw h4, .sw blockquote h4 {

color:black;
font-size:1.2em;
}

/* ------------ H5 ---------- */
/* -------------------------- */

.sw h5 {
color:#144567;
font-size:1.8em;
text-align:center;
 background-color:#B2C9D1;
border-top:2px solid #144567;
border-bottom:2px solid #144567;
}

/* ------------ H6 ---------- */
/* -------------------------- */

.sw h6 {
color:#920B12;
text-transform:uppercase;
font-family:'Enriqueta';
}

/* =========================== */
/* ---------- LISTS ---------- */
/* =========================== */

.sw li strong:first-child {
font-family:'Enriqueta';
font-style:unset;
text-transform:uppercase;
}

.sw ul {
padding-left:1em;
}

.sw p + ul {
margin-top:-.8em;
}

.sw ul li::marker {
color:#920B12;
}

.sw ul li {
list-style:square;
}

/* ------- Misc Text -------- */

/* -------------------------- */

p + hr {
margin-top:-.6em !important;
}

/* =============================== */
/* ---------- PAGE NUMS ---------- */
/* =============================== */

.sw .pageNumber {
position:absolute;
color:whitesmoke;
z-index:300;
font-weight:bold;
 font-size:1em;
background:url('https://i.imgur.com/G6en5xq.png');
background-repeat:no-repeat;
background-size:100% 100%;
bottom:0;
height:70px;
padding-top:30px;
text-align:center;
right:0px
}

.phb:nth-child(2n) .sw .pageNumber {

left:0px;
}

/* ------ Chapter Index ------ */

/* --------------------------- */
/* The left and right banners */
/* --------------------------- */

.sw .chapter-index {
position:absolute;
color:whitesmoke;
z-index:300;
font-weight:bold;
font-size:18px;
height:350px;
width:55px;
text-transform:uppercase;

.phb:nth-child(2n+1) .sw .chapter-index {

right:-4px;
background:url('https://i.imgur.com/t4AnTrC.png');
background-repeat:no-repeat;
background-size:100% 100%;
}

.phb:nth-child(2n+1) .sw .chapter-index p {

transform-origin:center left;
transform:rotate(90deg);
text-align:center;
white-space:nowrap;
margin-top:0px;
margin-left:20px;
width:300px;
}

.phb:nth-child(2n) .sw .chapter-index {

left:0px;
top:0px !important;
background:url('https://i.imgur.com/Dm4q0i7.png');
background-repeat:no-repeat;
background-size:100% 100%;
}

.phb:nth-child(2n) .chapter-index p {
 transform:rotate(270deg);
text-align:left;
white-space:nowrap;
margin-top:230px;
margin-left:12px;
}

/* =============================== */
/* --------- BLOCKQUOTES --------- */
/* =============================== */

/* needs improvement */

.sw blockquote {
background:none;
border:none;
box-shadow:none;
margin:0 0 0 2em;
padding:0;
font-family:inherit
}

.sw blockquote h6 {
display:inline;
float:left;
margin-right:5px
}

/* =============================== */
/* --------- TEXT NOTES ---------- */
/* =============================== */

/* ------ Example Text Notes ------ */

/* -------------------------------- */
/* ---- Brown background notes ---- */
/* -------------------------------- */

.example {
font-style:italic;
background:#ECE7DA;
border-radius:5px;
padding:4px 6px;

.example p {
padding-bottom:4px;
text-align:justify;
line-height:1.2em
}

.example p + p {
margin-top:unset;
 }

.example em {
font-style:normal;
}

/* ------ Flavor Text Notes ------ */

/* ------------------------------- */
/* ---- The handwritten notes ---- */
/* ------------------------------- */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root {
--base-text-color:maroon;
--greeting-color:inherit;
--note-color:inherit;
--signature-color:inherit;

--base-text-font:'rock salt';
--greeting-font:inherit;
--note-font:inherit;
--signature-font:inherit;

--base-text-size:12px;
}

.flavor {
font-family:var(--base-text-font);
color:var(--base-text-color);
margin-bottom:10px;
font-size:var(--base-text-size);
}

.flavor p {
text-align:center;
font-family:var(--note-font);
transform:rotate(0deg);
color:var(--note-color);
font-size:inherit;
}

.flavor.greeting p:first-child {
font-family:var(--greeting-font);
text-align:left;
transform:rotate(0deg);
font-size:inherit;
padding-top:0;
height:auto;
color:var(--greeting-color);
font-weight:unset;
background:none;
}

.flavor.sig p:last-child {
 font-family:var(--signature-font);
text-align:right;
transform:rotate(-4deg);
font-size:inherit;
padding-top:0;
height:auto;
font-weight:unset;
border:none;
color:var(--signature-color);
}

.flavor.wide h3 {
margin-top:18px
}

/* =============================== */
/* ----------- TABLES------------- */
/* =============================== */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root {
--row-color-one:#ece5d9;
--row-color-two:#dbd2ba;

--column-headers-bg-color:black;
--column-headers-text-color:white;

--table-title-bg-color:#8D0B12;
--table-title-text-color:white;
}

.sw table {
background:var(--row-color-one);
border-radius:12px;
}

.sw table tbody tr {

background-color:unset !important;
}

.sw table tr:nth-of-type(2n) td {

background:var(--row-color-two);
}

.sw .table tr:nth-of-type(2n+1) td {

background-color:var(--row-color-one);
}

.sw table td {
vertical-align:middle;
}

.sw .table:not(.double) table:last-of-type tr:last-of-type td:first-of-

type, .sw .table.double table:first-of-type tr:last-of-type td:first-of-type {
 border-bottom-left-radius:12px
}

.sw .table table:last-of-type tr:last-of-type td:last-of-type {

border-bottom-right-radius:12px
}

.sw h4 + .table {
margin-top:5px;
}

.sw table thead tr {

background:var(--column-headers-bg-color);
color:var(--column-headers-text-color);
text-transform:uppercase;
}

.sw table thead tr th {

padding-top:5px;
}

.sw .table h6 {
text-align:center;
background:var(--table-title-bg-color);
color:var(--table-title-text-color);
font-size:18px;
font-family:'enriqueta';
border-radius:12px 12px 0 0;
margin-bottom:0;
height:25px;
padding-top:3px;
column-span:unset !important;
}

.sw .table h6 + p::first-letter {

float:unset;
font-size:inherit;
font-family:inherit;
color:inherit;
line-height:inherit;
}

.sw .table h6 ~ p {
background:#ece5d9;
font-size:12px;
font-family:'scaly sans';
text-transform:inherit;
font-weight:inherit;
text-align:justify;
width:auto;
margin:0;
padding:.3em .3em 0 .3em;
color:black;
height:auto;
line-height:1.1em;
}

.sw .table p + p {
text-indent:0;
 padding-top:.4em;
}

/* ID SPECIFIC TABLES */

#size-table th:last-of-type, #size-table td:last-of-type {

width:30% !important;
}

/* -------- DOUBLE TABLES ------- */

/* ------------------------------ */

.table.double {
column-count:2;
column-gap:1px;
}

.table.double h6 {
column-span:all !important;
}

.table.double table + p {
display:none;
}

/* ---- MULTI SECTION TABLES ---- */

/* ------------------------------ */

/* ############## */
/* ROOT VARIABLES */
/* ############## */

:root{
--multiTable-section-base-color:10; /* number 0-359 */
--multiTable-section-text1:black; /* Section header text colors */
--multiTable-section-text2:white; /* ditto, for LAST FOUR sections */
}

.sw .multi-section {
position:relative;
}

.sw .multi-section table:not(:last-of-type) {

border-radius:unset;
margin-bottom:0 !important;
}

.sw .multi-section table + p:before {

content:'';
display:inline-block;
position:relative;
background:black;
height:2px;
flex:1;
margin:6px 3px
}
.sw .multi-section table + p:after {
content:'';
display:inline-block;
position:relative;
background:black;
height:2px;
flex:1;
margin:6px 3px
}

.sw .multi-section table + p {

font-family:'scaly sans';
text-transform:uppercase !important;
text-align:center !important;
background:hsl(var(--multiTable-section-base-color),48%,78%);
display:flex;
text-indent:unset;
line-height:18px;
}

.sw .multi-section table:nth-last-of-type(9) + p {

filter:hue-rotate(270deg) saturate(92%) brightness(100%);
color:var(--multiTable-section-text1);
}

.sw .multi-section table:nth-last-of-type(8) + p {

filter:hue-rotate(308deg) saturate(92%) brightness(100%);
color:var(--multiTable-section-text1);
}

.sw .multi-section table:nth-last-of-type(7) + p {

filter:hue-rotate(328deg) saturate(100%) brightness(100%);
color:var(--multiTable-section-text1);
}

.sw .multi-section table:nth-last-of-type(6) + p {

filter:hue-rotate(338deg) saturate(180%) brightness(100%);
color:var(--multiTable-section-text1);
}

.sw .multi-section table:nth-last-of-type(5) + p {

filter:hue-rotate(348deg) saturate(600%) brightness(100%);
color:var(--multiTable-section-text2);
}

.sw .multi-section table:nth-last-of-type(4) + p {

filter:hue-rotate(352deg) saturate(900%) brightness(100%);
color:var(--multiTable-section-text2);
}

.sw .multi-section table:nth-last-of-type(3) + p {

filter:hue-rotate(359deg) saturate(1500%) brightness(100%);
color:var(--multiTable-section-text2);
}

.sw .multi-section table:nth-last-of-type(2) + p {

background:hsl(4,65%,42%) !important;
color:var(--multiTable-section-text2);
 }

.sw .multi-section table:nth-last-of-type(1) + p {

background:hsl(1,85%,48%) !important;
color:var(--multiTable-section-text2);
}

.sw .multi-section table + p + table thead {

display:none
}

.sw .multi-section table:first-of-type tbody {

display:none;
}

.sw .multi-section table td, .sw .multi-section table th {

width:1000px !important;
word-break:break-word;
padding-left:8px;
padding-right:8px;
}

/* =============================== */
/* ----- TABLE OF CONTENTS ------- */
/* =============================== */

.sw .toc h2, .sw .toc h5 {

column-span:all;
background-size:100% 100px;
z-index:500;
}

.sw .toc h2 {
width:110%;
margin-left:-5%;
}

.sw .toc h5 {
margin-bottom:.7em
}

.sw .toc ul {
margin-left:0;
position:relative;
}

.sw .toc ul li {
list-style:none;
}

.sw .toc>ul>li {
margin-bottom:2em !important;
}

.sw .toc>ul>li strong {

font-family:impact;
font-size:.529cm;
border-bottom:2px solid;
width:100%;
 padding-bottom:.1em;
display:inline-block;
margin-bottom:.3em
}

.sw .toc ul li ul li strong {

font-family:'BookSanity';
font-size:inherit;
border:unset;
text-transform:inherit;
font-weight:inherit;
display:unset;
}

/* ------------------ ToC NESTED 3rd LVL HEADERS -------------------- */

/* -------------------------------------------------------- */
/* ------ Delete this rule if you want to keep your lvl 3 headers nested.
Currently cannot use page #s (next section) if not using this rule. ------- */
/* -------------------------------------------------------- */

.sw .toc>ul>li>ul>li{
position:relative;
display:flex;
}

/* ------------------ ToC PAGE NUMBERS -------------------- */

/* -------------------------------------------------------- */
/* ------ Delete these 2 rules if no page #s wanted ------- */
/* -------------------------------------------------------- */

.sw .toc>ul>li>ul>li:before {
content:'';
left:0;
position:relative;
order:2;
flex:1;
border-bottom:1.5px dotted black;
display:block;
bottom:.3em;
margin:0 .3em;
}

.sw .toc>ul>li>ul>li em {
right:0;
flex:0;
order:3
}

/* ---------------------------------- */
/* ---------- END OF STYLES --------- */
/* ---------- END OF STYLES --------- */
/* ---------- END OF STYLES --------- */
/* ---------- END OF STYLES --------- */
/* ---------------------------------- */
</style>
<div class='sw pg'>

<a href='https://www.peginc.com/store/savage-worlds-adventure-edition-core-rules-
pdf-swade/'><img id='fan-content'
src='https://www.peginc.com/wp-content/uploads/2019/01/SW_LOGO_FP_2018.png' /></a>

<div class='chapter-head right bottom'><div class='chapter-bg'><img

src='https://i.imgur.com/b8kUc5Y.jpg' /></div>

Gazook's
# Savage Brew
Chapter One
</div>

## H2 Header
The h2 header is created with two hashtags, ##. This can be made *wide* and the
image background will stretch to cover two columns. And yes, the background image
is the same for all h2 headers. It would be great to be able to grab a random
image from a selection, but not possible with just CSS.

### Here is a Level 3 Header

The h3 header is done with three hashtags, ###. In the SWADE book, this header is
used for the names of Races, and many subcategories (look at the Rules section of
that book for examples). Also, I believe it should be used for creatures in the
Bestiary, and that Pinnacle's non-use is an oversight. More on that later.

#### And a level 4...

As with h2 and h3, h4 headers are done with four hashtags, ####. These headers are
frequently seen in the source book as the names of Powers, Edges, and Skills, as
well as for h3 subcategories.

##### ...A level 5...

And this one is a little funky, as I don't think it will follow the strict
heirarchy of headers well, but if it does, this is the place for it. A h5 header
is used for Example headers; summaries of how rules will play out, typically.
Created with five hashtags, #####.

###### And a level 6!

A level 6 header, or h6, is created with six hashtags, ######. Typically used for
Modifiers or Requirements.

```
```

#### Would you like a list? Here ya go!

- This is an unordered list
- Created with a simple dash, -
- **Bold** with set of double asterisks for modifier names, for example.
- Ordered lists can be created with numbers.

### **Wild Card Indicators?**

We got'em. A h3 header that is bolded with a set of double asterisks.
#### **Core Skill Indicators?**
Got those, too. Same deal as above, but with h4 header.
### No Wild Card
There is a weird discrepancy, as far as I am concerned, in how the *SWADE Core*
book handles some headers. It *feels* like an oversight in their styling when they
give headers for creatures in the Bestiary section. In the Bestiary, they use a
font that is not underlined, but is as large as the previous fonts that were
underlined. In other words, the headings in the Bestiary either have a font that
is too large, or should be underlined. I'm going to assume that the Bestiary is
supposed to have H3 headers, with the large font + underline, because that would
match the Races at the beginning of the book. Also, each creature can have sub-
types (like "Elementals" which have Water, Air, Earth, etc) which would benefit
from having H4 headers.
#### *Improved Dodge*
Here is an issue that I can't solve without using a wrapper div...In the core book,
there are "improved" edges that feature an italicized header and a left indent. I
can do the italicization easy enough through markdown, but I can only indent the
header, not the following text. I would either need to use a wrapper div, or
misappropriate Markdown notation to indicate what needs to be indented.

<div class='note flavor' style='position:absolute;width:80%;left:10%;

color:darkgray;transform:rotate(2deg)'>
The H1 header at the top of the page needs a page of explanation to itself, and
you'll find that after the following examples on page 3.
</div>

<div class='chapter-index' style='

top:400px;'><p>Style Guidelines</p></div>
<div class='pageNumber auto'></div>

</div>

\page

<div class='sw pg'>

<div class='wide'>

##### Examples: Headers & Paragraphs

</div>

## Powers
Listed below are a number of powers available in most Savage Settings.

### List of Powers

#### Arcane Protection
**Rank:** Novice
**Power Points:** 1
**Range:** Smarts
**Duration:** 5
**Trappings:** Concentration, a dull glow
around the protected character, a fetish.

Success with *arcane protection* means hostile powers suffer a −2 penalty (−4 with
a raise) to affect this character. If the power causes harm, damage is also reduced
a like amount.

Arcane protection stacks with Arcane Resistance should the recipient have both!

###### Modifiers
- **Additional Recipients (+1):** The power may affect more than one target for 1
additional Power Point each.
- **Smelly (+1):** Fart the **entire** time this spell is active.

#### Blast
**Rank:** Seasoned
**Power Points:** 3
**Range:** Smarts ×2
**Duration:** Instant
**Trappings:** Balls of fire, ice, light, darkness, colored bolts, swarm of
insects.

Blast launches a ball of explosive energy or matter. The area of effect is a Medium
Blast Template. Every target within suffers 2d6 damage, or 3d6 with a raise (see
Area Effect Attacks, page 97).

###### Modifiers
- **AREA EFFECT (+0/+1):** The caster can focus the blast to a Small Blast Template
for no extra cost, or a Large Blast Template for +1.
- **DAMAGE (+2):** The blast causes 3d6 damage (4d6 with a raise).

#### Darksight
**Rank:** Novice
**Power Points:** 1
**Range:** Smarts
**Duration:** One hour
**Trappings:** Glowing eyes, dilated pupils, sonic sight.

Darksight allows a hero to see in the dark. With success, he ignores up to 4 points
of illumination penalties. With a raise, he ignores up to six points and can see in
pitch darkness.

## Bestiary

Some beasty boys indeed.

#### DRAGON
Dragons are fire-breathing monsters that bring doom and despair to the villages
they ravage. Such creatures should not be fought lightly as they are more than a
match for even a party of experienced adventurers. These beasts are quite
intelligent as well, and use all of their advantages when confronted by would-be
dragon-slayers.

___
**Attributes:** Agility d8, Smarts d8, Spirit d10, Strength d12+8, Vigor d12

**Skills:** Athletics d10, Common Knowledge d6, Fighting d10, Intimidation d12,
Notice d12, Persuasion d10, Stealth d8

**Pace:** 8; **Parry:** 7; **Toughness:** 20 (4)

**Edges:** Frenzy (Imp), Level Headed

**Special Abilities:**
- **Armor +4:** Scaly hide.
- **Bite/Claws:** Str+d8.
- **Fear (−2):** Anyone who sees a mighty dragon must make a Fear check at −2.
- **Fiery Breath:** Dragons breathe fire for 3d6 damage (see Breath Weapons, page
175).

#### Sweep
**REQUIREMENTS:** Novice, Strength d8+, Fighting d8+
Sweep allows a character to make a single Fighting attack and apply it against all
targets in his Reach at a −2 penalty (friends and foes alike). Resolve damage
separately for each enemy that’s hit.
A fighter may only perform a Sweep once per turn. It may not be combined with
Frenzy.

> #### *Improved Sweep*

> ###### REQUIREMENTS:
Veteran, Sweep
>
> As above but the whirlwind of death may
ignore the −2 penalty.

<div class='chapter-index'><p>Savage Worlds</p></div>

<div class='pageNumber auto'></div>

</div>

\page

<div class='sw pg'>

<div class='chapter-head right bottom'><div class='chapter-bg'><img

src='https://cdnb.artstation.com/p/assets/images/images/011/338/061/large/imx-awan-
dragon-fight-final2.jpg?1529056769' /></div>
# h1 Header
Chapter Two
</div>

## Basics
The basic h1 header, or *chapter-head*, at the top of the page has some extra
hidden components to it that make it slightly more complicated than the normal
single hashtag in Homebrewery. It is a div container, wrapped around another div
container, which contains an image element and is followed by three "segments" of
text.

### Three Segments of Text

#### Title
The title is the piece of text with the largest font, in black by default. There
isn't much special about this piece, it just sits there in the center.

The title is added within the chapter-head div using an h1 header, or single
hashtag, #.

#### Byline
The byline is the smaller font that is maroon by default. In this brew, it is
position to the bottom right of the *Title*.

The byline is added by adding another line of plain text after the Title line,
within the chapter-head div.

#### "Splashy"
Splashy is the dramatic flair text in the upper left of the chapter-head on the
first page, that says "Gazook".

The splashy line comes *before* the Title line, as plain text.

<div class='note example' style='margin-top:-.4em'>

You should have no more than 3 lines of text in the chapter-head div, along with
the nested div/img tags. Be sure to look at the source code of this document to
see what it looks like.
</div>

The basic chapter-head as described just now will make a normal header like the one
on this page.

```
```

## Options

#### Byline
This segment can be positioned in 6 different spots: *left, center, right* and
*top* or *bottom*, in relation to the *Title*. This is set by adding the matching
class names to the wrapper div after *chapter-head*. For example, page 6 has it's
chapter head set to *class='chapter-head top left'* which positions the byline
first to the top, and then the left.

#### Splashy
Splashy can be set to only two different positions without touching the CSS: it's
default in the upper left, or bottom-center where it overlaps the *Title* text.
Since the upper-left is the default, nothing needs to be done to keep it there. If
you want front & center, add "splashy" to the class names of the chapter-head div.

Splashy can also get some drop shadow/outline action. This is probably more in the
'novelty' category, but check it out by adding 'shadow' to the chapter-head div
class names (be sure you have text in the "splashy" segment as described earlier).
It should add a stylized outline to your splashy text.

#### Background Image

Every chapter-head has a top parchment image, and an obscured background image.
That background can be changed using the URL in the img tag to any image link.

### CSS
Obviously everything can be customized if you want to look at the CSS. I have
tried to make the code organized and descriptive, as well as easier to make simple
changes by pulling out key properties as **CSS Variables**.

<div class='note flavor greeting'

style='position:absolute;bottom:10px;left:10%;width:80%;transform:rotate(-2deg)'>
Show me the EXAMPLES!

On page _ is a note with a bigger background image, and page _'s chapter-head
features splashy with drop shadow. Let's take a look at tables next...
</div>

<div class='chapter-index' style='top:400px;'><p>H1 Header</p></div>

<div class='pageNumber auto'></div>

</div>
\page

<div class='sw pg'>

<div class='chapter-head right bottom'><div class='chapter-bg'

style='transform:rotate(-1deg)'><img
src='https://cdnb.artstation.com/p/assets/images/images/011/338/061/large/imx-awan-
dragon-fight-final2.jpg?1529056769' /></div>
# Tables
Chapter Three
</div>

<div class='wide' style='column-count:2; column-width:8cm; column-gap:1cm; column-

fill:auto;height:300px;'>

## Tables
#### Disclaimer

Tables in Markdown are a great example of the trade-off between "user friendliness"
and "complexity". Markdown provides an easy to understand visual representation of
rows and columns but sacrifices the ability to merge cells or format rows and
columns on the fly.

In an effort to retain the simplicity of Markdown but still get tables that can
match the stylings of the SWADE Core book I had to use some pretty weird CSS rules.
As a result, and because of a table can take so many forms, **Tables are probably
the most like to give headaches** and I apologize.

<br />

### Use
Tables in the core book are used for all sorts of things, but should probably be
restricted to tabular data.

Using this style sheet, tables require a div wrapper with the class *table*
unless you don't want title (I do not think the SWADE core book has any title-less
tables, though). Inside the div wrapper a table can be placed in the normal way.

Tables can also be made *wide* like normal, to span two columns. Simply add
"wide" to the class names of the wrapper div.

One limitation that is annoying is in the setting of custom widths for columns.
My goal was to find a way to set custom widths using inline styling for individual
tables, but I couldn't figure it out. However, this is also not possible in the
default Homebrewery style, so nothing is lost. To set custom widths for a specific
table, you should give the table div wrapper an id, and then create a new CSS width
rule for each column.

</div>

<div id='size-table' class='table wide multi-section'

style='position:absolute;top:700px;width:83%;z-index:5;'>

###### Size Table

A wide table, spanning 2 columns, can be created by using a div with classes
'table' and 'wide'. The header of the table is done with an h1 header, or single
#. Then, a normal table can be made and the header row will have a black
background.

Note, this table has a description area, which is in fact where this text is.
This is done by just adding normal text after the header, before where the table
starts. **Do not** add two spaces at the end of the paragraphs here, however,
because it will cause issues with the paragraph spacing and the table below it.

| Size/ Toughness Bonus | Typical Strength Range | Scale Modifier | Typical

Height/Length Up To... | Mass Up To.. | Example Creatures |
|:-:|:-:|:-:|:-:|:-:|:-:|

**tiny**

| | | | | | |
|:-:|:-:|:-:|:-:|:-:|:-:|
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -4 | 1 | -6 | 6" | 4 lbs | Crow, mouse
| -3 | 1 | -4 | 6" | 10 lbs | Rat |

**very small**

| | | | | | |
|:-:|:-:|:-:|:-:|:-:|:-:|
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -3 | 1 | -4 | 6" | 10 lbs | Rat |

**small**

| | | | | | |
|:-:|:-:|:-:|:-:|:-:|:-:|
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -3 | 1 | -4 | 6" | 10 lbs | Rat |

**normal**

| | | | | | |
|:-:|:-:|:-:|:-:|:-:|:-:|
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -3 | 1 | -4 | 6" | 10 lbs | Rat |
| -3 | 1 | -4 | 6" | 10 lbs | Rat |

**Large (+1 wound)**

| | | | | | |
|:-:|:-:|:-:|:-:|:-:|:-:|
| -3 | 1 | -4 | 6" | 10 lbs | Rat |

<div style='background: linear-gradient(#ffffff00 3%, #ffffff

70%);position:absolute;width:100%;top:0px;height:100%;z-index:100'></div>

</div>

<div class='table wide' style='opacity:30%;position:absolute;top:600px;left:-

100px;width:83%;z-index:-1;transform:rotate(15deg)'>
###### Stupid Effects

| D20 | Effect |
|:-:|:-|
| 1 | Dead |
| 2 | Sleeps Forever |
| 3 | Never finds what they want in stores |
| 4 | Uncontrollable greed |
| 5 | Scared of Mice |
| 6 | Is haunted by the entire band ABBA |
| 7 | Must read aloud when reading anything ever. |
| 8 | Never has something to write with when needed. |
| 9 | Has a literal monkey always watching from a distance that is just a little
too far away to engage. |
| 10 | Always a little cold. |
| 11 | Always a little hot. |
| 12 | Cannot hear anyone under the age of 6. |
| 13 | A constant sense that maybe it doesn't matter. |
| 14 | Prone to slivers. |
| 15 | Inability to understand anything written in a table. |
| 16 | Sneezes when it's too quiet. |
| 17 | Farts uncontrollably in loud environments. |
| 18 | Develops a belief that cleaning oneself like a cat is the ONLY way. |
| 19 | Becomes optimistic. |
| 20 | Never has to worry about money again. |

<div
style='background:#ffffffAA;position:absolute;width:100%;top:0px;height:100%;z-
index:100'></div>

</div>

<div class='table' style='position:absolute;top:580px;right:0px;width:40%;z-index:-

1;transform:rotate(-10deg)'>

###### Castles

| Name | Location |
|:-:|:-|
| Dread Keep | Located on the Isle of Mist |
| Candy Tower | Found in the Swamp of Madness |
| Barak's Barracks | Aisle 9 |
| Sun Keep | Literally on the sun, don't go there. |
| 5 | Scared of Mice |
| 6 | Is haunted by the entire band ABBA |
| 7 | Must read aloud when reading anything ever. |
| 8 | Never has something to write with when needed. |
| 9 | Has a literal monkey always watching from a distance that is just a little
too far away to engage. |
| 10 | Always a little cold. |
| 11 | Always a little hot. |
| 12 | Cannot hear anyone under the age of 6. |
| 13 | A constant sense that maybe it doesn't matter. |
| 14 | Prone to slivers. |
| 15 | Inability to understand anything written in a table. |
| 16 | Sneezes when it's too quiet. |
| 17 | Farts uncontrollably in loud environments. |
| 18 | Develops a belief that cleaning oneself like a cat is the ONLY way. |
| 19 | Becomes optimistic. |
| 20 | Never has to worry about money again. |
<div
style='background:#ffffffDD;position:absolute;width:100%;top:0px;height:100%;z-
index:100;transform:scale(1.003); border-radius:12px;'></div>
</div>

<div class='note flavor greeting'

style='position:absolute;left:10%;width:30%;transform:rotate(4deg);z-
index:5;bottom:10px;-webkit-text-stroke:.5px black'>
Note!

The 4th column header suffers from a line break midway thru "length"- fix this by
adding a space after the slash to send "Length" to the next line. The same has
already been done in the 1st column.
</div>

<div class='note flavor'

style='position:absolute;left:70%;width:25%;transform:rotate(-15deg);z-
index:5;bottom:30px;-webkit-text-stroke:.5px black'>
Also!

The last column has a custom width set to 20%.

</div>

<div class='chapter-index' style='top:400px'>Savage Worlds</div>

<div class='pageNumber auto'></div>

</div>

\page

<div class='sw pg'>

<div class='table multi-section'>

###### Melee Weapons

**Single Column:** This is a non-wide table, restricted to a single column. This is
the default.

**Description:** Note, this table has a description area, which is in fact where
this text is. This is done by just adding normal text after the header, before
where the table starts. **Do not** add two spaces at the end of the paragraphs
here, however, because it will cause issues with the paragraph spacing and the
table below it.

**Multi-Section:** This table has multiple sections, separated by headers that span
all columns. Multi section table headers start from a base color, and then
incrementally change their hue up to 8 times. This is very basic color
scheming...it's not guaranteed to look good. It's also possible to change the text
color of the last 4 headers (this number is baked in, but adjustments can be made
with a deeper look).

| Weapon| Damage | Cost (gold) |

|:-|:-:|:-:|
**One Hand**

| | | |
|:-|:-:|:-:|
| Banana | 1d6 | 10g |
| Dagger | 1d10 | 40g |
| Middle Finger | 4d10 | 0g |

**Two Hands**

| | | |
|:-|:-:|:-:|
| Zweihander | 3d4 | 100g |
| Two Middle Fingers | 8d10 | 0g |

**Three Hands**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Um, Four Hands**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Five Hands...?**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Really, Six Hands?**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Very funny, wise guy...Seven Hands**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Eight Hands. Joke is a little stale, mate**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**Nine Hands...**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**...Ten Hands...**
| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

**I'm going home.**

| | | |
|:-|:-:|:-:|
| Three Middle Fingers | 12d10 | 0g |

</div>

```
```

#### Multi-Section Tables

This is some tricky stuff, because Markdown doesn't allow cell merging. So this is
really just a bunch of complete tables stacked on top of each other, with every
header row after the first hidden. Each table is separated by a normal paragraph
that has :before and :after pseudo elements that use Flex spacing. It's even
possible to use non-bolded letters, and use br line breaks to create a sub
line...however, this will impact the black horizontal lines.

The **color scheme** is set up to handle 9 different headers, starting from a base
color that is assigned to the *last* header of any given table, no matter how many
headers are used. I felt this gave each table a more consistent "final color"
rather than ending on a different note each time. This scheme uses HSL color
values as originally I hoped to use *css counters* to programmatically adjust the
HSL value for each row-- This apparently doesn't work at least partially because
css counters do not return a *number*, but instead a *string*, and thus can't be
used in calculations. Yes, this does cycle through *hues*, and not shades/tints.
This was just my choice.

**The base hue is set with the --multiTable-section-base-color:*n*; variable,**

with *n* being a single number representing a value on an HSL color wheel. The
text color of these section headers can be changed as well, in two parts: the base
color and the color for the **final four** headers on any table....this is in case
you need more contrast for those darker section headers.

Worth noting here that more than 9 headers are possible, but just that after 9 the
colors will stop changing. This can easily be rectified in the CSS by duplicating
the right bit of code, and incrementing the counter appropriately.

#### Normal Tables

Normal tables are possible, too. However, for the SWADE styling, the table should
still be wrapped in a div container with class='table'. These can be made *wide* by
adding "wide" to the class names like normal.

<div class='table'>

###### Pets
| Owner | Pet |
|:-:|:-:|
| Janet | Rufus the Dog |
| Billy | Gufus the Cat |
| Justin | Ruufos the Fish |
| Caroline | Gurufis the Parrot |
</div>

The double or "split" table is similar to the default split snippet, but uses
"double" as a class name. Note, the rows can become misaligned easily, and you may
be served better by one, four column, table with custom column widths.

<div class='table double dropshadow'>

###### Double Tables
| d8 | Damage Type |
|:---:|:------------|
| 1 | Acid |
| 2 | Cold |
| 3 | Fire |
| 4 | Force |

```
```

| d8 | Damage Type |
|:---:|:------------|
| 6 | Necrotic |
| 7 | Poison |
| 8 | Psychic |
| 9 | Radiant |
</div>

<div class='note flavor greeting'

style='position:absolute;left:70%;width:25%;transform:rotate(-15deg);z-
index:5;bottom:10px;-webkit-text-stroke:.5px black'>
One more thing!

Add the class name "dropshadow" to a table div for a shadow effect.
</div>

<div class='chapter-index' style='

top:400px;'><p>Tables</p></div>
<div class='pageNumber auto'></div>

</div>

\page

<div class='sw pg'>

<div class='chapter-head top left'><div class='chapter-bg'

style='top:20px;transform:rotate(-5deg) scaleX(-1) scale(1.1)'><img
src='https://i.imgur.com/V42G2Ac.jpg' /></div>
# Notes
Chapter Four
</div>

## Notes

Here is an example of a note.

<div class='note example'>

**Example:** This is an *Example* note, a text area where you might provide a brief
example for how a mechanic is supposed to play out. To see one in the real SWADE
core book, turn to page 153.

The Notes here are not made the same way as default Homebrewery, which uses html
blockquotes for styling (and which in Markdown syntax is indicated by > at the
start of each line). Instead, it is just normal text wrapped inside a div
container, and the container is then styled.

Note, everything is italic by default and using the normal syntax for italics (a
single set of asterisks) will actually revert the text to *normal*. In the SWADE
formatting rules, anything that would normally be italiced in normal body text
would instead be reverted to *normal*, such as power names.
</div>

After creating any Note text areas using the Note div, be sure to close the div and
then add an empty line in the editor before continuing to the next paragraph.

<div class='note flavor greeting text sig' style='transform:rotate(355deg)'>

Dear Reader-

Zoinks! Here is a handwritten note that brings FLAVOR to the page!

-Gazook
</div>

And that is a handwritten flavor note! Again, wrap the text you want in the note
inside a div container, and assign it the classes **note** and **flavor**. Then
type your message. In my example, I have "Dear Reader" and "-Gazook" at the start
and ends. This is done using h2 and h3 headers (double and triple hashtags,
respectively). Rotation of the entire note can be done inline.

### More Notes

`Quae in controversiam veniunt, de iis, si placet, disseramus. Inquit, dasne
adolescenti veniam? Certe, nisi voluptatem tanti aestimaretis. Nam ista vestra: Si
gravis, brevis; At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis,
inquit; Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Sed ea
mala virtuti magnitudine obruebantur. Quae cum ita sint, effectum est nihil esse
malum, quod turpe non sit. `

<div class='note flavor sig'>

Here is a note that doesn't have any Greeting on it, so ideally the body text is
centered, and the Signature is right-justified.

-Gazook
</div>

`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi quidem Antiochum,
quem audis, satis belle videris attendere. Ea, quae dialectici nunc tradunt et
docent, nonne ab illis instituta sunt aut inventa sunt?`

<div class='note flavor greeting'>

Okay...

That seemed to work...now let's try a Greeting, body text, and no Signature this
time....The Greeting should be left-justified, and the body text centered....
</div>
`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mihi quidem Antiochum,
quem audis, satis belle videris attendere. Ea, quae dialectici nunc tradunt et
docent, nonne ab illis instituta sunt aut inventa sunt?`

<div class='note flavor'>

Woohoo, this seems to be working! So finally, let's try ONLY body text. This
should be centered, with no greeting and no signature.

Oh baby, now we're cooking with FIRE!

</div>

<div class='chapter-index'>Savage Worlds</div>

<div class='pageNumber auto'></div>

</div>

\page

<div class='sw pg'>

<div class='wide'>

## Project Goals
- **Make extra Note types,** such as found in the SWADE core book on page 30
(parchment type), graph paper type (page 96), scratch paper (page 121).
- **Alternative full page backgrounds** such as parchment and graph paper and
spotty paper (page 142).
- **Flavor images** like paperclips, pieces of tape, coffee stains and ink
splatters.
- **"No color"/transparent multi-section table headers** (like the Weapon tables in
the core book).
- ~~**2-column roll tables,** so d20 roll table can be displayed in 10 rows. Is
actually 4 columns. But like on page 112.~~
- **Easier column width** manipulation for tables.
- **Premade playing card formats** for micro-brews like single items, powers,
creatures.
- ~~**"Example" header**...an uncommon type of header found at least on page 121,
123, 133, 135, 137, 143, 144...~~
- **checklist list**...with open circles for bullet points. pg 142.
- ~~**Table of Contents** formatting.~~
- Think about removing the .sw class divs and what that means.
- **Read about Baselines** and see if it can be meaningfully implemented.
- **Keep segments together** so they don't break at columns.
- How much styling should be done based on divs with classes, versus on markdown
tags?

</div>

<div class='chapter-index'>Project Goals</div>

<div class='pageNumber auto'></div>

</div>
\page

<div class='sw pg'>

<div class='toc'>
## Table Of Contents
- **[1 Savage Brew](#p1)**
- [1.1 H2 Header](#p1) *1*
- [1.1.1 Here is a Level 3 Header](#p1) *1*
- [1.1.2 **Wild Card Indicators?**](#p1) *1*
- [1.1.3 No Wild Card](#p1) *1*
- [1.2 Powers](#p2) *2*
- [1.2.1 List of Powers](#p2) *2*
- [1.3 Bestiary ](#p2) *2*
- **[2 Headers](#p3)**
- [2.1 Basics](#p3) *3*
- [2.1.1 Three Segments of Text](#p3) *3*
- [2.2 Options](#p3) *3*
- [2.2.1 CSS](#p3) *3*
- **[3 Tables](#p4)**
- [3.1 Tables](#p4) *4*
- [3.1.1 Use](#p4) *4*
- **[4 Notes](#p6)**
- [4.1 ](#p6) *6*
- [4.1.1 More Notes](#p6) *6*
- [4.2 Project Goals](#p7) *6*
- **[5 Table of Contents](#p8)**
- [4.3 Attributions](#p8) *8*
</div>

### Table of Contents

A table of contents can be generated *almost* the same way as usual, with a small
manual change. I assume most people create a ToC by using the pre-made snippet in
the Editor menu as this is an easy way to create links to all your pages. Inside
the 'sw pg' div wrapper, the same ToC method can be used for this SWADE stylesheet.
However, what it spits out at first will seem pretty gnarly/broken. This can be
fixed by either deleting the "third level" headers, or by manually 'bumping back'
those third level headers to be even with the h2 headers in the list. This means
deleting 2 'spaces' on each impacted line.

#### What about the Page Numbers?

The page numbers, on the right hand side of the column, have to be manually
entered. At the end of each line in the editor, add a space followed by the number
inside a single set of asterisks (space asterisk number asterisk), as if you are
italicizing the number.

Yes, this is a huge pain if you have a large brew. If you decide that page numbers
are not important, but don't want to leave hanging dotted lines, you can remove the
dotted lines by making edits in the CSS which are sort of explained there.

## Attributions
- The graphics representing various paper stock, as well as the color pallete are
from the SWADE players guide published by Pinnacle.
- The flaming sword icon used for the Wild Card indicator is [skill sword flame]
(https://thenounproject.com/search/?q=fire+sword&i=2360212) by Maxicons from the
Noun Project. CC-BY
- The Core Skill indicator is [expert](https://thenounproject.com/search/?
q=skill&i=2587312) by Adrien Coquet from the Noun Project. CC-BY
- Dice in the background is [Dice](https://thenounproject.com/search/?
q=d20&i=2388523) by Travis Avery from the Noun Project
- Text art featured in the source code is generated from
[fSymbols.com](https://fsymbols.com/).

<img
src='https://i.imgur.com/HMrJ4zQ.png'
style='position:absolute; bottom:-50px; right:-60px;
width:450px;opacity:20%;transform:rotate(5deg)' />

<div class='chapter-index'>Savage Worlds</div>

<div class='pageNumber auto'></div>

</div>

\page

\page

<!-- hidden page...the code below is only for CSS styling, specifically related to
display THIS brew...nothing here is needed for displaying stuff in SWADE style -->

<style>

/* ----- Hide last page --- */

.phb:last-child {
visibility:hidden;
height:0px;
padding:0

/* ------ Gray out Lorem Ipsum ------*/

.sw code {
visibility:unset;
color:#aaaaaa;
}

/* ----- Quick Entry ----- */

/* ------------------------ */

:root {
--zoom:1.6; /* 1=100%, 2=200%, etc */
--book:initial; /* initial=offset first page, */
/* none=no offset of first page */
}

/* ----- Setting up page spread ----- */

/* ----------------------------------- */
.brewRenderer {
transform:scale(calc(1/var(--zoom)));
transform-origin:top left;
overflow: unset !important;
}

.pages {
display:grid;
width:calc(100%*var(--zoom));
height:calc(98%*var(--zoom));
overflow-y: scroll;
margin-top:0px !important;
grid-template-columns: repeat(auto-fill, 816px);
column-gap:20px;
row-gap:20px;
justify-content: center;
padding-top:30px;
}

.pages:before {
content:'';
display:var(--book);
}

/* ----- Preview pane formatting ----- */

/* ------------------------------------ */

body {
background:url('https://i.imgur.com/b8kUc5Y.jpg') 90% 90%;
background-size:auto 120%;
background-attachment: fixed;
}

body > div {

background:rgba(0,0,0,.75);
position:absolute;
top:0 !important;
width:100%;
height:100%;
}

#headerbox {
position:fixed;
visibility:visible;
background:#666666A4;
top:0px;
left:0;
padding:5px;
text-align:center;
width:calc(100%*var(--zoom));
text-rendering:auto;
}

#headerbox p {
font-size:18px;
color:goldenrod;
line-height:1em !important;
 padding-bottom:0 !important;
font-family: 'scaly sans';
font-variant:small-caps
}

#headerbox a {
color:goldenrod;
text-decoration:none;
}

#headerbox a:hover {
text-decoration:underline;
}

</style>

<div id='headerbox'>*Savage* Stylesheet |

[Gazook89](https://homebrewery.naturalcrit.com/user/Gazook89) | Optimized for
Firefox & Chrome</div>

<style>
@import url('https://raw.githack.com/Gazook89/Homebrewery-Snippets/main/Ko-Fi-
Korner.css');
</style>