.book-styled-block {
    background: #FDFDFD;
}

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

.flipmat-90 {
    transform: rotate(90deg);
}

.flipmat-180 {
    transform: rotate(180deg);
}

.flipmat-270 {
    transform: rotate(270deg);
}

.flip-tiles p {
    font-family: gin;
    font-size: 16px;
}

.flip-tiles td {
    width: 150px;
    height: 150px;
}

 :root{
    --readaloud-color: #7e1716;
    
    --yue-blue: #063654;
    --yue-orange: #a55027;
    --yue-teal: rgb(204, 219, 224);
    --yue-border: rgb(231, 193, 62);
    --yue-white: #FFFFFF;
    --yue-subtitle-border: #873f79;
    --yue-subtitle-background: #873f79;
    
    --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: "Barchella Drumal";
    src: url("https://content.demiplane.com/fonts/Barchella_Drumal.otf") format("opentype");
}

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

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

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

@font-face {
    font-family: "Galliard Std";
    font-weight: bold;
    src: url("https://content.demiplane.com/fonts/GalliardStd-Ultra.otf") format("opentype");
}

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

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

@font-face {
    font-family: "Good OT";
    font-weight: bold;
    src: url("https://content.demiplane.com/fonts/GoodOT-Bold.otf") format("opentype");
}

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

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

.Art-Only_TOC-H1 {
    font-family: 'Carta Marina' !important;
    font-size: var(--font-size-3) !important;
    color: var(--yue-blue) !important;
}

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


.book-styled-block {
    background-color: var(--yue-orange);

    border-radius: 0px;
    
    padding: 16px 16px 36px 16px;
    
    
    margin-top: var(--font-size-1);
    margin-bottom: 120px;
    color: var(--yue-white);
}

.book-styled-block:after {
    content: "";
    display: block;
    height: 86px;
    margin-top: -76px;
    width: calc(100% + 32px);
    margin-bottom: -28px !important;
    top: 86px;
    margin-left: -16px;
    margin-right: -16px;
    position: relative;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/intro-year-of-unfettered-exploration/css/yue-sidebar-bottom.png?format=webp);
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 15/5;
}

.book-styled-block p {
    font-family: Good OT;
}

.main-holder .book-styled-block a, href {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #1B9AF0;
}

.book-styled-block p strong {
    color: white;
}

.book-styled-block h5 {
    text-align: center;
    color: var(--yue-green);
    font-family: Carta Marina;
    font-weight: bold;
    font-size: var(--font-size-4);
    text-shadow: 2px 2px 4px black, -1px -1px 4px black;
    margin-bottom: 16px;
}

.yue-handout-block-1 {
    background-color: var(--yue-white);
    border-radius: 0px;
    padding: 16px 16px 16px 16px;
    margin-top: var(--font-size-1);
    margin-bottom: 40px;
    color: black;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/intro-year-of-unfettered-exploration/css/yue-paper-bg.jpg?format=webp);
    background-repeat: repeat;
    background-size: auto;
}

.yue-handout-block-1:after {
    display: none;
}

.yue-handout-checkboxes {
    font-size: 28px;
}

.yue-handout-block-1 p {
    font-family: Good OT;
}

.main-holder .yue-handout-block-1 a, href {
    color: black;
    text-decoration: none;
    border-bottom: 1px solid #1B9AF0;
}

.yue-handout-block-1 p strong {
    color: black;
}

.yue-handout-block-1 h5 {
    text-align: center;
    color: var(--yue-white);
    font-family: Carta Marina;
    font-weight: bold;
    font-size: var(--font-size-4);
    text-shadow: 2px 2px 4px black, -1px -1px 4px black;
    margin-bottom: 16px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/intro-year-of-unfettered-exploration/css/yue-water-bg.png?format=webp);
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: -16px;
    margin-top: -16px;
    margin-right: -16px;
    padding: 8px;
}


.yue-handout-script-text p strong {
    font-family: BradleyHand;
}












.split-header {
    font-size: var(--font-size-2);
}

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

.main-holder > h1 {
    font-family: Carta Marina;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--yue-white);
    text-shadow: 2px 2px 4px black, -1px -1px 4px black;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background-image: url('https://content.demiplane.com/compendium/pathfinder-2e/intro-year-of-unfettered-exploration/css/yue-header-bg.png?format=webp');
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    margin-top: -16px;
    margin-bottom: var(--font-size-3);
    padding-top: var(--font-size-3);
    padding-bottom: var(--font-size-3);
    position: relative;
    aspect-ratio: 15/5;
}

h1 > span.chapter-intro-span {
    max-width: 660px;
    margin-left: auto;
    font-size: var(--font-size-7);
    margin-right: auto;
    line-height: normal;
    padding-bottom: var(--font-size-2);
    text-shadow: 2px 2px 4px black, -1px -1px 4px black;
}

h1 > span:not(.chapter-intro-span) {
    margin-top: var(--font-size-2);
    font-size: var(--font-size-2);
    font-family: GoodOT;
}

.main-holder > h2 {
    font-family: Carta Marina;
    font-weight: bold;
    color: var(--yue-green);
    text-transform: none;
    font-size: var(--font-size-4);
    text-align: center;
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-small-1);
}

.main-holder > h2 strong {
    color: var(--yue-green); 
}

.main-holder > h3 {
    font-family: Good OT;
    font-weight: bold;
    font-size: var(--font-size-2);
    color: var(--yue-orange);
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-small-1);
}

.main-holder > h4 {
    font-family: Good OT;
    font-weight: bold;
    font-size: var(--font-size-1);
    color: var(--yue-orange);
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-small-1);
}

.main-holder > h5 {
    font-family: Good OT;
    font-weight: bold;
    font-size: var(--font-size-2);
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-1);
}

.main-holder > .chapter-title {
    text-transform: none;
    color: var(--gw-blue);
}

.record-header-1 {
    font-family: "Palatino";
    text-transform: capitalize;
    font-weight: bold;
    color: var(--gw-dark-red);
    margin-top: var(--font-size-6);
    margin-bottom: var(--font-size-1);
}

.record-header-2 {
    font-family: "Palatino";
    text-transform: capitalize;
    font-weight: bold;
    color: black;
}

.record-header-3 {
    margin: 0;
}

.record-header-3 > strong {
    font-family: "Times New Roman";
}

.record-header-3.bottom {
    margin-bottom: var(--font-size-1);
}

.main-holder > ul {
    font-size: var(--font-size-1);
}

.standard-table {
    font-family: Good OT;
    margin-top: var(--font-size-1);
    margin-bottom: var(--font-size-1);
}

.ap-author-and-text {
    font-family: Times New Roman;
    margin-top: 4px;
}

.ap-author-and-text--top {
    margin-bottom: 4px;
}

.sidebar {
    padding-top: var(--font-size-4);
    padding-bottom: var(--font-size-1);
    padding-left: var(--font-size-5);
    padding-right: var(--font-size-5);
    margin-bottom: var(--font-size-2);
}

.sidebar > * {
    font-family: GoodOT;
    color: var(--yue-green);
}

.sidebar > h5 {
    color: var(--yue-green);
    font-size: var(--font-size-2);
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: var(--font-size-small-3);
}

.sidebar li {
    font-size: var(--font-size-1); 
}




.adv-track {
    margin-bottom: var(--font-size-1);
    text-align: center;
    position: relative;
    padding: var(--font-size-5) var(--font-size-1) var(--font-size-5) var(--font-size-1);
    background-color: var(--yue-teal);
    border: 4px solid var(--yue-border);
    border-image-slice: 13;
}

.adv-track h4 {
    font-family: Good OT;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: none;
    color: var(--yue-green);
    font-size: var(--font-size-5);
}

.adv-track p {
    margin-top: var(--font-size-small-3);
}

.adv-track table {
    background-color: transparent;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: Nunito;
}

.adv-track tr > td {
    text-align: left;
    padding-bottom: var(--font-size-5);
}

.main-holder .adv-track .adv-level {
    text-align: center;
    font-family: Auriol LT Std;
    font-size: var(--font-size-8);
    color: var(--yue-green);
}

.readaloud-block {
    padding-top: var(--font-size-1);
    margin-top: var(--font-size-2);
    margin-bottom: var(--font-size-2);
    /*overflow: visible;*/
}

.readaloud-block p {
    font-family: Good OT;
    font-size: var(--font-size-1);
    color: var(--yue-green);
}

.centered-block {
    background-color: var(--gw-pink);
    padding: var(--font-size-1) var(--font-size-5) var(--font-size-1) var(--font-size-5);
    margin-top: var(--font-size-1);
    margin-bottom: var(--font-size-3);
    color: var(--gw-blue);
}

.centered-block p {
        font-family: Good OT;
        font-size: var(--font-size-1);
}

.centered-block p strong {
    color: var(--gw-blue);
}

.centered-block h5 {
    text-align: center;
    font-family: Good OT;
    font-weight: bold;
    color: var(--gw-blue);
    font-size: var(--font-size-2)
}

.main-holder > .split-header span{
    color: var(--yue-orange);
    font-family: Good OT;
    font-weight: bold;
}

.trait-holder {
    overflow: visible;
}

.overflow-hidden {
    overflow: hidden;
}

.display-flow-root {
    display: flow-root;
}

.trait-holder > p {
    margin-top: var(--font-size-1);
}


p {
    font-family: Nunito;
    font-size: var(--font-size-1);
    line-height: var(--font-size-2);
    margin-top: 0px;
    padding: 0px;
    margin-bottom: var(--font-size-1);
}

p strong {
    font-family: Good Ot;
}


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

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

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

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

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

.yue-subtitle-block {
    clear: both;
}

.yue-subtitle-text {
    
    background: var(--yue-subtitle-background) !important;
    width: fit-content !important;
    margin: auto !important;
    margin-bottom: 32px !important;
    padding: 4px 12px 4px 12px !important;
    color: var(--yue-white) !important;
    font-family: Carta Marina !important;
    text-shadow: 2px 2px 4px black, -1px -1px 4px black !important;
    box-shadow: 0px 0px 3px 3px var(--yue-subtitle-background) !important;
}

@media only screen and (max-width: 660px) {
  p {
      line-height: 24px;
  }
  
  :root {
      --gw-p-font-size: 16px;
  }
}

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

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

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

.image-table a {
    font-family: GoodOT-Bold;
    text-transform: uppercase;
    color: var(--yue-orange);
}

.image-table tr {
    border-bottom: 2px solid var(--yue-teal);
}

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

/*Image Wizard Styles*/

.image-pzopfs-hyacinthlamprey {
  margin-right: 20px;
  margin-bottom: 5px;
  shape-outside: polygon(68.91% 1.07%, 76.55% 2.89%, 87.82% 5.93%, 96.18% 18.70%, 101.27% 33.89%, 87.45% 62.46%, 82.36% 78.88%, 81.64% 100.61%, 17.27% 99.85%, -3.09% 67.94%, 0.91% 43.32%, 18.73% 24.47%, 34.00% 12.31%, 48.18% 2.13%, 57.64% -1.52%);
}

.image-fola-barun {
  margin-left: 20px;
  width: 205px;
  shape-outside: polygon(44.63% 3.95%, 35.37% 19.24%, 35.37% 24.84%, 14.88% 24.18%, 4.15% 24.67%, 7.56% 27.80%, 22.20% 29.28%, 25.61% 32.73%, 12.44% 61.19%, 18.29% 77.14%, 17.80% 88.98%, 9.51% 99.26%, 82.68% 99.34%, 94.39% 87.83%, 99.27% 71.05%, 97.32% 38.82%, 97.32% 17.27%, 84.15% 11.35%, 78.78% 2.63%, 57.80% 0.82%);
}
.image-envoypathfinder {
  width: 400px;
  shape-outside: polygon(58.00% -0.34%, 72.75% 15.67%, 80.00% 32.88%, 83.00% 46.85%, 90.25% 57.92%, 95.75% 64.23%, 82.00% 72.49%, 71.50% 90.89%, 71.00% 99.66%, 33.00% 99.75%, 18.50% 94.38%, 18.00% 88.25%, 21.25% 79.39%, 25.25% 66.44%, 25.25% 54.69%, 20.50% 47.02%, 18.25% 40.21%, 12.75% 35.27%, 13.25% 25.55%, 32.25% 11.93%, 46.00% -0.51%);
}
.image-pzopfs-the-waterfall {
  width: 410px;
  shape-outside: polygon(36.83% 0.22%, 33.41% 10.52%, 33.41% 19.10%, 30.98% 32.19%, 24.39% 50.43%, 15.37% 61.59%, 3.17% 66.95%, 0.49% 72.75%, 0.98% 89.81%, 17.56% 99.04%, 79.02% 99.47%, 97.80% 89.70%, 99.27% 79.83%, 99.51% 69.74%, 87.07% 59.01%, 73.66% 41.63%, 61.71% 23.61%, 59.27% 13.52%, 55.12% 3.01%, 49.76% -0.86%);
}
.image-pzopfs-robber {
  width: 265px;
  shape-outside: polygon(27.36% 3.59%, 12.64% 12.82%, 6.23% 26.41%, 7.36% 50.77%, 7.74% 61.03%, -0.57% 67.69%, 0.57% 88.72%, 29.62% 98.98%, 64.72% 100.00%, 87.36% 79.75%, 97.55% 57.69%, 99.43% 37.69%, 80.57% 18.72%, 67.36% 1.54%, 47.36% 0.00%);
}
.image-pzopfs-selenlin {
  width: 260px;
  shape-outside: polygon(-1.15% 1.67%, 0.77% 18.70%, 2.69% 26.88%, 5.77% 36.06%, 15.38% 43.07%, 21.54% 56.93%, 21.15% 66.28%, 19.62% 75.29%, 11.92% 84.31%, 25.38% 97.33%, 34.62% 101.25%, 72.31% 100.84%, 86.15% 91.65%, 86.54% 79.97%, 86.15% 41.24%, 100.77% 31.72%, 96.54% 26.04%, 81.92% 17.86%, 74.23% 5.01%, 67.69% 1.00%, 36.15% 3.34%, 28.46% 6.01%, 19.23% 0.50%);
}
.image-pzopfs-gedun {
  width: 205px;
  shape-outside: polygon(19.27% 2.81%, 9.02% 17.60%, 12.93% 32.91%, 5.12% 48.73%, -0.24% 51.79%, 4.15% 64.93%, 13.41% 84.82%, 13.90% 97.58%, 71.95% 98.34%, 99.27% 91.20%, 97.80% 75.13%, 94.39% 63.39%, 80.24% 52.17%, 87.07% 37.63%, 92.93% 21.94%, 88.05% 4.85%, 59.27% -1.53%);
}
.image-pzopfs-yeyacha {
  width: 230px;
  shape-outside: polygon(26.09% 5.17%, 12.17% 20.04%, 14.78% 42.67%, 24.35% 53.45%, 13.48% 61.21%, 3.91% 66.17%, -0.43% 68.97%, 0.43% 80.17%, 13.48% 87.29%, 23.91% 99.36%, 76.09% 98.71%, 75.65% 87.82%, 91.30% 78.77%, 97.83% 65.63%, 99.13% 54.42%, 80.87% 43.86%, 85.65% 29.85%, 83.91% 10.78%, 59.13% 0.65%, 39.57% 0.43%);
}
.image-elemental-wisp-fire {
  width: 230px;
  shape-outside: polygon(73.91% 0.49%, 93.48% 8.34%, 97.83% 20.59%, 93.48% 37.01%, 70.87% 48.53%, 69.57% 55.39%, 85.65% 62.01%, 94.78% 69.12%, 96.52% 79.66%, 90.87% 88.85%, 84.35% 95.96%, 76.09% 98.90%, 22.17% 98.16%, 8.70% 86.89%, 1.30% 61.64%, -0.43% 33.34%, 2.17% 21.57%, 8.70% 5.39%, 29.13% 0.49%);
}
.image-pzopfs-babybrineshark {
  width: 370px;
  shape-outside: polygon(53.24% 1.00%, 57.57% 7.18%, 83.78% 8.90%, 96.49% 18.52%, 99.46% 27.11%, 86.76% 53.57%, 75.41% 63.20%, 79.19% 74.54%, 76.76% 98.25%, 24.05% 97.22%, 21.08% 84.84%, 13.78% 70.41%, 0.81% 48.76%, 0.81% 27.11%, 10.81% 17.15%, 17.84% 21.27%, 40.27% 9.24%, 44.05% -0.03%);
}
.image-table a {
    font-family: GoodOT-Bold;
    text-transform: uppercase;
    color: var(--yue-orange);
}

.image-table tr {
    border-bottom: 2px solid var(--yue-teal);
}

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