:root {
  --readaloud-color: #7e1716;
}  :root{
    --readaloud-color: #7e1716;
}    :root{
    
    --readaloud-color: var(--pf-bb-green);
}

:root {

  --pf-bb-green: #32672e;
  --pf-bb-lgreen: #b4cf74;
  --pf-bb-palegreen: #d6e4b4;
  
  --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-9: calc(var(--font-size-8) * 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 > .intro {
    color: var(--pf-bb-green);
    text-align: center;
    position: relative;
    top: -150px;
    font-size: var(--font-size-6);
    text-shadow: 5px 1px 15px white;
    -webkit-text-stroke: 1px white;
    margin-bottom: -80px;
    border: none !important;
    z-index: 9000 !important;
}

.main-holder > .solo-adv {
    background-color: var(--pf-bb-green);
    color: white;
    font-size: var(--font-size-6);
    border-radius: 15px;
    padding: 20px;
    margin-top: 25px;
}

.main-holder > h1 {
    color: var(--pf-bb-green);
    font-size: var(--font-size-7);
    text-align: center;
    padding: 10px;
    border-top: 2px solid var(--pf-bb-lgreen);
    border-bottom: 2px solid var(--pf-bb-lgreen);
}

.main-holder > h2 {
    color: var(--pf-bb-green);
}

.main-holder > h3 {
    color: var(--pf-bb-green);
}

.main-holder > h4 {
    color: var(--pf-bb-green);
    font-family: Good OT;
    font-weight: bold;
    text-transform: none;
}

.main-holder > .encounter-header {
    background-color: var(--pf-bb-palegreen);
    padding: 10px;
    color: var(--pf-bb-green) !important;
    clear: both;
    border: 2px solid var(--pf-bb-green);
    border-radius: 10px;
}

.enc-first {
    background-color: white;
    padding: 20px 25px 20px 25px;
    border-radius: 100%;
    border: 4px solid var(--pf-bb-green);
    font-size: var(--font-size-4);
    margin-left: -30px;
    margin-right: 10px;
}

.main-holder > .solo-header {
    background-color: var(--pf-bb-green);
    color: white;
    font-family: GoodOT-CondBold;
    padding: 5px;
    font-size: var(--font-size-2);
    text-align: center;
    clear: both !important;
    margin-top: 15em !important;
}

/*Images*/

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

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

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

.book-image-center {
    border-radius: 30px !important;
    margin-left: auto;
    margin-right: auto;
}

.main-holder > .book-image-center {
    border-radius: 30px !important;
}

.main-holder > .image-with-subtitle-center {
    border-radius: 30px !important;
}

.image-with-subtitle-center {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.image-so:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 28px;
  font-family: GoodOT;
  font-size: 14px;
  padding: 2px 8px 0px 8px;
  margin-left: auto;
  margin-right: auto;
  color: var(--pf-bb-green);
  border-radius: 2px;
  z-index: 1001;
}

.image-so > p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 28px;
  font-family: Good OT;
  font-weight: bold;
  font-size: var(--font-size-1);
  padding: 15px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--pf-bb-lgreen);
  color: var(--pf-bb-green);
  border: 2px solid var(--pf-bb-green);
  border-radius: 20px;
  background-position: 50%;
  box-shadow: 0px 2px 12px rgb(0 0 0 / 20%);
  z-index: 1001;
}

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

/*Book Blocks*/

.book-styled-block {
    background: var(--pf-bb-green);
    border-radius: 25px;
    border: 2px solid var(--pf-bb-lgreen);
    margin-bottom: 10px;
    margin-top: 10px;
}

.book-styled-block.light-block {
    background: var(--pf-bb-palegreen) !important;
    border-radius: 25px;
    border: 2px solid var(--pf-bb-green);
    margin-bottom: 10px;
    margin-top: 10px;
}

.book-styled-block.light-block p {
    color: black !important;
}

.book-styled-block.light-block a {
    color: black !important;
    font-weight: bold;
}

.book-styled-block.light-block li {
    color: black !important;
}

.book-styled-block.light-block h5 {
    color: var(--pf-bb-green) !important;
}

.book-styled-block.light-block strong {
    color: black !important;
}

.book-styled-block .icon {
    filter: invert();
}

.rule-block:before {
  content: "";
  background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/beginner-box-adventure/css/rule-icon.png);
  color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-left: -70px !important;
  margin-top: -50px !important;
  margin-bottom: -70px !important;
}

.rule-block {
    margin-top: 25px;
}

.rule-block h5 {
     padding-left: 40px !important;
     padding-top: 10px;
}

.rule-block p {
    padding-left: 40px !important;
}

.main-holder > .split-header {
    font-size: 24px;
    font-weight: normal;
    color: #5d0000;
    font-family: gin, serif;
    border-bottom:0px;
}

.main-holder > .book-styled-block {
    background-color: green;
    color: white !important;
    padding: 30px;
    clear: both;
    font-family: GoodOT;
}

.book-styled-block h1 {
    color: white;
    text-align: center;
    font-family: Taroca;
}

.book-styled-block h2 {
    color: white !important;
}
.book-styled-block h3 {
    color: white !important;
}
.book-styled-block h4 {
    color: white !important;
}
.book-styled-block h5 {
    color: white !important;
    font-family: Taroca;
    font-size: var(--font-size-3);
}
.book-styled-block strong {
    color: white !important;
}

.book-styled-block a {
    color: white !important;
}

.intro-italic {
    font-family: Sabon;
    font-size: var(--font-size-2);
}

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

@media only screen and (max-width: 700px) {
  :root {
    --base-font: 16px;
  }
}

@media only screen and (max-width: 600px) {
  :root {
    --base-font: 14px;
  }
}

/*Other*/





.yellow-guide {
    background: #f1edca;
    color: black;
    font-family: Good OT;
    border-radius: 0px;
    padding: 10px 15px 10px 15px;
    clear: both !important;
    margin-top: 10px;
}

.yellow-guide a {
    font-weight: bold;
}

.green-guide {
    background: var(--pf-bb-palegreen);
    font-family: Good OT;
    border-radius: 0px;
    padding: 10px 15px 10px 15px;
    clear: both !important;
    margin-top: 10px;
}

.actions-block {
    border-radius: 2px;
    font-family: Good OT;
    padding: 5px 15px 5px 15px;
    margin: 10px;
}


/*Image Wizard Styles*/
.image-pzo-tamily-tanderveil {
  width: 290px;
  shape-outside: polygon(23.45% 1.47%, 9.66% 8.08%, 2.76% 22.74%, 3.45% 45.44%, 7.59% 62.39%, 1.03% 71.30%, 2.76% 85.38%, 20.00% 99.17%, 45.52% 99.17%, 75.17% 98.79%, 88.62% 88.45%, 98.97% 83.27%, 92.41% 68.33%, 91.38% 40.17%, 90.34% 14.60%, 68.62% -0.06%);
}

.image-pzo-tamily-tanderveil > p {
  left: 58px;
  top: 259.125px;
}
.image-pzoicy-cave {
  width: 380px;
  shape-outside: polygon(52.98% 5.69%, 46.14% 10.15%, 41.14% 24.44%, 35.35% 38.13%, 26.40% 43.78%, 18.25% 69.97%, 13.51% 76.22%, 0.61% 80.39%, 0.35% 86.34%, 6.14% 93.78%, 17.19% 95.87%, 32.19% 97.95%, 57.46% 97.36%, 75.88% 100.13%, 91.14% 97.95%, 97.72% 91.20%, 103.25% 76.03%, 96.40% 56.38%, 95.09% 27.51%, 77.19% 2.51%, 65.61% 0.33%, 55.35% 0.03%);
}
.image-wolf-wolf-copy {
  width: 370px;
  shape-outside: polygon(31.98% 3.28%, 24.68% 9.65%, 18.20% 18.38%, 17.12% 29.79%, 17.93% 45.90%, 19.28% 69.05%, 4.41% 74.76%, -0.99% 80.80%, 0.90% 90.19%, 13.60% 96.57%, 29.28% 98.25%, 47.12% 98.25%, 67.93% 98.58%, 88.74% 92.54%, 98.74% 88.18%, 99.82% 81.13%, 96.58% 74.08%, 94.14% 69.39%, 97.12% 61.67%, 91.17% 47.91%, 88.74% 33.82%, 83.33% 17.37%, 67.12% 7.31%, 54.95% 3.95%, 43.60% -2.43%);
}
.image-pzo-ranger {
  width: 320px;
  shape-outside: polygon(47.92% 1.35%, 42.92% 7.32%, 38.54% 12.41%, 17.60% 5.77%, 13.54% 10.42%, 12.92% 27.67%, 11.67% 36.52%, 0.73% 39.40%, 1.67% 44.93%, 18.54% 44.04%, 31.04% 61.52%, 26.98% 82.76%, 17.60% 95.81%, 29.17% 98.25%, 49.79% 93.82%, 69.17% 94.27%, 86.35% 99.35%, 94.79% 99.13%, 98.85% 93.60%, 99.17% 77.01%, 93.85% 66.61%, 91.35% 53.56%, 91.67% 22.36%, 87.29% 4.00%, 61.67% 0.24%);
}
.image-pzo-vandy-banderdash {
  width: 225px;
  shape-outside: polygon(36.37% 0.92%, 23.04% 6.05%, 12.37% 14.94%, 1.70% 26.26%, 0.37% 34.35%, 3.04% 44.32%, 3.48% 57.80%, 7.04% 72.08%, 9.70% 79.90%, 20.37% 84.48%, 32.37% 92.03%, 37.26% 99.31%, 47.93% 99.85%, 61.70% 87.18%, 79.93% 83.94%, 91.93% 76.40%, 99.04% 70.47%, 82.59% 62.92%, 97.26% 48.90%, 102.59% 39.74%, 95.48% 21.95%, 75.93% 5.51%, 53.70% -0.96%);
}
.image-oseph-menhemes {
  width: 295px;
  shape-outside: polygon(36.55% 0.97%, 34.18% 8.42%, 33.50% 11.75%, 27.40% 15.67%, 16.55% 21.36%, 6.05% 33.12%, 6.05% 38.81%, 17.91% 42.73%, 14.52% 50.18%, 19.27% 54.69%, 15.88% 84.30%, 5.03% 90.38%, 0.28% 92.73%, 6.38% 97.04%, 17.23% 97.63%, 30.11% 94.50%, 45.71% 91.55%, 67.74% 96.26%, 79.60% 99.92%, 94.86% 98.68%, 93.16% 85.74%, 100.28% 62.60%, 77.23% 24.56%, 67.74% 11.42%, 54.52% -0.80%);
}
.image-elven-pirate {
  width: 345px;
  shape-outside: polygon(30.44% 0.93%, 24.35% 6.21%, 16.23% 12.26%, 7.54% 19.68%, 8.41% 31.99%, 13.62% 37.07%, 11.89% 43.90%, 2.03% 47.42%, 2.90% 53.67%, 9.28% 55.23%, 13.33% 58.36%, 11.60% 67.15%, 14.49% 79.84%, 9.57% 92.15%, 4.93% 97.03%, 11.31% 99.37%, 36.52% 99.18%, 59.13% 99.57%, 77.68% 99.37%, 84.35% 91.56%, 76.52% 54.25%, 98.26% 56.21%, 98.26% 50.15%, 64.93% 30.82%, 53.91% 8.75%, 44.64% 0.93%);
}
.image-merisielm {
  width: 309.996px;
  shape-outside: polygon(48.87% 0.68%, 20.81% 8.55%, 5.33% 15.78%, 1.13% 23.43%, 4.03% 33.06%, 7.26% 37.00%, 45.33% 37.00%, 31.13% 76.83%, 20.81% 91.92%, 3.07% 96.08%, 6.94% 99.36%, 36.29% 100.02%, 80.81% 101.11%, 93.39% 93.24%, 99.52% 76.39%, 98.87% 63.70%, 94.03% 36.34%, 78.55% 7.46%, 67.26% 0.24%);
}
.image-pzo-character-mage-for-hire {
  width: 300px;
  shape-outside: polygon(1.50% 2.21%, 2.83% 9.81%, 11.17% 12.28%, 13.50% 19.05%, 14.17% 27.96%, 12.50% 36.04%, 7.17% 43.80%, 10.83% 52.21%, 10.17% 58.82%, 7.83% 67.23%, 10.50% 74.49%, 10.17% 79.86%, 7.83% 84.48%, 10.83% 91.57%, 9.83% 98.67%, 18.17% 102.75%, 27.17% 98.75%, 45.83% 95.61%, 69.17% 98.42%, 94.83% 99.74%, 98.50% 95.28%, 96.83% 55.52%, 99.83% 26.80%, 94.17% 17.07%, 79.50% 4.03%, 67.83% -1.25%, 53.17% 0.40%, 46.50% 5.85%, 27.17% 1.22%, 8.83% 0.07%);
}