:root{
    --readaloud-color: #7e1716;
    
    
    --skt-deep-blue: #2D325E;
    --skt-green: #349353;
    --skt-deep-green: #008B49;
    --skt-cream: rgb(241, 210, 159);
    
    
    /*Remove later*/
    --gw-blue: red;
    --gw-red: red;
    --gw-dark-red: red;
    --gw-pink: red;
    
    --sf-green: red;
    --sf-orange: red;
    --sf-teal: red;
    --sf-border: red;
    --sf-white: red;
    --sf-subtitle-border: red;
    --sf-subtitle-background: red;
    /*-------*/
    
    --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: "Nunito";
  src: url("https://content.demiplane.com/fonts/Nunito-Regular.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");
}

@font-face {
    font-family: "Scary Things";
    src: url("https://content.demiplane.com/fonts/ScaryThings-Regular.otf");
}


@font-face {
    font-family: "Belwe Std";
    src: url("https://content.demiplane.com/fonts/BelweStd-Bold+copy.otf");
}



.book-styled-block {
    background-color: var(--skt-cream);

    
    padding-top: var(--font-size-3);
    padding-right: var(--font-size-1);
    padding-bottom: var(--font-size-small-3);
    padding-left: var(--font-size-1);
    
    margin-top: var(--font-size-1);
    margin-bottom: var(--font-size-3);
    color: var(--sf-green);
}

.book-styled-block p {
    font-family: Good OT;
    color: var(--skt-deep-blue);
}

.book-styled-block p strong {
    color: var(--skt-deep-blue);
}

.book-styled-block h5 {
    text-align: center;
    color: var(--skt-deep-blue);
    font-family: Good OT;
    font-weight: bold;
    font-size: var(--font-size-2);
    padding-bottom: var(--font-size-small-3);
}

.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: Scary Things;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--skt-deep-blue);
    font-size: var(--font-size-6);
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background-image: url('https://content.demiplane.com/compendium/pathfinder-2e/sky-kings-tomb-mantle-of-gold/css/skt-background.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    aspect-ratio: 900/223;
    max-width: 100%;
    margin-top: -32px;
    margin-bottom: var(--font-size-3);
    /*padding-bottom: var(--font-size-3);*/
    padding-top: 8%;
    padding-bottom: 5%;
    position: relative;
    z-index: 2000;
}

h1 > span {
    font-size: var(--font-size-2);
}

.main-holder > h2 {
    font-family: Belwe Std;
    font-weight: bold;
    color: var(--skt-deep-blue);
    text-transform: none;
    font-size: var(--font-size-3);
    text-align: center;
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-small-1);
}

.main-holder > h2 strong {
    color: var(--skt-deep-blue); 
}

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

.main-holder > h4 {
    font-family: Good OT;
    font-size: var(--font-size-1);
    color: var(--skt-green);
    margin-top: var(--font-size-5);
    margin-bottom: var(--font-size-small-1);
    
    text-transform: none;
    font-weight: bold;
}

.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 {
    font-family: Good OT;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--skt-green);
}

.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(--skt-deep-blue);
}

.sidebar > h5 {
    color: var(--skt-deep-blue);
    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(--sf-teal);
    border: 4px solid var(--sf-border);
    border-image-slice: 13;
}

.adv-track h4 {
    font-family: Good OT;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: none;
    color: var(--sf-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(--sf-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(--skt-deep-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(--skt-green);
    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;
}

/*.image-so > p {*/
/*    position: relative;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    width: fit-content;*/
/*    height: 28px;*/
/*    font-family: Benguiat Std;*/
/*    font-size: 14px;*/
/*    padding: 2px 8px 0px 8px;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    color: var(--sf-green);*/
/*    z-index: 1001;*/
/*}*/


.image-so > p {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Belwe Std;
    font-size: 14px;
    color: var(--skt-deep-blue);
    width: fit-content;
    
    padding-top: 8px;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    
    background-image: url("https://content.demiplane.com/compendium/pathfinder-2e/sky-kings-tomb-players-guide/css/skt-sub-background.png");
    background-size: auto 100%;
    z-index: 1001;
}



.image-so:after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 28px;
    font-family: Benguiat Std;
    font-size: 14px;
    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;
}



@media only screen and (max-width: 600px){
    .main-holder .book-image-right {
        float: none;
        display: block;
        margin: 0 auto;
    }
    
    .main-holder .force-image-right {
        float: none;
        display: block;
        margin: 0 auto;
    }
    
    .main-holder .image-with-subtitle-right {
        float: none;
        display: block;
        margin: 0 auto;
    }
    
    .main-holder .book-image-left {
        float: none;
        display: block;
        margin: 0 auto;
    }
    
    .main-holder .force-image-left {
        float: none;
        display: block;
        margin: 0 auto;
    }
    
    .main-holder .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;
  }
  
  .main-holder > h1 {
    padding-top: 9%;
}
}


@media only screen and (max-width: 550px) {
  
.main-holder > h1.ch-3 {
    padding-top: 11%;
}
}


@media only screen and (max-width: 450px) {
  
.main-holder > h1.ch-3 {
    padding-top: 16%;
}
}



/*Image Wizard Styles*/
:root {
  --image-wizard-ver: 1;
}
.image-wizard-image {
  position: relative;
}
.image-wizard-image > p {
  position: absolute;
}
.force-image-left {
  float: left;
}
.force-image-right {
  float: right;
}
.book-image-center {
  margin-left: auto;
  margin-right: auto;
}
.image-with-subtitle-center {
  margin-left: auto;
  margin-right: auto;
}

.main-holder .image-0001taargick {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px !important;
  padding-left: 0px;
  width: 100%;
  max-width: 455px;
  shape-outside: polygon(47.14% 5.17%, 97.91% 6.24%, 97.91% 90.02%, 37.91% 95.01%, 29.12% 94.11%, 8.68% 86.98%, 13.74% 81.10%, 27.36% 55.97%, 20.99% 56.68%, 16.59% 55.97%, 12.86% 50.09%, 10.66% 43.31%, 13.52% 32.80%, 30.00% 17.47%, 37.69% 12.30%, 37.91% 8.02%);
}

.image-0001taargick > p {
  left: 36.15%;
  top: 82.00%;
}

.image-0002pzo9316historyclansymbol {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px !important;
  padding-left: 0px;
  width: 260px;
  shape-outside: polygon(29.62% 5.39%, 94.23% 7.70%, 93.08% 92.31%, 69.23% 96.54%, 8.85% 95.78%, 9.23% 79.62%);
}
.image-0002pzo9316historyclansymbol > p {
  left: 13.46%;
  top: 83.08%;
}

.main-holder .image-pzodarkteatime {
    max-width: 395px;
    width: 100%;
}

/*Image Wizard Styles*/
.image-pzolightswentout {
  width: 360px;
  shape-outside: polygon(55.22% 2.77%, 43.27% 8.58%, 41.88% 22.50%, 32.72% 30.62%, 18.83% 35.95%, 7.72% 46.86%, 8.55% 61.24%, 11.05% 83.28%, 22.16% 95.12%, 57.16% 95.81%, 81.60% 86.07%, 95.77% 60.32%, 92.72% 36.88%, 77.44% 28.76%, 75.77% 9.27%);
}
 {
}
.image-pzooillampclock {
  width: 330px;
  shape-outside: polygon(54.48% 4.67%, 48.11% 14.33%, 48.72% 38.60%, 22.36% 36.36%, 19.63% 46.47%, 23.57% 56.58%, 46.60% 72.09%, 42.36% 90.51%, 53.27% 94.56%, 68.72% 93.66%, 72.36% 82.87%, 78.72% 50.29%, 78.72% 39.95%, 63.27% 10.74%);
}
.image-taargick {
  width: 455px;
}
.image-pzohistoryclansymbol {
  width: 260px;
}
.image-pzocollectingundergroundlight {
  width: 315px;
  shape-outside: polygon(39.21% 2.12%, 52.86% 4.75%, 68.10% 15.96%, 73.17% 30.28%, 71.59% 52.00%, 77.62% 54.39%, 81.43% 59.88%, 80.16% 65.85%, 87.46% 68.23%, 97.30% 72.77%, 98.57% 90.43%, 94.76% 93.53%, 50.32% 95.68%, 12.86% 95.20%, -0.16% 91.14%, 0.79% 5.46%);
}
.image-pzodarkteatime {
  width: 395px;
  shape-outside: polygon(28.23% 7.18%, 34.30% 6.16%, 40.38% 8.00%, 46.46% 8.82%, 47.47% 13.51%, 47.97% 21.06%, 54.81% 30.04%, 54.05% 34.12%, 66.71% 46.16%, 68.48% 52.49%, 83.67% 46.98%, 87.22% 49.02%, 86.46% 56.78%, 89.75% 59.84%, 91.77% 62.49%, 96.84% 60.86%, 96.58% 73.71%, 99.87% 80.65%, 97.59% 84.53%, 92.03% 89.43%, 72.78% 93.10%, 46.96% 93.10%, 22.41% 92.90%, 1.90% 86.98%, 0.38% 49.84%, 0.63% 29.84%);
}