.reader-container .body-background {
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(214, 208, 209, 0.5)), url("https://content.demiplane.com/compendium/pathfinder-2e/salt-of-the-ocean/css/pagebg1.png") !important;
}

.reader-page {
    background: none !important; 
}

.main-holder .trait-holder {
    box-shadow: 0px 0px 3px var(--book-accent-color-3);
}
  
            /*Temporary*/
.main-holder tooltip {color: magenta;} 
/* Monsters with pluralized names */
.trait-holder:has([data-single-name=""]) {
    background: #a6a6ed  !important;
    & .left-header:after {
        content: "Missing data-single-name";
        margin-left: 20px;
        font-size: 15px;
    }
}
.force-clear {
    clear: both;
}

/*Fonts*/

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

 :root{
    --readaloud-color: #173a57;
    --book-header-color-1: #221f20; /*Black*/
    --book-off-black: #2d2d2d;
    --book-accent-color-1: #173a57; /*blue*/
    --book-accent-color-2: #ba434d; /*Coral*/
    --book-accent-color-3: #7b7271; /*mid red grey*/
    --book-sidebar-color-1: #ebe5d3; /*Tan*/
    --book-subtitle-color: #584f4d; /*dark grey*/
    /*-----*/
    --book-header-font-h1: "Columbus";
    --book-header-font-h2: "Columbus";
    --book-header-font-h3: "GoodOT-Bold";
    --book-header-font-h4: "GoodOT-CondBold";--book-header-font-h5: "GoodOT-CondBold";
    --book-handout-font-1: "GoodOT";
    --book-body-font-2: "GoodOT-CondBold";
     /*-----*/
  --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));
}



/*Headers*/

.main-holder > h1 {
    font-family: var(--book-header-font-h1);
    color: var(--book-off-black);
    font-size: var(--font-size-7);  
    text-transform: none;
    text-align: center;
}

.main-holder .pfs-opener {
    background-color: var(--book-subtitle-color);
    background: url("https://content.demiplane.com/compendium/pathfinder-2e/salt-of-the-ocean/css/header-background-3.jpg");
    border-bottom: 10px solid var(--book-accent-color-2);
    padding: 20px;
    h1 {
        font-family: var(--book-header-font-h1);
        color: var(--book-off-black);
        font-size: var(--font-size-7);  
        text-transform: none;
        text-align: center;
        margin-top: 20px;
    }
    p {
        font-family: var(--book-body-font-2);
        color: var(--book-off-black);
        font-size: var(--font-size-3);
        text-align: center;
    }
}

.main-holder > h2 {
    color: var(--book-header-color-1);
    font-family: var(--book-header-font-h2);
    font-size: var(--font-size-4);
    text-transform: none;
}

.main-holder h2.split-header {
    border-bottom: none;
}

.main-holder > h3 {
    font-family: var(--book-header-font-h3);
    color: var(--book-accent-color-1);
    font-size: var(--font-size-3);
    border: none;
    padding: 0px;
}

.main-holder > h4 {
    color: var(--book-accent-color-3);
    font-family: var(--book-header-font-h3);
    font-size: var(--font-size-2);
    text-transform: none;
}

.main-holder > h4.split-header, .main-holder > h3.split-header {
    border-bottom: none;
}

.main-holder > h5 {
    font-family: var(--book-header-font-h5);
    font-size: var(--font-size-2);
}

/*Body*/

.main-holder .image-with-subtitle-center p {
    a, .reader-link {
        color: var(--book-accent-color-2);
    }
}

.main-holder .image-with-subtitle-left.map {
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    p {
        font-family: "GoodOT-CondBold";
        margin-bottom: 10px;
        a, .reader-link {
            color: var(--book-accent-color-2);
        }
    }
}

.main-holder .pdf-links {
    margin-top: 2em;
    border-top: 2px solid var(--book-accent-color-3);
    font-size: var(--font-size-2);
    a, .reader-link {
        color: var(--book-accent-color-2);
        font-family: "GoodOT-Bold";
    }
}

/*Tables*/

.main-holder {
    .standard-table {
        th {
            font-family: "GoodOT-Bold";
            font-size: var(--font-size-1);
            color: white !important;
        }
        td {
            font-family: var(--book-handout-font-1);
            font-size: var(--font-size-1);
        }
    }
    
    .image-table {
        tr:nth-of-type(even) {
            background-color: #e0dede;
        }
        tr:nth-of-type(odd) {
            background-color: #eceaea;
        }
        td > p {
            font-size: var(--font-size-2);
            font-family: "GoodOT-Bold";
            a {
                color: var(--book-accent-color-2);
            }
        }
        }
        
        table th p {
            color: white;
        }
}

/*Divs*/

.main-holder > .book-styled-block, .main-holder > .sidebar {
    background-color: var(--book-sidebar-color-1);
    background: linear-gradient(90deg,rgba(219, 212, 198, 1) 0%, rgba(235, 229, 211, 1) 10%, rgba(235, 229, 211, 1) 90%, rgba(219, 212, 198, 1) 100%) !important;
    padding: 20px 30px;
    width: 80%;
    margin: 2em auto;
      clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%);

    h5 {
        font-family: var(--book-header-font-h2);
        text-transform: none;
        color: var(--book-off-black);
        text-align: center;
        font-size: var(--font-size-3);
    }
    h5:not(:first-of-type) {
        margin-top: 1em;
    }
    p, li {
        color: var(--book-off-black);
        font-family: var(--book-handout-font-1);
    }
    h4 {
        font-family: var(--book-header-font-h3);
        color: var(--book-accent-color-3);
        font-size: var(--font-size-2);
        text-transform: none;
        margin-top: 1em;
    }
    table th p {
        color: white;
    }
}

.main-holder .book-styled-block.handout {
    width: 100%;
    h3 {
        background-color: var(--book-subtitle-color);
        color: white !important;
        padding: 15px 5px 10px;
        text-align: center;
      clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%);
      margin: 20px 5px -30px 5px;
      position: relative;
      top: -50px;
      font-family: var(--book-header-font-h2) !important;
      text-transform: none !important;
      line-height: 1.2;
      font-size: var(--font-size-2) !important;
    }
    h5 {
        text-align: left;
        font-family: var(--book-header-font-h5);
        font-size: var(--font-size-2);
    }
    h4 {
        text-transform: uppercase;
        font-size: var(--font-size-2);
    }
    h4:not(:first-of-type) {
        margin-top: 2em;
    }
    .trait-holder {
        h3.split-header {
            text-align: left;
            clip-path: none;
            background-color: transparent;
            padding: 0px 0px;
            color: var(--book-off-black) !important;
            font-family: "GoodOT-CondBold" !important;
            text-transform: uppercase !important;
            top: 0px;
            margin: 5px;
        }
    }
}

.main-holder .trait-holder {
    border-bottom: 10px solid var(--book-accent-color-2);
    background-color: #e0dede;
    margin-bottom: 1em;
}

.main-holder .demiplane-credits {
    margin-top: 2em;
    padding-top: 10px;
    border-top: 2px solid var(--book-accent-color-2);
    h2 {
        font-family: var(--book-header-font-h4);
        font-size: var(--font-size-2);
        margin-bottom: 0px;
    }
    p {
        font-family: "GoodOT";
        margin-top: 15px;
        font-size: var(--font-size-1);
    }
}


/* Images & Subtitles */

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

.book-image-center {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

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

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

.image-with-subtitle-center {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 30px !important;
}

.main-holder > .image-with-subtitle-center p {
    font-family: var(--book-header-font-h3);
    color: var(--book-off-black);
}

.main-holder > .image-with-subtitle-center a {
    font-family: var(--book-header-font-h3);
    color: var(--book-header-color-1);
}



.image-so:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 28px;
  font-family: "Benguiat Std";
  font-size: var(--font-size-small-1);
  padding: 2px 8px 0px 8px;
  margin-left: auto;
  margin-right: auto;
  color: var(--sf-green);
  background-color: var(--sf-subtitle-background);
  border: 2px solid var(--sf-subtitle-border);
  border-radius: 2px;
  z-index: 1001;
}

.image-so > p {
    clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 38px;
  font-family: var(--book-header-font-h2) !important;
  font-size: var(--font-size-1) !important;
  padding: 20px;
  background-color: var(--book-subtitle-color);
  color: white !important;
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 2px 12px rgb(0 0 0 / 20%);
  z-index: 1001;
  text-transform: none;
  margin-left: auto;
  margin-right: auto;
}


.image-so.alt > p {
  background-image: none;
  color: white;
  box-shadow: none;
}




/*PFS Unique*/

.pdf-links {
    text-align: center;
    margin-top: 30px;
}

.hm-spacer {
    margin-top: 10px;
}

.image-table td {
    padding: 15px !important;
}

.intro-divider {
    height: 4px;
    background: black;
    margin-top: 36px !important;
    margin-bottom: -8px;
}


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


@media screen and (max-width: 700px) {
    .main-holder {
        .split-header .right-header {
            display: block;
            float: none;
            font-size: var(--font-size-2);
            opacity: 0.8;
        }
        .trait-holder .split-header .right-header {
            font-size: var(--font-size-1);
        }
    }
}


@media screen and (max-width: 600px) {
    .main-holder {
        .pfs-opener {
            h1 {
                font-size: var(--font-size-5);
            }
            p {
                font-size: var(--font-size-2);
            }
        }
        .book-styled-block {
            width: 100%;
        }
    }
}
/*Image Wizard Styles*/
.image-pzopattyanofgoldbitsfinal {
  width: 295px;
  shape-outside: polygon(39.36% 2.13%, 16.64% 21.33%, 10.20% 35.73%, 9.53% 62.56%, 1.39% 72.43%, 23.08% 98.56%, 78.00% 97.97%, 84.10% 95.04%, 98.68% 51.84%, 98.68% 38.24%, 54.95% 0.53%);
}
 {
}
.image-pzopattyanofgoldbitsfinal > p {
  left: 34.100006103515625px;
  top: 168.59999084472656px;
}
.image-pzoanemonefinal {
  width: 300px;
  shape-outside: polygon(41.87% 1.04%, 34.87% 5.03%, 28.20% 7.12%, 31.53% 14.41%, 24.53% 20.83%, 15.87% 31.94%, 0.53% 49.65%, 1.20% 56.08%, 29.53% 63.54%, 24.87% 75.35%, 28.20% 98.16%, 45.20% 99.20%, 85.87% 95.21%, 71.53% 85.14%, 72.53% 53.72%, 91.87% 53.02%, 88.87% 43.12%, 71.53% 28.37%, 98.87% 7.29%, 97.53% 0.52%);
}
.image-pzoanemonefinal > p {
  left: 98.60000610351562px;
  top: 152px;
}
.image-pzozombieleshyfinal {
  width: 220px;
  shape-outside: polygon(32.09% 0.61%, 11.64% 16.46%, 1.18% 28.05%, 4.82% 62.20%, 14.36% 89.76%, 83.45% 98.29%, 98.00% 90.98%, 97.55% 79.70%, 74.82% 25.91%, 97.55% 19.51%, 91.18% 2.13%);
}
.image-pzozombieleshyfinal > p {
  left: 56.600006103515625px;
  top: 10px;
}
.image-pzoleavesondistantwindsfinal {
  width: 300px;
  shape-outside: polygon(17.53% 2.07%, 0.53% 13.70%, 2.20% 29.20%, 35.20% 45.22%, 30.87% 55.45%, 31.53% 85.17%, 47.53% 95.50%, 92.87% 97.31%, 96.87% 89.56%, 97.87% 57.26%, 99.53% 23.67%, 93.20% 12.14%, 56.87% 1.29%);
}
.image-pzoleavesondistantwindsfinal > p {
  left: 35.600006103515625px;
  top: 35px;
}
.image-pzozombiegoulfinal {
  width: 250px;
  shape-outside: polygon(39.04% 0.31%, 29.84% 28.44%, 19.84% 24.16%, 18.24% 51.62%, 8.64% 56.82%, 0.64% 91.99%, 97.44% 98.10%, 99.84% 68.75%, 98.24% 47.71%, 97.44% 1.22%);
}
.image-pzozombiegoulfinal > p {
  left: 101.60000610351562px;
  top: -11px;
}
.image-pzotheheartwoodrotsfinal {
  width: 230px;
  shape-outside: polygon(5.04% 1.36%, 0.70% 38.84%, 3.30% 44.46%, 17.22% 59.28%, 8.52% 88.18%, 8.52% 91.93%, 70.70% 99.08%, 98.09% 91.93%, 96.78% 62.28%, 95.48% 0.34%);
}
.image-pzotheheartwoodrotsfinal > p {
  left: 14.600006103515625px;
  top: -5px;
}