.card-holder {
    background-color: #c3ddeb;
}

   .main-holder .early-access {
    background-color: var(--dh-color-pale-mustard);
    padding: 40px 20px 20px;
    margin: 40px 0px;
    h2 {
        margin: 0px;
    }
}

                          .main-holder p {
    b {
        background-color: red;
    }
    i {
        background-color: orange;
    }
}   

.main-holder .reader-page, .main-holder {
    background: none;
}

.main-holder-page .chapter-header-image {
    display: none;
}

/*Playtest Styles*/

@font-face {
  font-family: Yrsa;
  src: url("https://content.demiplane.com/fonts/Yrsa-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: IvyMode-Regular;
  src: url("https://content.demiplane.com/fonts/IvyMode-Regular.ttf") format("truetype");
}
@font-face {
  font-family: IvyMode-Bold;
  src: url("https://content.demiplane.com/fonts/IvyMode-Bold.ttf") format("truetype");
}
@font-face {
  font-family: Overpass;
  src: url("https://content.demiplane.com/fonts/Overpass-Regular.ttf") format("truetype");
}
@font-face {
  font-family: Overpass-Black;
  src: url("https://content.demiplane.com/fonts/Overpass-Black.ttf") format("truetype");
}
@font-face {
  font-family: Eveleth-Thin;
  src: url("https://content.demiplane.com/fonts/EvelethCleanThin.otf") format("truetype");
}

@font-face {
  font-family: Eveleth-Clean;
  src: url("https://content.demiplane.com/fonts/EvelethCleanRegular.otf") format("truetype");
}
@font-face {
  font-family: Minion-Pro;
  src: url("https://content.demiplane.com/fonts/MinionPro-Regular.otf") format("opentype");
}
@font-face {
  font-family: Questa-Light;
  src: url("https://content.demiplane.com/fonts/Questa Sans Light.ttf") format("truetype");
}
@font-face {
  font-family: Questa-Italic;
  src: url("https://content.demiplane.com/fonts/Questa Sans Italic.ttf") format("truetype");
}
@font-face {
  font-family: Questa-Bold;
  src: url("https://content.demiplane.com/fonts/Questa Sans Bold.ttf") format("truetype");
}
@font-face {
  font-family: Questa-EmBold;
  src: url("https://content.demiplane.com/fonts/Questa Sans Bold Italic.ttf") format("truetype");
}

@font-face {
  font-family: Questa-Sans;
  src: url("https://content.demiplane.com/fonts/Questa Sans Medium.ttf") format("truetype");
}

@font-face {
  font-family: Questa-EmSlab;
  src: url("https://content.demiplane.com/fonts/Questa Slab Italic.ttf") format("truetype");
}

@font-face {
    font-family: EllisHand;
    src: url("https://content.demiplane.com/fonts/EllisHandRegular.otf")
    format("opentype");
}


:root {
  --dh-clr-base-1: #1E184D !important;
  --dh-color-dark-blue: #0a0f21;
  --dh-color-purple: #1e184d;
  --dh-color-purple-light: #38227b;
  --dh-color-gold: #f3c267;
  --dh-color-gold-light: #fef790;
  --dh-color-gold-dark: #e38c3e;
  --dh-color-teal: #81ccc3;
  --dh-color-blue: #2878be;
  --dh-color-off-white: #F2F3F4;
  --dh-color-gray: #d8d8d6;
  --h1-font: Eveleth-Thin;
  --h2-font: Eveleth-Clean;
  --h3-font: Eveleth-Clean;
  --h4-font: Questa-Sans;
  --p-font: Questa-Light;
  --p-font-em: Questa-Italic;
  --p-font-bold: Questa-Bold;
  --p-font-em-bold: Questa-EmBold;
  --p-tip-font: Questa-EmSlab;
  --dh-color-mustard: #927c3e;
  --dh-color-pale-mustard: #ece7da;
  --dh-color-vibrant-mustard: #dab65d;
  --dh-color-forest: #57653d;
  --dh-color-pale-forest: #868b6f;
  --dh-color-faded: #f0f1eb;
  --dh-color-chocolate: #241e1d;
  --dh-color-clay: #ab5b2c;
  --dh-color-pale-clay: #f6ede5;
  --dh-color-blood: #9b2a29;
  --dh-color-teal: #376771;
  --dh-color-purple: #6f3e83;
  --dh-color-pale-purple: #f5f2f6;
}

/* Images */
.main-holder .book-image-center {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

.main-holder .book-image-left {
  float: left;
  margin: 10px;
}

.main-holder .book-image-right {
  float: right;
  margin: 10px;
}

@media screen and (max-width: 850px) {
  .main-holder .book-image-center {
    max-width: 90%;
  }
  .main-holder .book-image-left {
    max-width: 80%;
  }
  .main-holder .book-image-right {
    max-width: 80%;
  }
}
@media screen and (max-width: 650px) {
  .main-holder .book-image-left {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
  }
  .main-holder .book-image-right {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Body Background */

.reader-body-background, .tabula-content-area {
  background-color: white;
  background-image:url(https://content.demiplane.com/compendium/daggerheart/core/css/dhbg.jpg?format=webp) !important;
  background-size: 100% !important;
}

.main-holder {
  margin-top: 54px !important;
  margin: auto;
}

.li-example {
  padding: 0 5em 0 5em;
}

@media screen and (max-width: 500px) {
  .li-example {
    padding: 0 2em 0 2em !important;
  }
}
.col-list {
  columns: 3;
  padding: 10px;
}

.col-list p {
  line-height: var(--font-size-small-2);
}

.main-holder a {
  color: var(--dh-color-blue);
  font-family: inherit !important;
}

.main-holder p em {
  font-family: "Overpass";
  font-style: italic;
}

.main-holder li em {
  font-family: "Overpass";
  font-style: italic;
  font-size: var(--font-size-1);
}

.reader-toc-label:hover {
  background-color: var(--dh-color-teal);
  color: white !important;
}

.feature-heading {
  font-size: var(--font-size-1);
  margin-bottom: -10px;
  margin-top: 20px;
}

.main-holder .image-with-subtitle-center {
  margin-top: 30px;
  text-align: center !important;
}

.example-block {
  margin: 40px 0 40px 0 !important;
}

.example-block p {
  padding: 0 25px 0 20px !important;
}

@media screen and (max-width: 500px) {
  .example-block {
    margin: 20px 0 20px 0 !important;
  }
  .example-block p {
    padding: 0 10px 0 10px !important;
  }
}

.gm-list {
  line-height: var(--font-size-1);
  padding-left: 5px;
}

.paired-list {
  margin: 30px 0 25px 0;
}

.struckout {
  text-decoration: line-through;
}

.fill-in-blank {
  letter-spacing: -2px;
}

.unavailable-content {
  background-color: var(--dh-tertiary);
  text-align: center;
}

/*Domains*/
.main-holder .dh-domain-container {
  display: flex;
  gap: 2%;
}

.main-holder .dh-domain-container div:nth-of-type(1) {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.main-holder .dh-domain-container div:nth-of-type(1) * {
  margin: 0px;
}

.main-holder .dh-domain-container div:nth-of-type(2) {
  width: 78%;
}

/*Equipment Table*/
.main-holder .equipment-table {
  margin-top: 10px;
  border: 1px solid #a2a2a2;
  border-collapse: collapse;
  color: black;
  font-family: Lora;
}

.main-holder .equipment-table tr td {
  border-right: 1px solid #bfbfbf;
  border-top: 1px solid #bfbfbf;
  padding: 10px;
}

.main-holder .equipment-table th {
  background-color: var(--dh-color-purple) !important;
  color: #fff !important;
  border: 1px solid var(--dh-color-purple-light) !important;
  padding: 10px 5px 0 5px !important;
}

.main-holder .equipment-table th p {
  color: #fff !important;
}

.main-holder .equipment-table tbody tr:nth-child(odd) {
  background-color: #e2dfe5;
}

/*Armor Table*/
.main-holder .armor-table {
  margin-top: 10px;
  border: 1px solid #a2a2a2;
  border-collapse: collapse;
  color: black;
  font-family: Overpass;
  width: 100% !important;
}

.main-holder .armor-table tr td {
  border-right: 1px solid #bfbfbf;
  border-top: 1px solid #bfbfbf;
}

.main-holder .armor-table p {
  padding: 10px !important;
}

.main-holder .armor-table th {
  background-color: var(--dh-color-purple) !important;
  color: #fff !important;
  border: 1px solid var(--dh-color-purple-light) !important;
  padding: 10px 5px 0 5px !important;
}

.main-holder .armor-table tbody td:nth-child(even) {
  text-align: center !important;
}

.main-holder .armor-table th p {
  color: #fff !important;
}

.main-holder .armor-table tbody tr:nth-child(odd) {
  background-color: #e2dfe5;
}

/*Loot Table*/
.main-holder .loot-table {
  border: 2px solid var(--dh-mid-grey);
  border-collapse: collapse;
}

.main-holder .loot-table tr td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding-bottom: var(--font-size-5);
  padding: 10px;
}

.main-holder .loot-table tr td:nth-of-type(2) {
  border-right: 0px solid black;
}

.main-holder .loot-table tr:last-of-type td {
  border-bottom: 0px solid black;
}

.main-holder .loot-table th {
  background-color: var(--dh-color-purple) !important;
  color: #fff !important;
  border: 1px solid var(--dh-color-purple-light) !important;
  padding: 10px 5px 0 5px !important;
}

.main-holder .loot-table th p {
  color: #fff !important;
}

.main-holder .loot-table tbody tr:nth-child(odd) {
  background-color: #e2dfe5;
}

/*Moments Table*/
.main-holder .moments-table {
  margin-top: var(--font-size-4);
  border: 2px solid black;
  border-collapse: collapse;
}

.main-holder .moments-table th {
  background-color: var(--dh-color-purple) !important;
  color: #fff !important;
  border: 0px solid var(--dh-color-purple-light) !important;
  padding: 10px 5px 0 5px !important;
}

.main-holder .moments-table th p em {
  color: #fff !important;
}

.main-holder .moments-table tr td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px 10px 5px 10px !important;
}

.main-holder .moments-table tbody tr:nth-child(odd) {
  background-color: #e2dfe5;
}

.main-holder .moments-table td:nth-child(odd) {
  min-width: 10% !important;
  text-align: center !important;
  border-right: 0px solid var(--dh-color-purple-light) !important;
}

/*Manifest*/
.one-burden::after {
  content: "";
  background-image: url(https://content.demiplane.com/compendium/daggerheart/playtest/css/06-01-Onehand.png?format=webp);
  display: inline-block;
  background-repeat: no-repeat;
  height: var(--font-size-3);
  width: var(--font-size-3);
  background-size: contain;
  background-position: center;
  position: relative;
  top: 5px;
  left: 5px;
}

.two-burden::after {
  content: "";
  background-image: url(https://content.demiplane.com/compendium/daggerheart/playtest/css/06-02-Twohand.png?format=webp);
  display: inline-block;
  background-repeat: no-repeat;
  height: var(--font-size-5);
  width: var(--font-size-5);
  background-size: contain;
  background-position: center;
  position: relative;
  top: 10px;
  left: 5px;
}

.main-holder .weapon-block {
  margin-top: 1.5em;
  margin-bottom: 10px;
  padding: 0 0.5em 0.5em 0.5em;
  min-height: 40px;
  border-bottom: 2px solid var(--dh-color-teal);
}

.main-holder .weapon-block p {
  margin-bottom: -0.5em;
}

.last-block {
  margin-bottom: 2em;
}

.monster-block {
  margin: 1em 0 1em 0;
  padding: 0.9em;
  border-bottom: 2px solid var(--dh-light-grey);
}

.monster-block p {
  margin-bottom: -4px;
}

.monster-name {
  background-color: var(--dh-color-gray);
  font-family: "Eveleth-Clean" !important;
  font-style: normal !important;
  color: #000 !important;
  font-size: var(--font-size-1) !important;
  padding: 5px;
  text-align: center;
}

.adversary-core-stats {
  padding: 1em 0 0 0.5em;
  line-height: var(--font-size-1);
}

.adversary-tactics {
  padding: 0em 0 0 0.5em;
  text-align: center;
}

.adversary-detail {
  padding: 0.5em 0 0 0.5em;
}

.npc-block {
  margin: 1.5em 0 1.5em 1em !important;
  padding: 0px 0 10px 0;
  border-bottom: 2px solid var(--dh-color-teal);
}

.npc-block p {
  margin-bottom: -7px;
}

/* Adversary and Environment Displays */
.environment-block {
  margin: 1em 0 1em 0;
  padding: 0.9em;
  border-bottom: 2px solid var(--dh-light-grey);
}

.environment-subheader {
  background-color: var(--dh-light-grey);
  margin-top: -10px;
  padding: 5px 10px 15px 10px;
}

.environment-block p {
  margin-bottom: -4px;
}

.main-holder .environment-name {
  background-color: black;
  font-family: "Overpass-Black";
  font-style: normal;
  color: #fff !important;
  font-size: var(--font-size-1);
  padding: 5px;
  text-align: center;
}

.environment-core-stats {
  padding: 7px;
  line-height: var(--font-size-1);
}

.environment-tactics {
  padding: 0em 0 0 0.5em;
  text-align: center;
}

.environment-detail {
  padding: 0.5em 0 0 0.5em;
  min-width: 70%;
}

.main-holder .environment-hook {
  font-style: italic;
  margin-bottom: var(--font-size-1);
}

.main-holder .environment-statistics {
  display: flex;
}

.monster-block {
  margin: 1em 0 1em 0;
  padding: 0.9em;
  border-bottom: 2px solid var(--dh-light-grey);
}

.monster-block p {
  margin-bottom: -4px;
}

.main-holder .monster-name {
  background-color: black;
  font-family: Overpass-Black;
  font-style: normal;
  color: white !important;
  font-size: var(--font-size-1);
  padding: 5px;
  text-align: center;
}

.main-holder .adversary-statistics {
  display: flex;
}

.adversary-core-stats {
  padding: 1em 0 0 0.5em;
  line-height: var(--font-size-1);
  min-width: 40%;
}

.adversary-tactics {
  padding: 0em 0 0 0.5em;
  text-align: center;
}

.adversary-detail {
  padding: 0.5em 0 0 0.5em;
}

.npc-block {
  margin: 1.5em 0 1.5em 1em !important;
  padding: 0px 0 10px 0;
  border-bottom: 2px solid var(--dh-color-teal) !important;
}

.npc-block p {
  margin-bottom: -7px;
}

/* End Adversary and Environments */
/*Version 1.5 Styles*/
.beastform-trait,
.beastform-attack,
.beastform-evasion {
  font-style: italic;
  font-weight: bold;
  color: var(--dh-dark-grey);
  font-size: var(--font-size-small-1);
}

.beastform-stats {
  margin-top: 4px;
}

.main-holder .beastform-tier {
  font-family: Overpass-Black;
  text-transform: uppercase;
  font-style: normal;
  color: var(--dh-secondary-purple);
}

.main-holder .faction-holder,
.main-holder .beastform-holder {
  background-color: white;
  padding: 15px;
  margin: 15px 5px;
}

.main-holder .faction-holder h5,
.main-holder .beastform-holder h5 {
  font-family: Overpass-Black;
  font-style: normal;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dh-secondary-purple);
  color: var(--dh-secondary-purple);
  margin-top: 0px;
}

.main-holder .beastform-subtype {
  font-weight: bold;
  font-family: Overpass-Black;
  text-transform: uppercase;
}

.main-holder .faction-holder p,
.main-holder .beastform-holder p {
  margin-bottom: 0px;
}

.main-holder .campaign-frame-subtitle p {
  margin-bottom: -5px;
  font-style: italic;
}

.campaign-frame-subtitle {
  margin-bottom: 5px;
}

.main-holder .campaign-frame p {
  margin-bottom: -5px;
}

.main-holder .campaign-frame {
  margin-bottom: var(--font-size-5);
}

/*End 1.5 Updates*/

.reader-link:link {
  color: var(--dh-color-blue);
  text-decoration: none;
}

.reader-link:visited {
  color: var(--dh-color-blue);
  text-decoration: none;
}

.reader-link:hover {
  color: #f3c267;
}

/*Version 1.5 Styles*/
.beastform-trait,
.beastform-attack,
.beastform-evasion {
  font-style: italic;
  font-weight: bold;
  color: var(--dh-dark-grey);
  font-size: var(--font-size-small-1);
}

.beastform-stats {
  margin-top: 4px;
}

.main-holder .beastform-tier {
  font-family: Overpass-Black;
  text-transform: uppercase;
  font-style: normal;
  color: var(--dh-secondary-purple);
}

.main-holder .faction-holder,
.main-holder .beastform-holder {
  background-color: white;
  padding: 15px;
  margin: 15px 5px;
}

.main-holder .faction-holder h5,
.main-holder .beastform-holder h5 {
  font-family: Overpass-Black;
  font-style: normal;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dh-secondary-purple);
  color: var(--dh-secondary-purple);
  margin-top: 0px;
}

.main-holder .beastform-subtype {
  font-weight: bold;
  font-family: Overpass-Black;
  text-transform: uppercase;
}

.main-holder .faction-holder p,
.main-holder .beastform-holder p {
  margin-bottom: 0px;
}

.main-holder .campaign-frame-subtitle p {
  margin-bottom: -5px;
  font-style: italic;
}

.campaign-frame-subtitle {
  margin-bottom: 5px;
}

.main-holder .campaign-frame p {
  margin-bottom: -5px;
}

.main-holder .campaign-frame {
  margin-bottom: var(--font-size-5);
}

/*End 1.5 Updates*/

/*Temporary Styles*/



              .shaded-background {
    background: lightyellow;
    padding: 8px;
    margin: 8px;
}
th p {
    font-weight: bold;
}

strong {
  font-weight: bold;
}






  /*Version 1.5 Styles*/

 .beastform-trait, .beastform-attack, .beastform-evasion {
    font-style: italic;
    font-weight: bold;
    color: var(--dh-dark-grey);
    font-size: var(--font-size-small-1);
}

.beastform-stats {
    margin-top: 4px;
}

.main-holder .beastform-tier {
    font-family: Overpass-Black;
    text-transform: uppercase;
    font-style: normal;
    color: var(--dh-secondary-purple);
}
 .main-holder .faction-holder, .main-holder .beastform-holder {
    background-color: white;
    padding: 15px;
    margin: 15px 5px;
}

.main-holder .faction-holder h5, .main-holder .beastform-holder h5 {
    font-family: Overpass-Black;
    font-style: normal;
    text-transform: uppercase;
    border-bottom: 2px solid var(--dh-secondary-purple);
    color: var(--dh-secondary-purple);
    margin-top: 0px;
}

.main-holder .beastform-subtype {
    font-weight: bold;
    font-family: Overpass-Black;
    text-transform: uppercase;
}

.main-holder .faction-holder p, .main-holder .beastform-holder p {
    margin-bottom: 0px;
}

.main-holder .campaign-frame-subtitle p {
    margin-bottom: -5px;
    font-style: italic;
}

.campaign-frame-subtitle {
    margin-bottom: 5px;
}

 .main-holder .campaign-frame p {
    margin-bottom: -5px; 
}

.campaign-frame {
    margin-bottom: var(--font-size-5);
}

      .tooltip-convert {
    color: magenta !important;
} 

 .main-holder .updatelink {
    background-color: yellow;
}

.main-holder .incorrect {
    background-color: orange;
}

.main-holder .update-rule {
    background-color: cyan;
}

   :root {

  --dh-solid-black: #000;
  --dh-off-black: #0e1111;
  --dh-dark-grey: #434343;
  --dh-mid-grey: #6d6e71;
  --dh-light-grey: #d8d8d5;
  --dh-secondary-purple: #352276;
  --dh-tertiary: #94cbc1;

  --base-font: 18px;
  --font-scale: 1.2;

  --font-size-1: var(--base-font);

  --font-size-2: calc(var(--base-font) * var(--font-scale));

  --font-size-3: calc(var(--font-size-2) * var(--font-scale));

  --font-size-4: calc(var(--font-size-3) * var(--font-scale));

  --font-size-5: calc(var(--font-size-4) * var(--font-scale));

  --font-size-6: calc(var(--font-size-5) * var(--font-scale));

  --font-size-7: calc(var(--font-size-6) * var(--font-scale));

  --font-size-8: calc(var(--font-size-7) * var(--font-scale));

  --font-size-small-1: calc(var(--base-font) / var(--font-scale));

  --font-size-small-2: calc(var(--font-size-small-1) / var(--font-scale));

  --font-size-small-3: calc(var(--font-size-small-2) / var(--font-scale));
}

@font-face {
  font-family: Yrsa;
  src: url("https://content.demiplane.com/fonts/Yrsa-VariableFont_wght.ttf")
    format("truetype");
}

@font-face {
  font-family: IvyMode-Regular;
  src: url("https://content.demiplane.com/fonts/IvyMode-Regular.ttf")
    format("truetype");
}

@font-face {
  font-family: IvyMode-Bold;
  src: url("https://content.demiplane.com/fonts/IvyMode-Bold.ttf")
    format("truetype");
}

@font-face {
  font-family: Overpass;
  src: url("https://content.demiplane.com/fonts/Overpass-Regular.ttf")
    format("truetype");
}

@font-face {
  font-family: Overpass-Black;
  src: url("https://content.demiplane.com/fonts/Overpass-Black.ttf")
    format("truetype");
}

@font-face {
  font-family: Eveleth-Clean;
  src: url("https://content.demiplane.com/fonts/EvelethCleanRegular.otf")
    format("opentype");
}

@font-face {
  font-family: Minion-Pro;
  src: url("https://content.demiplane.com/fonts/Minion Pro Regular.ttf")
    format("truetype");
}

.center-block p {
    text-align: center !important;
}

.main-holder h2 {
    font-family: 'Eveleth-Clean';
    color: var(--dh-color-dark-blue);
    margin-top: var(--font-size-4);
    font-size: 20px;
    margin-bottom: 12px;;
}

.main-holder h4 {
    font-family: 'Overpass';
    color: var(--dh-color-blue);
    font-size: 20px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.main-holder p {
    font-family: 'Overpass';
    color: black;
    line-height: 1.5;
    margin-bottom: var(--font-size-4);
}

.main-holder ul {
    margin-left: 24px;
    line-height: 1.5;
    margin-bottom: 32px;
    margin-top: 32px;
}

.main-holder li {
    font-family: 'Overpass';
    color: black;
    padding: 0 0 0 15px;
    margin-bottom: 10px;
}

.main-holder .alt-h2 {
    font-family: 'Overpass';
    color: black;
}

.col-list {
    columns: 3;
    padding: 10px;
}

.col-list p {
    line-height: var(--font-size-small-2)
}

.main-holder a {
    color: var(--dh-secondary-purple);
}

.main-holder p em {
    font-family: 'Overpass';
    font-style: italic;
}

.main-holder li em {
    font-family: 'Overpass';
    font-style: italic;
    font-size: var(--font-size-1);
}

.reader-toc-label:hover {
    background-color: var(--dh-color-teal);
    color: white !important;
}

.feature-heading {
    font-size: var(--font-size-1);
    margin-bottom: -10px;
    margin-top: 20px;
}

.main-holder .image-with-subtitle-center {
    margin-top: 30px;
}

.example-block {
    padding: 0 0.5em 0 0.5em;
    margin: 40px 0 40px 0;
    text-align: justify;
}

.gm-list {
    line-height: var(--font-size-1);
    padding-left: 5px;
}

.paired-list {
    margin: 30px 0 25px 0;
}

.struckout {
    text-decoration: line-through;
}

.fill-in-blank {
    letter-spacing: -2px;
}

.unavailable-content {
    background-color: var(--dh-tertiary);
    text-align: center;
}

/*Domains*/
.main-holder .dh-domain-container {
    display: flex;
    gap: 2%;
}

.main-holder .dh-domain-container div:nth-of-type(1) {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
}

.main-holder .dh-domain-container div:nth-of-type(1) * {
    margin: 0px;
}

.main-holder .dh-domain-container div:nth-of-type(2) {
    width: 78%;
}

/*Equipment Table*/

.main-holder .equipment-table {
    margin-top: 10px;
    border: 1px solid #a2a2a2;
    border-collapse: collapse;  
    color: black;
    font-family: Lora;
}

.main-holder .equipment-table tr td {
    border-right: 1px solid #bfbfbf;
    border-top: 1px solid #bfbfbf;
}

.main-holder .equipment-table th {
    background-color: #dddddd;
    color: #000;
    border: 1px solid #a2a2a2
}

/*Armor Table*/

.main-holder .armor-table {
    margin-top: 10px;
    border: 1px solid #a2a2a2;
    border-collapse: collapse;  
    color: black;
    font-family: Lora;
}

.main-holder .armor-table tr td {
    border-right: 1px solid #bfbfbf;
    border-top: 1px solid #bfbfbf;
}

.main-holder .armor-table th {
    background-color: #dddddd;
    color: #000;
    border: 1px solid #a2a2a2
}

/*Loot Table*/
.main-holder .loot-table {
    border: 2px solid var(--dh-mid-grey);
    border-collapse: collapse;
}

.main-holder .loot-table tr td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding-bottom: var(--font-size-5);
    padding: 10px;
}

.main-holder .loot-table tr td:nth-of-type(2) {
    border-right: 0px solid black;
}

.main-holder .loot-table tr:last-of-type td {
    border-bottom: 0px solid black;
}




  /* TEMPORARY STYLES */

    /* Cards */
    .card-holder {
        width: 600px;
        min-height: 400px;
        margin: 8px;
        display: block;
        padding:10px;
    }
    
    .card-holder[data-card-type=community] {
        background: #cdd5dc;
    }
    .card-holder[data-card-type=ancestry] {
        background: #cdd5dc;
    }
    .card-holder[data-card-type=subclass] {
        background: #cdd5dc;
    }
    .card-holder[data-card-type=domain] {
        background: #cdd5dc;
    }

    /* Header */

    .card-header, .card-desc {
        padding:0px 20px;
    }
    .card-header {
        padding-top: 8px;
    }

    .card-details, .card-header p {
        display: flex;
        gap: 8px;
        font-size: 0.9em;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    h3.card-name {
        color: black;
        margin-bottom: 10px;
    }

    /* Prefix Info*/
    .card-details .Card-Level::before {
        content: "Level: "
    }
    .card-details .Stress-Value::before {
        content: "Stress Value: "
    }
    .Foundation-Type::before {
        content: "Type: "
    }
    .Foundation-Class::before {
        content: "Class: "
    }
    .Foundation-Domain::before {
        content: "Domain: "
    }

    /* Desc */
    .card-desc {
        font-size: 0.8em;
    }
    
    /*Manifest*/
    .one-burden::after {
        content: "";
        background-image: url(https://content.demiplane.com/compendium/daggerheart/playtest/css/06-01-Onehand.png?format=webp);
        display: inline-block;
        background-repeat: no-repeat;
        height: var(--font-size-3);
        width: var(--font-size-3);
        background-size: contain;
        background-position: center;
        position: relative;
        top: 5px;
        left: 5px;
    }
    .two-burden::after {
        content: "";
        background-image: url(https://content.demiplane.com/compendium/daggerheart/playtest/css/06-02-Twohand.png?format=webp);
        display: inline-block;
        background-repeat: no-repeat;
        height: var(--font-size-5);
        width: var(--font-size-5);
        background-size: contain;
        background-position: center;
        position: relative;
        top: 10px;
        left: 5px;
    }
    
    .weapon-block, .item-block {
        margin-top: 1.5em;
        padding: 0 0.5em 1em 0.5em;
        min-height: 40px;
    }
    
    .weapon-block p, .item-block p {
        margin-bottom: -0.5em;
    }
    
    .last-block {
        margin-bottom: 2em;
    }
    
    
    .environment-block {
        margin: 1em 0 1em 0;
        padding: 0.9em;
        border-bottom: 2px solid var(--dh-light-grey);
    }
    
    .environment-subheader {
        background-color: var(--dh-light-grey);
        margin-top: -10px;
        padding: 5px 10px 15px 10px;
    }
    
    .environment-block p {
        margin-bottom: -4px;
    }
    
    .main-holder .environment-name {
        background-color: black;
        font-family: "Overpass-Black";
        font-style: normal;
        color: #fff !important;
        font-size: var(--font-size-1);
        padding: 5px;
        text-align: center;
    }
    
    .environment-core-stats {
        padding: 7px;
        line-height: var(--font-size-1);
    }
    
    .environment-tactics {
        padding: 0em 0 0 0.5em;
        text-align: center;
    }
    
    .environment-detail {
        padding: 0.5em 0 0 0.5em;
        min-width: 70%;
    }
    
    .main-holder .environment-hook {
        font-style: italic;
        margin-bottom: var(--font-size-1);
    }
    
    .main-holder .environment-statistics {
        display: flex;
    }
    
    .monster-block {
        margin: 1em 0 1em 0;
        padding: 0.9em;
        border-bottom: 2px solid var(--dh-light-grey);
    }
    
    .monster-block p {
        margin-bottom: -4px;
    }
    
    .main-holder .monster-name {
        background-color: black;
        font-family: Overpass-Black;
        font-style: normal;
        color: white !important;
        font-size: var(--font-size-1);
        padding: 5px;
        text-align: center;
    }
    
    .main-holder .adversary-statistics {
        display: flex;
    }
    
    
    .adversary-core-stats {
        padding: 1em 0 0 0.5em;
        line-height: var(--font-size-1);
        min-width: 40%;
    }
    
    .adversary-tactics {
        padding: 0em 0 0 0.5em;
        text-align: center;
    }
    
    .adversary-detail {
        padding: 0.5em 0 0 0.5em;
    }
    
    .npc-block {
        margin: 1.5em 0 1.5em 1em !important;
        padding: 0px 0 10px 0;
        border-bottom: 2px solid var(--dh-color-teal) !important;
    }
    
    .npc-block p {
        margin-bottom: -7px;
    }
    
    /*Images*/

.image-so {
  shape-margin: 8px;
  padding: 0px;
  position: relative;
}

.force-image-left {
  float: left;
}

.force-image-right {
  float: right;
}

.book-image-center {
    margin-left: auto;
    margin-right: auto;
}

.image-with-subtitle-center {
    margin-left: auto;
    margin-right: auto;
}
 
 
 /*Reactive*/

@media only screen and (max-width: 600px) {
  .book-image-right {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .force-image-right {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .image-with-subtitle-right {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .book-image-left {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .force-image-left {
    float: none;
    display: block;
    margin: 0 auto;
  }

  .image-with-subtitle-left {
    float: none;
    display: block;
    margin: 0 auto;
  }
}


/*Full Release Styles*/

/*Headers*/
.main-holder {
    h1 {
        font-family: var(--h1-font);
        color: var(--dh-color-mustard);
        font-size: var(--font-size-7);
        margin: 0em 0em 0.2em;
        line-height: 1;
    }
    h1:before {
        content: "";
        display: inline-block;
        height: 100px;
        width: 100px;
        top: 20px;
        margin-right: -65px;
        margin-left: -35px;
        position: relative;
        background-image: url(https://content.demiplane.com/compendium/daggerheart/core/css/gold-corner-2.png?format=webp) !important;
        background-size: contain;
        background-repeat: no-repeat;
    }
    h1.no-decor:before, h4.no-decor:before {
        display: none;
    }
    h1.black {
        color: var(--dh-off-black);
    }
    h1 .chapter-subheader {
        font-family: var(--h2-font);
        display: block;
        font-size: var(--font-size-6);
    }
    h2 {
        font-size: var(--font-size-4);
        font-family: var(--h2-font);
        margin-top: 2em;
        line-height: 1.1;
    }
    h3 {
        font-family: var(--h3-font);
        font-size: var(--font-size-3);
        color: var(--dh-color-mustard);
        margin-top: 2em;
        span {
            font-family: var(--h1-font);
            display: block;
            line-height: 1.5;
        }
    }
    h3.thin {
        font-family: Eveleth-Thin;
    }
    h3.light-shade {
        background-color: var(--dh-color-pale-mustard);
        padding: 15px 2px 10px;
        font-family: var(--h1-font);
    }
    h3.domain-header {
        border-top: 2px solid var(--dh-off-black);
        border-bottom: 2px solid var(--dh-off-black);
        padding: 10px 0px;
        background-color: var(--dh-color-pale-mustard);
        color: var(--dh-off-black);
        margin-top: 30px;
    }
    h4 {
        font-family: var(--h4-font);
        text-transform: uppercase;
        color: var(--dh-off-black);
        font-size: var(--font-size-2);
        margin-top: 2em;
        span {
            text-transform: capitalize;
        }
    }
    h4:before {
        content: "";
        height: var(--font-size-1);
        width: var(--font-size-1);
        display: inline-block;
        background-color: var(--dh-color-vibrant-mustard);
        margin: -1px 10px 0px 0px;
    }
    h4.shaded-background {
        font-family: var(--h1-font);
        background-color: var(--dh-color-pale-mustard);
        margin: 0px 0px -10px;
        clear: left;
        color: var(--dh-color-mustard);
    }
    h4.shaded-background:before, h4.no-block:before {
        display: none;
    }
    h5 {
        color: var(--dh-color-mustard);
        font-family: var(--h4-font);
        font-style: normal;
        text-transform: uppercase;
        font-weight: normal;
        font-size: var(--font-size-2);
        margin: 2em 0em -0.5em;
    }
    .hidden-header /*for headers that exist for the TOC only*/ {
        color: transparent;
        font-size: 0px;
    }
    .hidden-header:before {
        display: none;
    }
    
}

/*Body*/
.main-holder {
    p, li {
        font-family: var(--p-font);
        font-size: var(--font-size-2);
        margin-block-start: 20px;
        margin-block-end: 20px;
        em {
            font-family: var(--p-font-em);
        font-size: var(--font-size-2);
        }
        strong {
            font-weight: 800;
            font-family: var(--p-font-bold);
        font-size: var(--font-size-2);
        }
        a {
            color: blue;
        }
    }
    ul {
        margin: 1em 0em;
        list-style-type: square;
        li {
            margin: 20px 0px;
        }
    }
    p.Body-Styles_Body-Lead-paragraph em {
        font-family: var(--p-font-em);
        font-size: var(--font-size-2);
        opacity: 0.8;
        
    }
    .force-clear {
        clear: both;
        padding-top: 30px;
    }
    .force-indent {
    padding: 0 30px 0 30px;}
    p.cf-subtitle em {
        font-size: var(--font-size-3);
    }
    p.tip em {
        font-family: var(--p-tip-font);
    }
    p.spacer {
        margin-bottom: 320px;
    }
    span.tracker-box {
        width: var(--font-size-1);
        height: var(--font-size-1);
        border: 2px solid;
        display: inline-block;
        margin: 0px 2px;
    }
    span.tracker-box.marked {
        background-color: black;
    }
}

/*Unique Blocks*/

/*Sidebar Block - Style 1 Pg7*/
.main-holder {
    div.sidebar-style-1 {
        background-color: var(--dh-color-pale-mustard);
        padding: 1em;
        margin: -10px 0px 0px;
        h3 {
            font-family: var(--h1-font);
            color: var(--dh-off-black);
            font-size: var(--font-size-3);
        }
        h4.shaded-background {
            background-color: var(--dh-color-mustard);
            margin: 0px;
            color: white;
            font-family: var(--h2-font);
            line-height: 1.5;
            padding: 5px 8px;
            font-size: var(--font-size-2);
        }
    }
}

/*Horizontal Rule*/
.main-holder div.hr {
    border-bottom: thick dotted;
    margin: 3em 0em 0em;
}

.main-holder .top-border {
    border-top: 2px dotted var(--dh-off-black);
    padding-top: 30px !important;
}

/*Callout UL Pg9*/
.main-holder ul.callout {
    background-color: #f0f1eb;
    padding: 20px 20px 20px 40px;
    border-top: 1px solid var(--dh-color-mustard);
    border-bottom: 1px solid var(--dh-color-mustard);
    li {
        margin: 5px;
        list-style-type: " \21AA";
    }
}

/*Arrow UL 169*/

.main-holder ul.arrows {
    padding: 0px 20px 0px 40px;
    li {
        margin: 5px;
        list-style-type: " \21AA";
    }
}

/*Tip Block*/
.main-holder div.tip-block {
    border-left: thick solid var(--dh-color-vibrant-mustard);
    padding: 0px 10px 0px 20px;
    margin-top: 30px;
    font-style: italic;
    p {
        font-family: var(--p-tip-font);
        em {
            font-family: var(--p-tip-font);
            strong {
                font-family: var(--p-tip-font);
            }
        }
    }
}

/*Subclass Block*/
.main-holder {
    .subclass-block-left, .subclass-block-right {
        width: 49%;
        margin-bottom: 20px;
        margin-top: 20px;
        background-color: var(--dh-color-faded);
        background: radial-gradient(#fdf9ed, #fdf9ed, #ede8da, #dbd4c6);
        border: 1px solid;
        overflow-x: clip;
        height: 200px;
        border-radius: 20px;
        display: flex;
        align-items: end;
        overflow-clip-margin: 20px;
        div:has(p) {
            margin: auto;
            min-width: 45%;
            p {
            font-size: var(--font-size-1);
           margin: 0px 0px 0px;
           padding: 0px 5px;
           strong {
               font-size: var(--font-size-1);
           }
        }
        }
    }
    .subclass-block-left {
        float: left;
        padding-right: 20px;
        padding-left: 0px;
        text-align: right;
        img {
            left: -10px;
            position: relative;
            margin: 0px;
        }
    }
    .subclass-block-right {
        float: right;
        padding-left: 20px;
        padding-right: 0px;
        img {
            right: -10px;
            position: relative;
            margin: 0px;
        }
    }
}

.main-holder .callout-block, .main-holder .book-styled-block {
    background-color: #e7e8e1;
    padding: 10px 15px;
    border-top: 2px solid var(--dh-off-black);
    border-bottom: 2px solid var(--dh-off-black);
    margin: 10px 10px;
    h5 {
        color: var(--dh-off-black);
        font-family: var(--p-font-bold);
        margin: 0.5em 0em 1em;
    }
    p, li {
        font-size: var(--font-size-1);
        strong, em {
            
        font-size: var(--font-size-1);
        }
    }
    p.callout-header {
        text-transform: uppercase;
    }
}

.main-holder .callout-block.rounded {
    border: none;
    border-radius: 10px;
    p, p strong {
        text-align: center;
        font-size: var(--font-size-2);
    }
}

.main-holder .callout-block.countdown {
    p > strong {
        margin-right: 10px;
    }
}

/*Background and Connections*/
.main-holder .faded-block {
    background-color: var(--dh-color-pale-mustard);
    padding: 3px 0px 20px;
    margin: 0px 0px 20px;
    h4 {
        font-family: var(--h1-font);
        font-size: var(--font-size-3);
        padding: 0px 20px;
    }
    h4:before {
        display: none;
    }
    p {
        padding: 0px 20px;
    }
    ul {
        
        padding: 0px 60px;
    }
    .book-image-center {
        margin: -20px 0px;
    }
}

/*Link Block*/

.main-holder .link-block {
    text-align: center;
    margin: 10px auto;
    background-color: var(--dh-color-pale-forest);
    width: fit-content;
    padding: 0px 20px 0px;
    box-shadow: 1px 1px 3px 1px var(--dh-color-forest);
    p {
        padding: 15px 15px 10px;
        color: white;
        font-family: var(--h2-font);
        a {
            background-color: transparent;
            color: white;
            text-decoration: none;
        }
        a:hover {
            color: var(--dh-color-vibrant-mustard);
            transition: all 0.5s;
        }
    }
    
}

/*Two-Up Character Sheet*/
.main-holder .character-sheet-2-up {
    display: flex;
    margin: 0px 0px 30px;
    gap: 10px;
    justify-content: center;
    .book-image-center {
        max-width: 45%;
        margin: 0px;
        box-shadow: 0px 0px 2px 1px var(--dh-color-forest);
    }
}

/*Domain List Headers*/
.main-holder {
    h4.domain-header {
        border-bottom: 4px solid var(--dh-color-vibrant-mustard);
        font-family: var(--h2-font);
        margin-left: 20px;
    }
    h4.domain-header:before {
        display: none;
    }
}

/*Class Block*/

.main-holder .class-block {
    background-color: var(--dh-color-chocolate);
    padding: 30px 0px;
    h1, p, h4, h5, ul {
        padding-left: 40px;
        padding-right: 40px;
    }
    h1 {
        color: white;
        padding-top: 20px;
    }
    h1:before, h4:before {
        display: none;
    }
    p, ul li {
        color: white;
    }
    ul {
        padding-left: 70px;
    }
    h4 {
        color: white !important;
        margin-left: -10px;
    }
    h5 {
        color: white;
        text-transform: none;
        font-family: var(--p-font-bold);
    }
    .book-image-center {
        margin: 0px 0px -30px;
    }
    .tip-block {
        margin: 20px;
        p, p em, p strong {
            font-size: var(--font-size-1);
            padding: 0px;
        }
    }
}

.main-holder .class-block.druid, .main-holder .class-block.ranger {
    background-color: #1f2918;
}

.main-holder .class-block.guardian {
    background: url("https://content.demiplane.com/compendium/daggerheart/core/css/01-07-DH072_Foundation_GuardianVengeance_Final-LindaLithen-CSS.png") no-repeat right bottom, linear-gradient(#2a303d, #2a303d);
    background-size: 65%;
}

.main-holder .class-block.rogue {
    background-color: #242b2d;
    background: url("https://content.demiplane.com/compendium/daggerheart/core/css/rogue-sidebar.png") no-repeat center bottom, linear-gradient(#242b2d, #242b2d);
}

.main-holder .class-block.seraph {
    background-color: #524038;
    
    .book-image-center {
        margin: -30px 0px -30px;
    }
}

.main-holder .class-block.sorcerer {
    background-color: #382147;
    background: url("https://content.demiplane.com/compendium/daggerheart/core/css/sorcerer-sidebar.png") no-repeat right bottom, linear-gradient(#382147, #382147);
}

.main-holder .class-block.warrior {
    background-color: #451715;
}

.main-holder .class-block.wizard {
    background-color: #232d4e;
    background: url("https://content.demiplane.com/compendium/daggerheart/core/css/wizard-sidebar.png") no-repeat left top, linear-gradient(#232d4e, #232d4e);
}

/*Beastforms*/

.main-holder .beastform-block {
    border-bottom: 2px solid var(--dh-color-forest);
    border-top: 2px solid var(--dh-color-forest);
    margin: 30px 5px;
    
    padding: 0px 0px;
    background-color: #dde7d7;
    h3 {
        font-family: var(--h4-font);
        text-transform: uppercase;
        color: var(--dh-color-forest);
        font-size: var(--font-size-2);
        margin-top: 20px;
        span {
            text-transform: capitalize;
        }
        
        padding: 0px 20px;
    }
    h3:before {
        content: "";
        height: var(--font-size-1);
        width: var(--font-size-1);
        display: inline-block;
        background-color: var(--dh-color-vibrant-mustard);
        margin: -1px 10px 0px 0px;
    }
    p {
        padding: 0px 20px;
    }
    p, p em, p strong {
        font-size: calc(var(--font-size-1)*1.1);
        line-height: 1;
        margin: 20px 0px;
    }
    p:first-of-type {
        font-size: var(--font-size-1);
    }
    .book-image-center {
        margin: 0px;
    }
    
}

/*Page Divider*/

.main-holder .dh-divider {
    clear: both;
    background-image: url("https://content.demiplane.com/compendium/daggerheart/core/css/dh-divider2.png");
    height: 40px;
    margin: 2em auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*Abilities in Text Pg167*/
.main-holder {
    .force-indent.npc-ability {
        h5 {
            font-family: var(--p-font-bold);
            color: var(--dh-off-black);
            margin: 20px 0px;
        }
        p > strong:first-of-type {
            font-family: var(--p-font-em-bold);
        }
        background-color: var(--dh-color-pale-mustard);
        margin: 20px;
        padding: 20px;
    }
}

.main-holder {
    .force-indent.npc-ability.purple {
        background-color: var(--dh-color-pale-purple);
    }
    }

/*Tone Pg 170*/

.main-holder {
    .tone-options {
        text-transform: uppercase;
        font-family: "Questa-Sans";
        letter-spacing: 1px;
        margin: 20px;
        p {
            
        font-size: var(--font-size-3);
        }
        .selected {
            background-color: var(--dh-color-pale-purple);
            font-family: var(--p-font-bold);
        }
        .vetoed {
            text-decoration: line-through;
        }
    }
}

/*Blanks*/

.main-holder .fill-in-the-blank {
    content: "";
    width: 20px;
    height: var(--font-size-2);
    display: inline-block;
    border-bottom: 1px solid;
    margin: 0px 2px;
    padding: 0px 40px;
}

/*Stat Blocks*/

.main-holder {
    .stat-block {
        background: #F5F1E8;
        margin: 20px 10px;
        padding: 10px 0px;
        border: 2px solid var(--dh-color-mustard);
        border-radius: 10px;
        h3, p, h4, h3 {
            padding: 0px 20px;
        }
        ul {
            padding: 0px 20px 0px 50px;
        }
        h3, h3.blood-red, h3.teal {
            margin-top: 20px;
            color: var(--dh-off-black);
        }
        .stat-block-meta {
            margin: 10px 0px 20px;
            p.stat-block-tier {
                em {
                    font-family: var(--p-tip-font);
                }
            }
            p {
                line-height: 1;
                margin: 10px 0px;
            }
        }
        .stat-block-stats {
            background: #fafafa;
            border-top: 1px solid var(--dh-color-mustard);
            border-bottom: 1px solid var(--dh-color-mustard);
            padding: 0px 20px;
            margin: 0px 5px;
            .stat-block-experiences {
                border-top: 1px dotted;
        }
        p {
            margin: 10px 0px;
        }
        }
        .stat-block-features {
            h4:before {
                display: none;
            }
            h4 {
                text-transform: uppercase;
                color: var(--dh-off-black);
                margin: 20px 0px 0px;
            }
            p {
                margin: 15px 0px;
            }
        }
    }
    .stat-block.environment-block {
        background-color: #eceded;
        border-color: #8c8d90;
        .book-image-center {
            margin: 0px 0px -10px;
        }
    }
    .stat-block.teal {
        background-color: #eceded;
        border-color: #8c8d90;
    }
}

.main-holder .tier-list {
    columns: 10em;
}

.main-holder .tier-list.enviro-tier {
    columns: 20em;
}

.main-holder .motherboard-language {
    display: flex;
    justify-content: center;
    gap: 20px;
    p {
        text-align: right;
    }
}

.domain-block {
    background: var(--dh-color-off-white);
    margin: 20px 0px;
    box-shadow: 1px 1px 5px;
    padding: 30px 0px 20px;
    h4.domain-header {
        border: none;
        padding: 0px;
        margin: 0px;
        font-family: var(--p-font-bold);
    }
    p {
        margin: 10px 0px;
    }
    h4.domain-header, p {
        
    padding: 0px 20px 0px;
    }
    .book-image-center {
        margin: -30px 0px -20px;
    }
}

.domain-block:nth-of-type(-n+21) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-color-purple);
    }
}

.domain-block:nth-of-type(n+22):not(:nth-of-type(n+43)) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-color-blood);
    }
}

.domain-block:nth-of-type(n+43):not(:nth-of-type(n+64)) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-mid-grey);
    }
}

.domain-block:nth-of-type(n+64):not(:nth-of-type(n+85)) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-color-blue);
    }
}

.domain-block:nth-of-type(n+85):not(:nth-of-type(n+106)) {
    h4:before {
        display: inline-block;
        background-color: #b14b83;
    }
}

.domain-block:nth-of-type(n+106):not(:nth-of-type(n+127)) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-off-black);
    }
}

.domain-block:nth-of-type(n+127):not(:nth-of-type(n+148)) {
    h4:before {
        display: inline-block;
        background-color: #336f44;
    }
}

.domain-block:nth-of-type(n+148):not(:nth-of-type(n+169)) {
    h4:before {
        display: inline-block;
        background-color: var(--dh-color-vibrant-mustard);
    }
}

.domain-block:nth-of-type(n+169):not(:nth-of-type(n+190)) {
    h4:before {
        display: inline-block;
        background-color: #c16a3c;
    }
}

.main-holder .downloads {
    p, h5 {
        text-align: center;
    }
    p {
        margin-bottom: 30px;
        font-family: var(--h3-font);
        font-size: var(--font-size-small-1);
        text-transform: none;
    }
    a, .reader-link {
        background: linear-gradient(270deg, #4E30AB 0%, #2878BE 100%);
        padding: 10px;
        margin: 10px auto;
        border: 1px solid var(--dh-color-purple-light);
        color: white;
        text-decoration: none;
        box-shadow: 1px 1px 3px 0px var(--dh-off-black);
    }
    a:hover, .reader-link:hover {
        filter: hue-rotate(320deg) brightness(120%);
    }
    div {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        p {
            width: 50%;
        }
    }
}

.main-holder .index {
    width: 100%;
}

.main-holder .demiplane-credits {
    h2 {
        font-size: var(--font-size-2);
        font-family: var(--h1-font);
    }
    p {
        font-size: var(--font-size-1);
    }
}

.main-holder .image-with-subtitle-center {
    p {
        font-family: EllisHand;
    }
}

/*End Unique Blocks*/

/*Tables*/
.main-holder table {
    tbody {
        border-top: 2px solid var(--dh-off-black);
        tr:nth-of-type(odd) {
            background-color: #e7e8e1;
        }
    }
    tbody, thead {
        tr:has(:nth-child(4)):not(:has(:nth-child(5))) {
            td:nth-child(2), th:nth-child(2), 
            td:nth-child(3), th:nth-child(3){
                p {
                    text-align: center;
                }
            }
        }
        tr:has(:nth-child(3)):not(:has(:nth-child(4))) {
           td:nth-child(1), th:nth-child(1) {
               p {
                   text-align: center;
               }
           }
        }
    }
}

.main-holder table.center-table {
    thead, tbody {
        p {
            text-align: center;
        }
    }
}

.main-holder table.blood-red {
    thead {
        background-color: var(--dh-color-blood);
        border: none;
        p, p strong {
            color: white;
            font-family: var(--h2-font);
            font-size: var(--font-size-small-1);
        }
    }
    tbody {
        border: none;
        tr:nth-child(odd) {
            background-color: #e7cdbf;
        }
        tr:nth-child(even) {
            background-color: #fcf9f7;
        }
    }
    tbody, thead {
        tr:has(:nth-child(3)):not(:has(:nth-child(4))) {
            td:nth-child(1), th:nth-child(1), 
            td:nth-child(2), th:nth-child(2), 
            td:nth-child(3), th:nth-child(3) {
                p {
                    text-align: left;
                }
            }
        }
        }
        tbody, thead {
        tr:has(:nth-child(5)):not(:has(:nth-child(6))) {
            td:nth-child(2), th:nth-child(2), 
            td:nth-child(3), th:nth-child(3), 
            td:nth-child(4), th:nth-child(4), 
            td:nth-child(5), th:nth-child(5) {
                p {
                    text-align: center;
                }
            }
        }
        }
}

.main-holder table.blood-red:has(:not(th)) {
    tbody {
        border-top: 2px solid var(--dh-color-blood);
    }
}

.main-holder table.red {
    thead {
        background-color: var(--dh-color-clay);
        border: none;
        p {
            color: white;
            font-family: var(--h2-font);
            font-size: var(--font-size-small-1);
        }
    }
    tbody {
        border: none;
        tr:nth-child(odd) {
            background-color: var(--dh-color-pale-clay);
        }
        tr:nth-child(even) {
            background-color: #fcf9f7;
        }
    }
}



.main-holder table.purple {
    thead {
        background-color: var(--dh-color-purple);
        border: none;
        p {
            color: white;
            font-family: var(--h2-font);
            font-size: var(--font-size-small-1);
        }
    }
    tbody {
        border: none;
        tr:nth-child(odd) {
            background-color: var(--dh-color-pale-purple);
        }
        tr:nth-child(even) {
            background-color: #fcf9f7;
        }
    }
    tbody, thead {
        tr:has(:nth-child(3)):not(:has(:nth-child(4))) {
            td:nth-child(3), th:nth-child(3) {
                p {
                    text-align: center;
                }
            }
        }
        }
        tbody, thead {
        tr:has(:nth-child(3)):not(:has(:nth-child(4))) {
            td:nth-child(1), th:nth-child(1) {
                p {
                    text-align: left;
                }
            }
        }
        }
}

.main-holder table.teal {
    thead {
        background-color: var(--dh-color-teal);
        border: none;
        p {
            color: white;
            font-family: var(--h2-font);
            font-size: var(--font-size-small-1);
        }
    }
    tbody {
        border: none;
        tr:nth-child(odd) {
            background-color: #e5ebf0;
        }
        tr:nth-child(even) {
            background-color: #fcf9f7;
        }
    }
}

.main-holder table.countdown {
    tbody, thead {
        tr:has(:nth-child(3)):not(:has(:nth-child(4))) {
            td:nth-child(1), th:nth-child(1), 
            td:nth-child(3), th:nth-child(3){
                p {
                    text-align: left;
                }
            }
        }
        }
}

.main-holder table.image-table {
    tbody {
        tr:nth-child(odd), tr:nth-child(even) {
            background-color: transparent;
        }
        td {
            margin: 0px;
            padding: 0px;
            p {
                text-align: center;
                padding-bottom: 10px;
                margin: -10px 0px 0px 0px;
                font-family: EllisHand;
            }
        }
    }
}

.main-holder table.Rolls-difficulty {
    margin: 20px auto;
    th {
        background-color: #d5ccde;
        p {
            color: var(--dh-off-black);
        }
    }
    thead, tbody {
        td p, th p {
            text-align: left !important;
        }
    }
    th.attribute {
        background-color: var(--dh-color-purple);
        color: var(--dh-color-off-white);
        font-family: var(--h1-font);
        font-size: var(--font-size-2);
    }
}

.main-holder table.arc-table {
    thead tr:last-of-type {
        background-color: #825f95;
    }
    thead th p {
        text-align: center;
    }
    thead th:not(:first-child), tbody td:not(:first-child):not(:last-child) {
        border: 2px solid white;
    }
    tbody tr td:first-child {
        min-width: 150px;
    }
    tbody tr td:not(:first-child) {
        min-width: 80px;
    }
}

/*End Tables*/

/*Chapter Variants*/

/*Green Chapter Variants*/
.main-holder {
    h1.green, h3.green, h4.green, h2.green:first-of-type {
        color: var(--dh-color-forest);
    }
    h4.shaded-background.green {
        background-color: var(--dh-color-faded);
        color: var(--dh-off-black);
    }
}

/*Yellow Chapter Variants*/
.main-holder {
    h4.yellow {
        color: var(--dh-color-mustard);
    }
    h4.shaded-background.yellow {
        background-color: var(--dh-color-pale-mustard);
        color: var(--dh-color-mustard);
        margin-top: 50px;
    }
}

/*Clay Red Chapter Variants*/
.main-holder {
    h1.red, h3.red, h4.red, h2.red {
        color: var(--dh-color-clay);
    }
    h5.red {
        text-transform: none;
    }
    .book-styled-block.red {
        background-color: var(--dh-color-pale-clay);
        border: none;
        border-radius: 10px;
        padding: 20px 0px;
        p, h3, .callout-header {
            padding: 0px 20px;
        }
        h3:first-of-type {
            margin-top: 0px;
        }
        h3:not(:first-of-type) {
            margin-top: 30px;
        }
        .callout-header {
            color: var(--dh-color-clay);
            text-transform: uppercase;
        }
        .book-image-center {
            margin: 0px 0px -20px;
        }
    }
    .callout-block.red {
        background-color: var(--dh-color-pale-clay);
        border-color: var(--dh-color-clay);
        padding: 20px 0px;
        p, h5 {
            padding: 0px 20px;
        }
        .book-image-center {
            margin: -10px 0px -20px;
        }
    }
    ul.callout.red {
        background-color: var(--dh-color-pale-clay);
        border-color: var(--dh-color-clay);
        margin-top: 30px;
    }
    h3.light-shade.red {
        background-color: #b36838;
        color: white;
        padding: 20px 10px 15px;
    }
}

/*Purple Chapter Variants*/
.main-holder {
     h1.purple, h3.purple, h4.purple, h2.purple, h5.purple {
        color: var(--dh-color-purple);
    }
    h4.shaded-background.purple {
        background-color: var(--dh-color-pale-purple);
        color: var(--dh-color-purple);
        margin-top: 50px;
    }
    ul.callout.purple {
        background-color: var(--dh-color-pale-purple);
        border-color: var(--dh-color-purple);
        margin-top: 30px;
    }
    .callout-block.purple {
        background-color: var(--dh-color-pale-purple);
        border-color: var(--dh-color-purple);
        padding: 20px 0px;
        p, h5 {
            padding: 0px 20px;
        }
        .book-image-center {
            margin: -10px 0px -20px;
        }
    }
    .book-styled-block.purple {
        background-color: var(--dh-color-pale-purple);
        border: none;
        border-radius: 10px;
        padding: 20px 0px;
        p, h3, .callout-header, h4 {
            padding: 0px 20px;
        }
        h3:first-of-type {
            margin-top: 0px;
        }
        h3:not(:first-of-type) {
            margin-top: 30px;
        }
        .callout-header {
            color: var(--dh-color-purple);
        }
        .book-image-center {
            margin: 0px 0px -20px;
        }
        h4 {
            text-transform: none;
        }
        h4:before {
            display: none;
        }
    }
    h5.purple {
        text-transform: none;
        font-size: calc(var(--font-size-2)*1.08);
    }
    
    .callout-block h3.purple {
        padding: 0px 0px 0px 50px;
    }
    .callout-block h5.purple {
        margin-top: 40px;
    }
    
}

.main-holder span.color-span-red {
    color: var(--dh-color-clay);
}

/*Blood Red Chapter Variants*/
.main-holder {
    h1.blood-red, h3.blood-red, h4.blood-red, h2.blood-red:first-of-type {
        color: var(--dh-color-blood);
    }
    h4.blood-red {
        text-transform: none;
    }
    .color-block {
        background-color: #6f1e1a !important;
        padding: 0px;
        p, h3, h4 {
            color: white;
            padding: 0px 20px;
        }
        h4:before {
            display: none;
        }
        .book-image-center {
            margin: 0px;
        }
    }
    .callout-block.blood-red {
        background-color: #f8f2ed;
        border-color: var(--dh-color-blood);
        padding: 20px 0px;
        p, h5 {
            padding: 0px 20px;
        }
        .book-image-center {
            margin: -10px 0px -20px;
        }
    }
}

/*Teal Chapter Variants*/
.main-holder {
    h1.teal, h3.teal, h4.teal, h2.teal:first-of-type {
        color: var(--dh-color-teal);
    }
    .callout-block.teal {
        background-color: #f8f8f8;
        border-color: var(--dh-color-teal);
        padding: 20px 0px;
        p, h5 {
            padding: 0px 20px;
        }
        .book-image-center {
            margin: -10px 0px -20px;
        }
    }
    h4.teal {
        text-transform: none;
    }
    h4.teal.no-decor {
        text-transform: uppercase;
    }
    table.Food-Table.teal {
        border-top: 2px solid var(--dh-color-teal);
        tbody td p {
            text-align: left !important;
        }
        }
    }
    
    .main-holder .class-block.warlock {
    background-color: #161b31;
}

.main-holder h2.void {
    font-family: IvyMode-Bold;
    color: var(--dh-color-purple);
}
.main-holder {
    > ul {
        margin-left: 30px;
    }
}