.force-clear {
      clear: both !important;
  }               
    


.main-holder > .Headers_H1-SUB {
    color: var(--dh-clr-base-1) !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--font-size-1);
    border-left: 5px solid var(--dh-clr-base-1);
    padding: 2px 2px 2px 10px;
    background: var(--dh-color-gold);
    margin: -10px 0 20px 0;
    font-family: "Overpass" !important;
}



    
 @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("truetype");
}

@font-face {
  font-family: Minion-Pro;
  src: url("https://content.demiplane.com/fonts/MinionPro-Regular.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;

  
}


.main-holder {
    background-color: transparent;
    margin-top: 24px !important;
    border-radius: 8px 8px 0 0;
    margin: auto;
    max-width: 864px !important;
    padding: 8px 32px 32px;
}

.main-holder > h1 {
    font-family: "Overpass-Black" !important;
    color: var(--dh-color-purple-light);
    margin-top: 24px;
    text-transform: uppercase;
    font-size: var(--font-size-7);
}

.main-holder h2 {
    font-family: 'Eveleth-Clean';
    color: var(--dh-color-dark-blue);
    margin-top: 30px !important;
    font-size: var(--font-size-3);
    margin-bottom: 12px;
    border-bottom: 2px dotted var(--dh-color-purple);
}

.main-holder > h3 {
    font-family: 'Overpass-Black';
    color: var(--dh-color-purple-light);
    font-weight: bold;
    font-size: calc(var(--font-size-2)*1.1);
    margin-top: 40px;
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 7px solid var(--dh-color-purple);
}

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

.main-holder h5 {
    font-family: 'Overpass';
    font-style: italic;
    color: var(--dh-color-gold-dark);
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 8px;
}

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

.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;
    text-wrap: pretty;
}

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

.main-holder {
    .narrative-block {
    background: var(--dh-color-gray);
    padding: 5px 20px 10px 20px;
    margin: 15px 20px 20px 0;
    border-radius: 8px 8px 8px 8px;
}

.narrative-block em {
    color: #000 !important;
    font-size: 15px  !important;
    font-family: Overpass !important;
}

.quote-block {
    background: var(--dh-color-blue);
    padding: 0 2px 2px 5px;
    margin: 10px 20px;
}

.quote-block p {
    color: #fff !important;
    font-family: Overpass !important;
    font-size: var(--font-sizem-1);
}

.explainer-text {
    border-bottom: 2px dotted var(--dh-color-purple);
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}

.tooltip-block {
    background: #9F9;
    padding: 0 20px;
    margin: 0 20px;
}

.callout-block {
    padding: 0 20px;
    margin: 0 20px;
    border-left: solid black 1px;
    border-right: solid black 1px;
}

.callout-header {
    font-style: normal !important;
    color: var(--dh-color-purple) !important;
    font-size: 17px !important;
}

.act-title {
    text-transform: uppercase;
    font-size: 30px;
    font-family: Overpass-Black;
}

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

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

.col-list p {
    line-height: var(--font-size-small-2)
}
.example-block {
    padding: 0 0.\35 em 0 0.\35 em;
    margin: 40px 0 40px 0;
    text-align: justify;
}

.force-indent {
    padding: 0 1em 0 1em;
}

.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;
}
}

.main-holder a {
    color: var(--dh-color-purple-light);
    font-weight: bold;
    font-family: 'Overpass' !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;
}



/*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;
}

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

.main-holder .moments-table th {
    border-bottom: 1px solid black;
    padding-bottom: var(--font-size-1);
}

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

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

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


  /* TEMPORARY STYLES */

    /* Cards */
    .card-holder {
        width: 300px;
        min-height: 400px;
        margin: 8px;
        display: block;
        padding:10px;
    }
    
    .card-holder[data-card-type=community] {
        background: #17c217;
    }
    .card-holder[data-card-type=ancestry] {
        background: #c5c524;
    }
    .card-holder[data-card-type=foundation] {
        background: #5252ff;
    }
    .card-holder[data-card-type=domain] {
        background: purple;
    }

    /* 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 {
        margin-top: 1.\35 em;
        padding: 0 0.\35 em 1em 0.\35 em;
        min-height: 40px;
    }
    
    .weapon-block p {
        margin-bottom: -0.\35 em;
    }
    
    .last-block {
        margin-bottom: 2em;
    }
    
    .adv-block {
        border: 3px solid var(--dh-color-gray) !important;
        border-top: 5px !important;
        border-radius: 6px 6px 6px 6px !important;
        padding-bottom: 1em !important;
    }
    
    .adv-block .book-image-right {
        margin-right: 1.\35 em !important;
        margin-top: 1em !important;
    }
    
    .main-holder .adv-block p {
        margin: 0px 10px 10px 10px;
        line-height: 100% !important;
    }
    
    .adv-name {
        background-color: var(--dh-color-gray) !important;
        font-family: Overpass !important;
        font-style: normal !important;
        color: #000 !important;
        font-size: var(--font-size-1) !important;
        padding: 10px 5px 5px 10px !important;
        text-align: left  !important;
    }
    
    .adversary-core-stats {
        padding: 1em 0 0 0.\35 em;
        line-height: var(--font-size-1);
    }
    
   .main-holder .adv-block .Enemy-Block_Monster-SpecialMoveTitle {
        text-transform: uppercase;
        text-decoration-color: transparent !important;
        border-bottom: 2px solid var(--dh-color-gray);
        padding: 0px !important;
        margin: 10px 10px 10px 10px;
    }

    
    .adversary-tactics {
        padding: 0em 0 0 0.\35 em;
        text-align: center;
    }
    
    .main-holder .adversary-statistics {
        display: flex;
    }
    
    .adversary-detail {
        padding: 0.\35 em 0 0 0.\35 em;
    }
    
    .npc-block {
        border: 3px solid var(--dh-color-gray);
        border-top: 5px;
        border-radius: 6px 6px 6px 6px;
        padding-bottom: 1em;
    }
    
    .npc-name {
        background-color: var(--dh-color-gray);
        font-family: Overpass !important;
        font-style: normal !important;
        color: #000 !important;
        font-size: var(--font-size-1) !important;
        padding: 10px 5px 5px 10px;
    }
    
    .main-holder > .npc-block p {
        margin: 15px 10px 10px 10px !important;
    }
    
    .main-holder {
    h1, h2, h3, h4, h5 {
        color: black;
        line-height: 1.2;
    }
    h2:before, h3:before, h4:before, h5:before {
        display: none;
    }
    h1 {
        margin: 5px 0px 20px;
    }
    h1.gm-header {
        font-size: var(--font-size-8);
            text-align: right;
            width: fit-content;
            margin: auto;
        span {
            display: block;
            font-size: var(--font-size-4);
        }
    }
    h1.gm-header:before{
        display: none;
    }
    p.center-text {
        text-align: center;
    }
    p.act {
        margin-bottom: -30px;
    }
    p.act:not(:first-of-type) {
        border-top: 2px dotted black;
        padding-top: 20px;
    }
}

.main-holder .stat-block {
    background: var(--dh-color-off-white);
    margin: 20px 0px;
    padding: 10px 0px;
    border: 2px solid var(--dh-color-gray);
    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: black;
      font-family: Overpass;
      font-size: var(--font-size-2);
    }
    .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: black;
        font-size: var(--font-size-1);
        border-bottom: 2px dotted black;
        margin: 20px 20px 0px;
        padding: 0px;
      }
      p {
        margin: 15px 0px;
      }
    }
  }
  .stat-block.environment-block {
    background-color: #eceded;
    border-color: #8c8d90;
    .book-image-center {
      margin: 0px 0px -10px;
    }
  }
  
.main-holder .stat-block .stat-block-individual-adversaries {
    font-family: Overpass;
    table.individual-adversaries {
        tr:nth-of-type(odd) {
            font-weight: bold;
            color: black;
            background-color: var(--dh-color-gray);
        }
    }
}

.main-holder .demiplane-credits {
    h2 {
        font-size: var(--font-size-small-2);
    }
    border-top: 2px dotted black;
    padding-top: 20px;
    p {
        font-size: var(--font-size-small-2);
    }
}

.main-holder .link-block {
    background-color: var(--dh-color-gray);
    a.reader-link, p {
        color: black;
    }
    a.reader-link:hover {
        color: var(--dh-color-purple-light);
    }
}

.main-holder h4 {
    font-size: calc(var(--font-size-2)*1.1);
    margin-bottom: -6px;
}
.main-holder h2 {
    margin-top: 2em !important;
}
.main-holder .stat-block .stat-block-individual-adversaries table.individual-adversaries { 
    td {
    padding: 0px;
    }
    p {
        margin: 5px 0px;
    }
    tr:nth-of-type(odd) {
        background-color: #d4d5d6;
    }
    }

.main-holder .npc-block {
    h5 {
        font-weight: bold;
    }
    border-color: var(--dh-color-gray) !important;
}

.main-holder .demiplane-credits h2 {
    border: none;
}

.section-header-daggerheart {
    border-bottom: 10px solid var(--dh-color-gold-dark);
    margin-bottom: 0px;
}

@container mainHolder (max-width:600px) { 
    .main-holder h3 { 
        border-left: 0px; border-bottom: 4px solid var(--dh-color-purple); width: fit-content; margin: auto; 
        
    }
    
}

.main-holder h2 {
    text-wrap: balance;
}

@container mainHolder (max-width: 700px) {
    .main-holder h1.gm-header {
        font-size: var(--font-size-6);
        text-align: center;
        span {
            font-size: var(--font-size-2);
        }
    .main-holder h1 {
        font-size: var(--font-size-6);
    }
}

@container mainHolder (max-width: 600px) {
    .main-holder {
        h1:before {
            display: none;
        }
        h1 {
            margin-top: 30px;
            text-align: left;
            font-size: var(--font-size-5);
        }
    }
}

.main-holder h1:not(:first-of-type):before {
    display: none;
}

@container mainHolder (max-width: 600px) {
    .main-holder {
        h3 {
            border-left: none;
            border-bottom: 3px solid var(--dh-color-gold-dark);
            width: fit-content;
            margin: auto;
        }
    }
}

.main-holder {
    h1, h2, h3, h4, h5 {
        text-wrap: balance;
    }
}

/*Image Wizard Styles*/
.image-charamarlowe {
  width: 365px;
  shape-outside: polygon(0.24% 0.51%, -0.03% 14.62%, 8.46% 57.37%, 3.25% 76.65%, 14.76% 99.12%, 90.38% 102.89%, 108.73% 88.18%, 100.51% -1.48%);
}
 {
}
.image-charabarnacle {
  width: 355px;
  shape-outside: polygon(55.18% 0.23%, 17.99% 39.57%, 3.63% 89.33%, -3.70% 96.68%, -0.04% 104.26%, 109.26% 104.73%, 99.40% -0.72%);
}
.image-charagarrick {
  width: 355px;
  shape-outside: polygon(28.42% 0.57%, 2.78% 21.24%, -3.42% 43.26%, 8.70% 52.50%, 2.78% 73.34%, 16.30% 82.16%, 15.46% 98.47%, 28.70% 102.50%, 97.15% 100.65%, 105.32% 26.03%, 99.96% -2.46%);
}
.image-charakhari {
  width: 365px;
  shape-outside: polygon(36.13% 0.07%, 34.21% 11.76%, -4.42% 13.61%, 0.51% 23.63%, 9.28% 30.68%, 7.91% 61.85%, 13.66% 85.78%, 41.06% 101.55%, 102.98% 107.79%, 107.64% 51.76%, 98.60% 0.63%);
}
.image-charavarian {
  width: 400px;
  shape-outside: polygon(35.84% 0.14%, 8.84% 38.14%, -3.91% 51.68%, 1.34% 61.66%, 22.59% 74.96%, 13.84% 98.00%, 22.09% 106.08%, 85.84% 98.71%, 106.09% 43.85%, 98.34% 0.85%);
}
.image-charaarchanist {
  width: 350px;
  shape-outside: polygon(0.19% -0.10%, -0.10% 28.55%, 26.19% 97.93%, 37.33% 102.43%, 106.76% 103.83%, 103.33% -3.47%);
}
.image-quickstartstandeewraith {
  width: 325px;
  shape-outside: polygon(52.05% 0.26%, 22.21% 32.20%, 10.51% 54.51%, -7.64% 59.17%, 2.21% 77.30%, 35.74% 82.07%, 36.97% 103.25%, 104.97% 102.45%, 102.21% -1.83%);
}