Wayfinder's Guide to Eberron theme

<style>

/* Background */
.phb{ 
  background: #fff 
}

/* Notes */
.phb blockquote {
    font-family: Serif;
    background-color: #cccccc;
}

/*Headers*/
.phb h1{
font-family:        NodestoCaps;
font-weight:        500;
color:              #4f4f4f;}

.phb h2 {
font-family:        NodestoCaps;
font-weight:        500;
color:              #4f4f4f;
font-size:          .8cm;
border-bottom:      #cccccc
}

/* Tables */
.phb table tbody tr:nth-child(odd) {
    background-color: #eaeaea
}

</style>
<style>

.phb:after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 0px;
    height: 80px;
    width: 100%;
    background-image: url('https://www.gmbinder.com/images/odfFYfc.png');
    background-size: cover
}
.phb:nth-child(even):after {
  background-image: url('https://www.gmbinder.com/images/odfFYfc.png');
  transform: scaleX(-1)
}

.phb:nth-child(even) .footnote {
    left: 80px;
    text-align: right
}

.phb .pageNumber{
    position:absolute;
    bottom:39px;
    width:50px;
    font-size:1.05em;
    color:#707070;
    text-align:center
}

.phb:nth-child(even) .pageNumber {
  right: 20px
}

.phb:nth-child(odd) .pageNumber {
  left: 20px
}

</style>
<style>

.phb .footnote{
    position:absolute;
    left:5px;
    bottom:39px;
    width:200px;
    font-size:.83em;
    color:#919191;
    text-align:right
}

</style>
<style>

.phb:nth-child(even):after {
  transform: scaleX(-1)
}

</style>
<style>

.phb:nth-child(odd) .footnote {
  right: 80px;
  text-align: right
}

</style>

# Header 1

## Header 2

Text

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
|  3  | 300gp |
|  4  | 400gp |
|  5  | 500gp |
|  6  | 600gp |
|  7  | 700gp |
|  8  | 1000gp |

> ##### Catchy Title
> Useful Information

<div class='pageNumber'>12</div>
<div class='footnote'>CHAPTER 1 | SECTION 1</div>

\pagebreak

<div class='pageNumber'>13</div>
<div class='footnote'>CHAPTER 1 | SECTION 2</div>

# Header 1

## Header 2

Text