Modern Theme Test by

:root {
  --main-color:           #1690A8;
  --main-color-dark:      #0F6475;
  --main-color-light:     #5BB1C2;
  --main-color-lighter:   #D0E8ED;
  --main-color-lightest:  #F6FDFE;

--main-color-stripe1:   #fbfbfb;
  --main-color-stripe2:   #f5f5f5;
}

.phb {
    background: #fff;
    font-family: 'Montserrat';
    font-size: .3cm;
    letter-spacing: -0.2pt;
    color: #000;
}
.phb table { font-family: 'Montserrat'; font-size: 0.3cm; }

.phb .descriptive { font-family: 'Montserrat'; font-size: 0.3cm; }
.phb .descriptive p { font-family: 'Montserrat'; font-size: 0.3cm; }
.phb .descriptive em { font-family: 'Montserrat'; }
.phb .descriptive strong { font-family: 'Montserrat'; }

.phb blockquote { font-family: 'Montserrat'; font-size: 0.3cm; }
.phb blockquote p { font-family: 'Montserrat'; font-size: 0.3cm; }
.phb blockquote em { font-family: 'Montserrat'; }
.phb blockquote strong { font-family: 'Montserrat'; }
.phb .spellList { font-family: 'Montserrat'; font-size: 0.3cm; }
.phb .spellList ul { font-family: 'Montserrat'; font-size: 0.3cm; }

.phb hr+section blockquote h3 {font-family: 'Montserrat'; }

.phb h1, .phb h2, .phb h3, .phb h4, .phb h5, .phb h6 { font-family: 'Montserrat'; text-transform: uppercase; color: #000; }
.phb h3 { border-bottom-color: var(--main-color); }
.phb h5 { color: var(--main-color); }
.phb h6 { font-weight: bold; margin-bottom: 0.3em; }

.phb h1+p::first-letter {
    float: left;
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 4.6em;
    color: #000;
    text-shadow: 3px 3px var(--main-color-light);
    line-height: .8em;
    letter-spacing: 0.05em;
}

.phb .back-cover-header { color: var(--main-color); }
.phb .back-cover-text a, .phb .back-cover-close a { color: var(--main-color); }
.phb .back-cover-logo:after {
    position: absolute;
    content: "";
    background: var(--main-color);
    width: 100%;
    height: 100%;
    mix-blend-mode: darken;
}

.phb a { color: var(--main-color-dark); }
.phb strong { letter-spacing: inherit; }

.phb table thead tr th {
    text-transform: uppercase;
    color: var(--main-color-dark);
    border-bottom: 2px solid var(--main-color);
    font-size: 85%;
}
.phb table tbody tr:nth-child(odd) {
   background: var(--main-color-stripe1);
}
.phb table tbody tr:nth-child(even) {
   background: var(--main-color-stripe2);
}

.phb blockquote, .phb .descriptive { 
    border: 2px solid #000;
    border-image: none;
    border-image-width: 0px;
}
.phb blockquote {
    background: rgba(119, 179, 36, 0.1);
    border-color: rgb(119, 179, 36);
    margin: 0 -0.7em 1em;
    padding: 1px 0.7em;
    border-width: 3px 0px 3px 0px;
    box-shadow: none;
}
.phb .descriptive {
    display: block;
    background: rgba(115, 81, 69, 0.1);
    border-color: rgb(115, 81, 69);
    margin: 0 -1.25em 1em;
    padding: 1px 1em;
    border-width: 0px 3px 0px 3px;
}

.phb blockquote p, .phb blockquote ul, 
.phb .descriptive p, .phb .descriptive ul {
    line-height: 1.1em;
}
.phb blockquote h5, 
.phb .descriptive h5 {
    margin-top: 10.5px;
}

.phb .classTable h5, 
.phb blockquote h5, 
.phb .descriptive h5 {
    color: #000;
}
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child, 
.descriptive p:last-child, .descriptive ul:last-child, .descriptive ol:last-child {
    margin-bottom: 10.5px;
}

.phb .classTable { 
    border: 3px solid var(--main-color);
    margin: 0 -1em 1.5em;
    padding: 0 .7em;
    border-image: -webkit-linear-gradient(135deg, var(--main-color) 0%, var(--main-color-lightest) 50%, var(--main-color) 100%) 1;
    background: #fff;
    position: relative;
}

.phb .classTable:before, .phb .classTable:after {
    content: "";
    border: 3px solid var(--main-color);
    position: absolute;
    z-index: -1;
    display: inline-block;
    padding: 12px;
}
.phb .classTable:before { top: -9px; left: -9px; }
.phb .classTable:after {bottom: -9px; right: -9px; }

.phb .footnote, .phb .pageNumber {
    font-family: 'Montserrat';
    font-weight: 900;
    text-transform: uppercase;
    color: var(--main-color);
    bottom: 0.5cm;
    font-size: 0.28cm;
    line-height: 0.6cm;
    padding: 0 1em;
}
.phb .footnote { 
    width: auto;
    right: initial;
}
.phb:nth-of-type(odd) .footnote { right: 80px; }
.phb:nth-of-type(even) .footnote { left: 80px; }

.phb:after { 
    background-image: none; 
    background-color: var(--main-color-lightest);
    height: 0.6cm;
    z-index: -5;
    bottom: 0.5cm;
}

.phb hr+section blockquote {
    padding: 1.3em 0.75em 0.5em;
    border-image: none;
    border-width: 6px 0px 3px;
    border-color: hsl(45, 82%, 60%);
    background: hsl(45, 82%, 94%);
    background-image: none;
    position: relative;
    overflow: visible;
}

.phb hr+section blockquote:before, .phb hr+section blockquote:after {
    position: absolute;
    left: 0px;
    width: 100%;
    content: "";
    border: 0px solid hsl(45, 82%, 60%);
}
.phb hr+section blockquote:before {
    top: -6px;
    height: 12px;
    border-width: 0 6px 0;
}
.phb hr+section blockquote:after {
    bottom: -3px;
    height: 8px;
    border-width: 0 3px 0;
}

.phb hr+section blockquote ul strong {
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: .3cm;
}
.phb hr+section blockquote hr+ul strong { color: hsl(358, 82%, 30%); }
.phb hr+section blockquote hr+ul { color: hsl(358, 82%, 15%); }
.phb hr+section blockquote hr {
    background: hsl(45, 60%, 75%);
    height: 2px;
    margin: 6px 0;
}
.phb hr+section blockquote hr+table { padding-top: 5px; }
.phb hr+section blockquote table th { color: hsl(358, 82%, 30%); font-size: 100%; padding-bottom: 0; border-bottom: none; }
.phb hr+section blockquote h3 { font-family: 'Montserrat'; font-weight: 900; border-bottom: none; }
.phb hr+section blockquote strong { font-weight: bold; }

.phb .partpage, .phb .partpage-dmg { background: none; }
.phb .partpage h1, .phb .partpage-dmg h1 {
    font-family: "Montserrat";
    font-size: 64pt;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 9em 0 0;
    background: #000;
    color: #fff;
    padding: 12px 0 0;
}

.phb .partpage h5, .phb .partpage-dmg h5 {
    font-family: "Montserrat";
    font-size: 24pt;
    background: #000;
    color: var(--main-color);
    margin: 0;
    padding: 0 0 16px;
}
.phb .partpage-dmg h1, .phb .partpage-dmg h5 { background: var(--main-color); }
.phb .partpage-dmg h5 { color: #000; }

.phb .back-cover-diamond { height: 0; left: 2.3cm; }
.phb .back-cover-diamond:before {
    content: "";
    display: inline-block;
    border-style: solid;
    width: 0;
    height: 0;
    border-width: 8px 132px 8px 8px;
    border-color: transparent var(--main-color) transparent transparent;
}
.phb .back-cover-diamond:after {
    content: "";
    display: inline-block;
    border-style: solid;
    width: 0;
    height: 0;
    border-width: 8px 8px 8px 132px;
    border-color: transparent transparent transparent var(--main-color);
}

.phb .cover-header { font-family: "Montserrat"; font-weight: 900; text-transform: uppercase; top: 70px; }
.phb .cover-footer { font-family: "Montserrat"; font-weight: 900; text-transform: uppercase; }
.phb .cover-diamond { height: 0px; left: 208px; top: 160px;}
.phb .cover-diamond:before {
    content: "";
    display: inline-block;
    border-style: solid;
    width: 0;
    height: 0;
    border-width: 8px 192px 8px 8px;
    border-color: transparent var(--main-color) transparent transparent;
}
.phb .cover-diamond:after {
    content: "";
    display: inline-block;
    border-style: solid;
    width: 0;
    height: 0;
    border-width: 8px 8px 8px 192px;
    border-color: transparent transparent transparent var(--main-color);
}
.phb .cover-splotch { filter: hue-rotate(188deg) saturate(0.81) brightness(1.27); }
</style>

<div class='cover-header'>Modern Theme</div>

<div class='cover-footer'>A document to test all of your new swanky themes.</div>

\pagebreak

**The intent of this document is be a test document for any new GM Binder themes you might create. To use it, grab the source of this document, paste it into a new document, and then apply your theme styles above.**

</div>

# Headline 1 Headline 1 Headline 1

Ho mankoi lle uma tanya amin khiluva lle a' gurtha ar' thar quel lome. Shaalth Nuduin amin panta tangwa. Tampa tanya! Naugrim tula uialtum tenna' san'. Aman tel' Seldarine aa' menle nauva calen ar' ta hwesta e' ale'quenle uuma dela amin uuma malia. Gorgaerea rwalaerea atost en' entula orme amin autien rath.

Lye yala onna en' kemen tanya awra! En!. Lirimaerea mereth en draugrim Yallume Elenya. Amin hiraetha quel undome nai uuvanimo turamin cormamin niuve tenna' ta elea lle au'. Yavannie ram en' ondo mereth en draugrim tanka tel' taurnin. Aman tel' Seldarine ram en' templa Amrun'quessir amin khiluva lle a' gurtha ar' thar.

## Headline 2

### Headline 3

#### Headline 4

\columnbreak

##### Headline 5

###### Headline 6

### Type Faces
* **Bold**
* *Italics*
* ~~Strikethrough~~
* ^Super^
* <sup>SuperScript</sup>
* <sub>SubScript</sub>
* [Internal Link](https://www.gmbinder.com)
* [External Link](https://www.reddit.com/r/uneartherarcana)

1. Item 1
2. Item 2
3. Item 3

* Item 1
* Item 2
* Item 3

<div class="footnote">
Theme tester document by /u/Iveld
</div>

\pagebreakNum

##### Class Block Narrow
| Level | Proficiency Bonus | Features | Some Modifier |
|:---:|:---:|:---|:---:|
| 1st | +2 | Something | — |
| 2nd | ─ | ─ | — |
| ... | ─  | ─ | ─ |
| 20th | ─ | ─ | ─ |

</div>

> ##### Catchy Title
> Useful Information

<div class='descriptive'>
 
##### Catchy Title
Useful information
 
</div>

## Class Features
As a class_name, you gain the following class features
#### Hit Points
___
- **Hit Dice:** 1d10 per class_name level
- **Hit Points at 1st Level:** something
- **Hit Points at Higher Levels:** something_higher

#### Proficiencies
___
- **Armor:** armor
- **Weapons:** weapons
- **Tools:** tools

___
- **Saving Throws:** saving_throws
- **Skills:** Choose two from skills

#### Equipment
You start with the following equipment, in addition to the equipment granted by your background:
- *(a)* a item1 or *(b)* item2

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

\columnbreak

| d8  | Loot |
|:---:|:-----------:|
|  1  | 100gp |
|  2  | 200gp |
|  3  | 300gp |
|  4  | 400gp |

| d8  | Loot |
|:---:|:-----------:|
|  5  | 500gp |
|  6  | 600gp |
|  7  | 700gp |
|  8  | 1000gp |

</div>

#### Spell Name
*Spell Type*
___
- **Casting Time:** Casting Time
- **Range:** Range
- **Components:** V, S
- **Duration:**  Duration

A description bursts from the caster's fingers and spreads at the speed of the reader's comprehension.

___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class** AC
> - **Hit Points** Hitpoints
> - **Speed** Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|Str (+Mod)|Dex (+Mod)|Con (+Mod)|Int (+Mod)|Wis (+Mod)|Cha (+Mod)|
>___
> - **Condition Immunities** Some
> - **Senses** Senses
> - **Languages** Languages
> - **Challenge** Senses
> ___
>
> ### Actions
> ***Ability Description.*** *Attack Style:* +4 to hit, reach 5 ft., one target. *Hit* 5 (1d6 + 2)

<div class="footnote">
Theme tester document by /u/Iveld
</div>

\pagebreakNum

___
___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class** AC
> - **Hit Points** Hitpoints
> - **Speed** Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|Str (+Mod)|Dex (+Mod)|Con (+Mod)|Int (+Mod)|Wis (+Mod)|Cha (+Mod)|
>___
> - **Condition Immunities** Some
> - **Senses** Senses
> - **Languages** Languages
> - **Challenge** Senses
> ___
>
> ### Actions
> ***Ability Description.*** *Attack Style:* +4 to hit, reach 5 ft., one target. *Hit* 5 (1d6 + 2)

##### Cantrips (0 Level)
- Cantrip A
- Cantrip B
- Cantrip C

##### 1st Level
- Spell A
- Spell B
- Spell C

##### 2nd Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 3rd Level
- Spell A
- Spell B
- Spell C

##### 4th Level
- Spell A
- Spell B
- Spell C

##### 5th Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 6th Level
- Spell A
- Spell B
- Spell C

##### 7th Level
- Spell A
- Spell B
- Spell C

##### 8th Level
- Spell A
- Spell B
- Spell C

\columnbreak

##### 9th Level
- Spell A
- Spell B
- Spell C

</div>

##### Class Block Wide
| Level | Proficiency Bonus | Features | Cantrips Known | Spells Known | 1st | 2nd | 3rd | 4th | 5th | 6th | 7th | 8th | 9th |
|:---:|:---:|:---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 1st | +2 | Something | — | — | — | — | — | — | — | — | — | — | — |
| 2nd | ─ | ─ | — | — | — | — | — | — | — | — | — | — | — |
| ... | ─  | ─ | ─ | ─ | ─ | — | — | — | — | — | — | — | — |
| 20th | ─ | ─ | ─ | ─ | ─ | ─ | ─ | ─ | ─ | — | — | — | — |

</div>

<div class="footnote">
Theme tester document by /u/Iveld
</div>

\pagebreakNum

# PART 1
##### Summary of Things

</div>

\pagebreak

# PART 2
##### Summary of Thangs

</div>

\pagebreak
 
 <style>
   /** Change the p2 to whatever page number is the last page in your document **/
   .phb#p5:after { display:none; }
 </style>
 
 <div class='back-cover-image'></div>
 
 <div style='margin-top:20px;'></div>
 
 <div class='back-cover-header'>
 
 Practice
 
 Safe
 
 Homebrewing
 
 </div>
 
 <div class='back-cover-text'>
 
 People love to flex their creative muscles while composing new homebrew content. More often than not, the inspiration for you homebrew comes from another source. Sometimes significantly. Other times just as a spark.
 
 What is important for the community is that you share your sources of inspiration. This back cover can serve as an easy to find, easy to read place for you to do just that.
 
 So go ahead, remove this chunk of copy and tell everyone who inspired you.
 
 Cover Art: [Skiorh](https://skiorh.deviantart.com/art/Old-wizard-475018762)
 
 </div>
 
 <div class='back-cover-diamond' style='top: 679px;'></div>
 
 <div style='margin-top:35px;'></div>
 
 <div class='back-cover-close'>
 
 When you're ready to share with the community, don't forget to mark your document as public so people can find it in the [GM Binder Search](https://www.gmbinder.com/search)
 
 </div>
 
 <div class='back-cover-logo'></div>
 
 <div class='back-cover-logo-link'>
 
 [WWW.GMBINDER.COM](https://www.gmbinder.com)
 
 </div>
 
 \columnbreak
 
 <div class='back-cover-right'>
 
 ##### More Credits
 
 Maybe you have so many people to give credit to that you need a bit more space. Well, you can use this column to do exactly that!
 
 </div>