:root{
    --readaloud-color: #7e1716;
}

.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-light-blue: #144c6f;
    --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));
}


/*Old fonts*/

@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: "Auriol LT Std";
    src: url("https://content.demiplane.com/fonts/AuriolLTStd.otf") format("opentype");
}

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

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


.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;
    aspect-ratio: 15/5;
    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;
}

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);
    color: var(--yue-light-blue);
    text-transform: none;
}

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

.challenge-margin {
    margin-left: 1em;
}

.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-pzocanayvenheidmarch {
    position: relative;
    left: 40px;
}

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

.image-pzo-taunting-skull {
    margin-right: 8px;
}
/*Image Wizard Styles*/
.image-eandokline {
  width: 380px;
  shape-outside: polygon(41.32% -0.81%, 37.89% 5.99%, 36.32% 13.50%, 29.47% 21.91%, 13.95% 22.63%, 6.32% 21.73%, 3.42% 27.46%, 13.68% 38.37%, 15.26% 47.31%, 16.05% 56.97%, 20.53% 65.74%, 31.58% 70.93%, 35.53% 79.33%, 28.68% 89.17%, 26.58% 98.36%, 79.47% 98.89%, 84.74% 87.44%, 89.21% 52.92%, 84.74% 20.30%, 62.89% 5.09%, 55.53% 0.09%);
}

.image-marcon-tlnol {
  width: 340px;
  shape-outside: polygon(83.82% 3.90%, 90.59% 9.71%, 90.00% 18.27%, 85.59% 26.22%, 89.71% 37.69%, 80.59% 46.25%, 85.88% 58.64%, 76.18% 72.86%, 80.59% 82.79%, 78.82% 93.65%, 80.00% 98.39%, 17.65% 99.10%, 20.00% 81.62%, 8.53% 54.25%, -0.29% 45.84%, 2.35% 34.38%, 16.47% 15.21%, 52.65% 3.44%, 75.29% 2.67%);
}
.image-talawei {
  width: 360px;
  shape-outside: polygon(41.94% 0.40%, 36.39% 8.51%, 37.50% 12.56%, 26.94% 15.96%, 15.56% 20.34%, 6.94% 25.52%, 6.39% 32.49%, 18.33% 46.11%, 20.28% 56.70%, 14.72% 72.74%, 8.89% 91.54%, 14.17% 97.21%, 44.72% 98.84%, 70.83% 98.35%, 98.61% 64.48%, 89.17% 44.05%, 73.33% 7.21%, 55.28% -0.57%);
}
.image-talawei > p {
  left: 190px;
  top: 485.4791564941406px;
}
.image-mayor-arlandrie-tecarasta {
  width: 350px;
  shape-outside: polygon(53.14% 1.71%, 67.43% 8.27%, 71.71% 19.74%, 66.00% 36.14%, 68.00% 45.56%, 79.71% 50.48%, 90.57% 54.37%, 97.71% 60.93%, 98.57% 79.37%, 86.57% 88.60%, 84.86% 97.82%, 10.29% 98.02%, 3.14% 76.91%, 1.14% 37.16%, 7.43% 7.04%, 34.00% 1.71%, 48.29% 0.48%);
}
.image-dead-doug {
  width: 350px;
  shape-outside: polygon(12.00% 8.77%, 13.71% 18.93%, 8.00% 27.01%, 2.29% 35.79%, 5.43% 47.34%, 16.57% 57.73%, 26.86% 60.50%, 24.29% 71.82%, 23.43% 86.14%, 27.43% 97.91%, 80.57% 97.45%, 98.00% 89.14%, 97.14% 67.20%, 78.00% 50.80%, 72.57% 22.39%, 49.14% 0.22%, 38.57% 0.69%, 28.00% 2.53%, 22.86% 8.08%, 15.14% 6.92%);
}
.image-lord-walsam {
  width: 360px;
  shape-outside: polygon(10.83% 10.16%, 11.39% 18.83%, 4.72% 21.36%, 6.67% 28.76%, 13.06% 32.15%, 10.56% 39.33%, 13.61% 47.16%, 12.78% 61.53%, 16.94% 74.64%, 13.33% 91.13%, 21.94% 98.11%, 80.00% 97.47%, 93.61% 84.37%, 99.72% 79.72%, 98.33% 64.70%, 92.22% 51.39%, 75.83% 47.37%, 73.61% 27.50%, 63.33% 14.81%, 61.39% 3.82%, 24.17% 1.28%, 13.61% 6.99%);
}
.image-barnacie-barnaby {
  width: 445px;
  shape-outside: polygon(53.60% 1.53%, 55.17% 5.68%, 48.20% 10.56%, 42.81% 17.78%, 34.27% 23.73%, 25.51% 26.26%, 24.16% 36.37%, 19.66% 41.78%, 18.31% 48.46%, 18.99% 51.53%, 7.98% 52.97%, 3.26% 53.16%, 4.16% 61.64%, 9.10% 70.30%, 10.67% 78.43%, 22.81% 75.54%, 28.65% 79.69%, 23.93% 95.39%, 30.00% 99.18%, 69.55% 98.52%, 85.51% 89.50%, 91.35% 62.42%, 95.17% 34.98%, 98.31% 16.87%, 91.57% 1.53%, 70.67% 0.45%);
}
.image-arodenite-priest {
  width: 295px;
  shape-outside: polygon(25.93% 1.50%, 2.88% 27.70%, 2.20% 33.41%, 19.83% 89.02%, 21.86% 99.02%, 81.86% 99.34%, 97.80% 34.41%, 97.80% 28.17%, 71.02% 1.03%);
}
.image-pzo-taunting-skull {
  width: 335px;
  shape-outside: polygon(51.49% 0.62%, 71.79% 7.24%, 79.85% 20.48%, 85.82% 35.18%, 95.37% 43.02%, 101.94% 54.05%, 106.42% 63.61%, 102.24% 83.22%, 83.13% 88.86%, 75.07% 95.97%, 74.18% 99.40%, 27.61% 98.91%, 9.40% 82.73%, 0.15% 69.25%, 0.15% 26.60%, 17.46% 6.26%, 42.84% 1.36%);
}
.image-pzo-arboreal-snag {
  width: 395px;
  shape-outside: polygon(17.09% 23.99%, 23.42% 32.39%, 19.37% 42.42%, 23.67% 53.92%, 17.09% 68.70%, 16.58% 76.36%, 10.00% 80.93%, 3.16% 85.31%, 16.58% 98.08%, 75.82% 99.54%, 98.10% 90.29%, 98.10% 77.52%, 83.16% 70.40%, 75.57% 52.16%, 79.62% 21.50%, 76.08% 12.92%, 68.23% 4.10%, 49.49% 0.63%, 33.29% 8.48%, 20.13% 15.78%);
}
.image-pzo-zombiehuskzombie {
  width: 400px;
  shape-outside: polygon(39.25% 2.72%, 49.25% 4.38%, 54.00% 10.33%, 55.00% 17.93%, 72.50% 27.52%, 87.00% 22.56%, 94.25% 21.90%, 95.50% 29.50%, 79.25% 46.86%, 68.00% 55.95%, 63.25% 72.04%, 59.25% 84.60%, 71.50% 88.56%, 71.25% 99.31%, 19.00% 99.97%, 12.50% 73.69%, 10.75% 53.36%, 7.75% 42.28%, 19.00% 16.28%, 30.00% 10.99%);
}
.image-ghessa {
  width: 410px;
  shape-outside: polygon(62.44% 0.09%, 64.39% 6.44%, 72.20% 8.39%, 74.88% 16.44%, 83.66% 23.26%, 84.63% 32.78%, 90.24% 39.61%, 94.15% 51.31%, 89.02% 81.56%, 80.98% 88.87%, 65.85% 88.14%, 62.93% 97.90%, 31.22% 98.14%, 27.80% 88.63%, 8.54% 87.17%, 2.68% 77.90%, 5.85% 58.14%, 20.73% 32.05%, 19.27% 6.92%, 29.51% 0.09%, 54.15% -0.15%);
}
.image-pzo-risen-petdog {
  width: 355px;
  shape-outside: polygon(10.85% 5.46%, 6.34% 18.73%, 16.48% 28.02%, 17.04% 43.51%, 11.41% 52.14%, 2.68% 69.62%, 8.87% 80.68%, 26.34% 87.32%, 24.65% 98.38%, 82.96% 98.16%, 93.94% 82.23%, 88.59% 58.55%, 95.07% 25.15%, 81.83% 8.78%, 60.70% 11.87%, 49.15% 18.51%, 20.70% 3.02%, 15.63% 2.14%);
}
.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;
}