:root{
    --readaloud-color: #7e1716;
    --sa-blue: #00093B;
    --sa-red: #CB4A49;
    --sa-pink: rgb(231, 172, 160);
    
    --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-face {
    font-family: "Barchella Drumal";
    src: url("https://content.demiplane.com/fonts/Barchella_Drumal.otf") format("opentype");
}

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

@font-face {
    font-family: "Sabon LT Std";
    font-weight: bold;
    src: url("https://content.demiplane.com/fonts/Sabon+LT+Std+Bold.otf") format("opentype");
}


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

.book-styled-block {
    background: #FDFDFD;
    border: 13px solid;
    border-image-source: url("https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/seventh-arch-border.png");
    border-image-slice: 13;
    
    padding: 24px 16px 8px 16px;
    background-color: rgb(234, 218, 190);
    color: var(--sa-blue);
}

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

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

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

.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: "Barchella Drumal";
    font-weight: bold;
    color: var(--sa-blue);
    font-size: var(--font-size-7);
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background-image: url('https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/seventh-arch-header-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 51/11;
    margin-top: -16px;
    border: 13px solid;
    border-image-source: url("https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/seventh-arch-border.png");
    border-image-slice: 13;
    padding: var(--font-size-1);
}

h1 > span {
    font-size: var(--font-size-6);
    margin-bottom: 4px;
}

.main-holder > h2 {
    font-family: Galliard STD;
    font-weight: bold;
    color: var(--sa-blue);
    text-transform: none;
    font-size: var(--font-size-3);
}

.main-holder > h3 {
    font-family: Good OT;
    font-weight: bold;
    font-size: var(--font-size-2);
    color: var(--sa-red);
}

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

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

.standard-table {
    font-family: Good OT !important;
}

.standard-table td {
    font-family: Good OT !important;
}

.standard-table p {
    font-family: Good OT !important;
}

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

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

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

.sidebar > h5 {
    color: var(--sa-blue);
    font-size: var(--font-size-2);
}

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




.adv-track {
    margin-bottom: 16px;
    text-align: center;
    position: relative;
    padding-top: 32px;
    padding: 32px 16px 32px 16px;
    background-image: url("https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/sa-adv-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    border: 13px solid;
    border-image-source: url("https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/seventh-arch-border.png");
    border-image-slice: 13;
}

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

.adv-track p {
    margin-top: 8px;
}

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

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

.main-holder .adv-track .adv-level {
    text-align: center;
    font-family: Barchella Drumal;
    font-size: var(--font-size-8);
    color: var(--sa-blue);
}

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

.centered-block {
    background-color: var(--sa-pink);
    padding: 16px 32px 16px 32px;
    color: var(--sa-blue);
}

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

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

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



p {
    font-family: Sabon LT STD;
    font-size: var(--font-size-1);
    line-height: var(--font-size-2);
}

p strong {
    font-family: Good Ot;
}


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

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

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

.image-so > p {
    position: relative;
    width: fit-content;
    height: 29px;
    font-family: Galliard Std;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    padding: 4px 8px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    background-image: url("https://content.demiplane.com/compendium/pathfinder-2e/gatewalkers-the-seventh-arch/css/sa-subtitle-background-1.png");
    background-size: 1350px 29px;
    background-repeat: no-repeat;
    z-index: 1001;
}


.image-report-1 {
    width: 330px;
    shape-outside: polygon(51.30% 0.67%, 81.14% 13.85%, 82.54% 21.42%, 89.45% 38.6%, 84.36% 50%, 87.05% 62.37%, 79.63% 76.62%, 75.83% 91.91%, 0.94% 91.35%, -0.22% 0.94%);
}

.image-report-2 {
    width: 340px;
    shape-outside: polygon(9.89% 53.33%, 12.4% 33.55%, 2.26% 18.2%, 5.5% 8.67%, 15.06% 8.14%, 19.16% 0.23%, 98.22% 0.47%, 100.34% 96.83%, 33.62% 96.84%, 27.95% 68.19%);
}

.image-etward {
    width: 345px;
    shape-outside: polygon(15.45% 53.33%, 21.84% 48.26%, 20.87% 41.68%, 29.67% 27.77%, 29.5% 11.24%, 36.94% 1.26%, 98.22% 0.47%, 96.60% 83.04%, 31.06% 83.03%, 22.6% 78.04%);
}

.image-etward p {
    bottom: 40px;
}

.image-fianara {
    width: 345px;
    shape-outside: polygon(17.84% 44.51%, 6.19% 29.68%, 6.55% 23.1%, 16.94% 25.33%, 29.23% 9.36%, 36.67% 3.89%, 97.42% 4.22%, 98.71% 91.06%, 35.57% 91.12%, 6.95% 83.04%);
}

.image-fianara p {
    margin: 0;
    bottom: 60px;
    left: 80px;
}

.image-lemma {
    width: 280px;
    shape-outside: polygon(76.03% 51.56%, 85.62% 59.12%, 92.98% 69.71%, 74.54% 82.09%, 3.22% 81.72%, 2.65% 5.05%, 39.57% 4.01%, 53.94% 6.05%, 65.03% 28.78%, 74.46% 39.62%);
}

.image-lemma p {
    bottom: 40px;
}

.image-unicorn {
    width: 340px;
    shape-outside: polygon(29.43% 74.55%, 29.36% 59.34%, 12% 58.76%, 10.32% 31.46%, 13.37% 18.62%, 26.46% 4.26%, 99.3% 3.93%, 95.75% 81.11%, 8.89% 81.07%, 5.22% 74.9%);
}

.image-unicorn p {
    bottom: 100px;
}

.image-rifon {
    width: 330px;
    shape-outside: polygon(10.75% 51.19%, 19.63% 34.99%, 8.44% 24.75%, 16.4% 18.62%, 31.16% 19.32%, 46.06% 2.33%, 98.22% 0.47%, 98.40% 87.61%, 34.26% 87.26%, 5.22% 74.39%);
}

.image-rifon p {
    bottom: 100px;
}


.image-dream-spider {
    width: 335px;
    shape-outside: polygon(84.93% 82.85%, 18.03% 82.52%, 11.6% 76.84%, 12.24% 18.3%, 18.06% 8.53%, 26.58% 8.25%, 96.59% 4.53%, 91.33% 70.78%, 91.3% 76.35%, 90.1% 82.44%);
}

.image-dream-spider p {
    bottom: 75px;
}

.image-bolan {
    width: 320px;
    shape-outside: polygon(7.78% 60.6%, 22.97% 52.14%, 33.37% 54.05%, 19.16% 38.19%, 22.12% 18.52%, 35.8% 4.9%, 97.37% 4.59%, 98.93% 81.76%, 26.14% 81.98%, 5.23% 78.81%);
}

.image-bolan p {
    bottom: 60px;
}

.image-abelina {
    width: 300px;
    shape-outside: polygon(9.89% 4.78%, 76.28% 5.5%, 83.06% 12.01%, 65.55% 25.19%, 73.33% 47.33%, 92.73% 60.47%, 90.43% 74.17%, 69.41% 78.45%, 69.21% 84.52%, 7.94% 83.66%);
}

.image-abelina p {
    bottom: 30px;
}

.image-thinlands {
    width: 355px;
    shape-outside: polygon(6.49% 31.52%, 12.63% 10.81%, 51.2% 3.16%, 74.2% 6.43%, 93.44% 11.63%, 89.03% 53.5%, 82.38% 69.45%, 64.56% 80.23%, 49.4% 81.98%, 8.33% 80.91%);
}

.image-thinlands p {
    bottom: 104px;
}

.image-salah {
    width: 390px;
    shape-outside: polygon(39.19% 47.26%, 4.34% 11.76%, 46.93% 36.35%, 35.81% 8.71%, 56.71% 4.61%, 91.4% 5.72%, 90.67% 84.05%, 53.66% 84.21%, 36.84% 80.09%, 13.07% 79.01%);
}

.image-salah p {
    bottom: 104px;
}

.image-hubert {
    width: 310px;
    shape-outside: polygon(21.93% 61.28%, 13.12% 57.52%, 24.71% 43.36%, 17.38% 40.25%, 16.95% 5.39%, 91.4% 6.11%, 88.62% 82.3%, 48.69% 82.06%, 18.13% 74.45%, 29.16% 68.3%);
}

.image-hubert p {
    bottom: 104px;
}

.image-alleli {
    width: 330px;
    shape-outside: polygon(73.86% 40.52%, 77.48% 45.2%, 76.10% 71.09%, 42.79% 91.17%, 1.48% 91.34%, 32.01% 3.35%, 45.8% 19.38%, 90.68% 15.9%, 87.47% 26.77%, 79.99% 29.38%);
}

.image-alleli p {
    margin: 0;
    bottom: 104px;
    left: 88px;
}

.image-jenthiel {
    width: 315px;
    shape-outside: polygon(5.27% 83.9%, 6.01% 61.57%, 14.14% 54.98%, 27.8% 43.14%, 32.9% 29.39%, 27.4% 12.9%, 34.57% 13.65%, 44.00% 3.34%, 92.37% 3.3%, 92.67% 85.33%);
}

.image-jenthiel p {
    bottom: 40px;
}

.image-caulborn {
    width: 355px;
    shape-outside: polygon(5.27% 83.03%, 4.46% 4.23%, 51.09% 3.91%, 63.46% 13.29%, 75.79% 37.18%, 90.71% 41.68%, 96.33% 55.84%, 87.67% 67.39%, 64.99% 67.14%, 65.02% 82.3%);
}

.image-caulborn p {
    bottom: 80px;
}

.image-iskariel {
    width: 300px;
    shape-outside: polygon(38.41% 84.81%, 37.59% 76.82%, 22.48% 68.94%, 11.96% 55.16%, 16.75% 39.19%, 7.27% 19.19%, 17.42% 21.99%, 38.88% 4.16%, 93.3% 4.79%, 87.00% 84.52%);
}

.image-iskariel p {
    bottom: 40px;
}

.image-seasons {
    width: 405px;
    shape-outside: polygon(5.69% 80.28%, 6.01% 74.66%, 3.26% 70.02%, 11.73% 45.02%, 11.26% 37.68%, 9.1% 33.86%, 24.06% 15.52%, 43.69% 5.45%, 96.5% 6.09%, 95.70% 80.63%);
}

.image-seasons p {
    bottom: 72px;
}

.image-kappas {
    width: 335px;
    shape-outside: polygon(4.87% 84.16%, 6% 3.84%, 44.41% 4.01%, 50.13% 14.74%, 79.29% 14.74%, 93.75% 27.08%, 96.81% 34.72%, 85.67% 41.62%, 84.27% 56.38%, 66.3% 61.66%, 72.52% 78.2%, 63% 84.88%);
}

.image-kappas p {
    bottom: 80px;
}


.image-drake {
    width: 355px;
    shape-outside: polygon(12.66% 84.25%, 11.95% 70.86%, 5.06% 66.77%, 20.78% 59.85%, 10.75% 49.08%, 22.02% 39.83%, 13.21% 31.98%, 3.12% 5.81%, 96.5% 6.09%, 94.67% 84.43%);
}

.image-drake p {
    bottom: 80px;
}

.image-wight {
    width: 360px;
    shape-outside: polygon(14.72% 84.78%, 12.99% 52.82%, 4.28% 41.54%, 17.42% 33.4%, 27.28% 33.49%, 38.81% 23.54%, 24.58% 11.48%, 34.64% 4.06%, 97.02% 4.69%, 94.67% 84.43%);
}

.image-wight p {
    bottom: 80px;
}


.image-moldblazer {
    width: 335px;
    shape-outside: polygon(3.27% 80.18%, 3.46% 5.41%, 64.78% 5.42%, 78.72% 12%, 91.59% 24.74%, 95.76% 49.32%, 89.7% 63.95%, 81.78% 71.5%, 72.22% 77.19%, 63.34% 80.98%);
}

.image-moldblazer p {
    bottom: 64px;
}

.image-archer {
    width: 335px;
    shape-outside: polygon(34.34% 83.08%, 24.71% 78.69%, 35.34% 67.21%, 17.96% 54.18%, 4.66% 38.58%, 7.74% 29.06%, 13.41% 10.21%, 21.28% 5.55%, 97.29% 6.6%, 94.67% 83.79%);
}

.image-archer p {
    bottom: 80px;
}


.image-sage {
    width: 335px;
    shape-outside:   polygon(-0.27% 90.09%, 48.14% 3.06%, 58.8% 5.93%, 79.28% 6.13%, 92.4% 13.22%, 92.48% 25.92%, 83.43% 26.64%, 69.24% 45.98%, 75.22% 75.58%, 82.68% 90.62%);
}

.image-sage p {
    margin: 0;
    left: 136px;
    bottom: 104px;
}

.image-warrior {
    width: 345px;
    shape-outside: polygon(24.8% 89.24%, 25.19% 66.73%, 30.26% 53.31%, 5.22% 52.66%, 10.84% 42.76%, 22.1% 29.43%, 14.23% 11.3%, 37.82% 5.49%, 97.02% 4.69%, 92.81% 89.07%);
}

.image-warrior p {
    margin: 0;
    bottom: 144px;
    left: 88px;
}


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


@media only screen and (max-width: 600px){
    .book-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;
    }
    
    .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;
  }
}