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

@font-face {
    font-family: Roundest;
    src: url("https://content.demiplane.com/fonts/Roundest+Bold.TTF") format("truetype");
    } 
    
   @font-face {
    font-family: GoodOT;
    src: url("https://content.demiplane.com/fonts/GoodOT.otf") format("opentype");
    } 
    
    @font-face {
    font-family: GoodOT CondBold;
    src: url("https://content.demiplane.com/fonts/GoodOT-CondBold.otf") format("opentype");
    }  
    
     @font-face {
    font-family: Basing;
    src: url("https://content.demiplane.com/fonts/Basing-Regular Font.otf") format("opentype");
    }   
    
     @font-face {
    font-family: Quikhand;
    src: url("https://content.demiplane.com/fonts/Quikhand.otf") format("opentype");
    }  
    
    @font-face {
    font-family: Brush Script;
    src: url("https://content.demiplane.com/fonts/Brush+Script.ttf") format("truetype");
    } 


.book-styled-block {
    background: transparent;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/Sidebar.png);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px 75px 65px 85px;
    color: #315029;
    font-family: GoodOT;
}

.book-styled-block h5 {
    color: #315029;
    font-family: Roundest;
}

.book-styled-block::before {
    content: "";
    display: block;
    width: 125%;
    position: relative;
    background-size: calc(100%);
    margin: -60px -65px;
    height: 150px;
    top: 25px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/floral-top.png);
    background-position: top;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 800px) {
  .book-styled-block::before {
      width: 900px;
  height: 200px;
  margin-left: -30vw;
  margin-top: -12vw;
  }
}

.main-holder > .split-header {
    font-size: 24px;
    font-weight: normal;
    color: #8a9043;
    font-family: gin, serif;
    border-bottom: 1px solid;
}

.main-holder > h2 {
    font-family: Roundest;
    color: #315029;
}

.main-holder > h5 {
    color: #315029;
    font-size: 20px;
    font-family: Roundest;
}

.main-holder > h3 {
    color: #8a9043;
}

.main-holder > h4 {
    color: #8a9043;
    font-family: GoodOT CondBold;
    text-transform: none;
}

.main-holder > h1 {
    font-family: Roundest;
    color: #315029;
}

.intro-styled-block {
    background: #315029;
    color: #fff;
    padding: 50px;
    font-family: Roundest;
    position: relative;
    top: -10px;
    justify-content: center;
    text-align: center;
}

.intro-styled-block h5 {
    color: #fff;
    font-family: Roundest;
    font-size: 40px;
    text-align: center;
}

.intro-styled-block::before {
    content: "";
    display: block;
    width: 114%;
    margin: -65px -50px -80px;
    position: relative;
    background-size: calc(120%);
    height: 175px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/floral-top.png);
    background-position: top left;
    background-repeat: no-repeat;
    justify-content: center;
    z-index: 1;
}

@media screen and (max-width: 810px) {
  .intro-styled-block::before {
    width: 900px;
  margin: -65px -100px -120px;
  background-size: calc(100%);
  height: 160px;
  }
}

.intro-styled-block::after {
    content: "";
    display: block;
    width: 114%;
    margin: -65px -50px -70px;
    position: relative;
    background-size: calc(120%);
    height: 160px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/floral-bottom.png);
    background-position: bottom right;
    background-repeat: no-repeat;
}

@media screen and (max-width: 810px) {
.intro-styled-block::after {
  width: 900px;
  margin: -95px -80px -140px;
  background-size: calc(132%);
  height: 203px;
  top: -70px;
  background-position: bottom center;
}
}

.chapter-part {
    color: #fff;
    font-family: Roundest;
    font-size: 25px;
}

.part-title {
    color: #fff;
    font-family: Roundest;
    font-size: 45px;
}

.km-header {
    color: #fff !important;
    font-family: Roundest !important;
    text-align: center;
    background-color: #315029;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 40px !important;
}

.km-header::before {
    content: "";
    display: flex;
    width: 110%;
    position: relative;
    background-size: calc(100% - 0px);
    margin: -60px -40px;
    height: 150px;
    top: 25px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/divider-top.png);
    background-position: top;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 810px) {
  .km-header::before {
  display: block;
  width: 150vw;
  margin: -60px -100px;
  background-position: center top;
  }
}

.km-header::after {
    content: "";
    display: flex;
    width: 110%;
    position: relative;
    background-size: calc(100% - 0px);
    margin: -65px -35px;
    height: 150px;
    top: -30px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/divider-bottom.png);
    background-position: top;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 810px) {
  .km-header::after {
    display: block;
  width: 150vw;
  margin: -60px -230px;
  background-position: bottom;
  top: -25px;
  }
}

.km-nostalgia-box {
    color: #fff;
    background-color: #315029;
    padding: 60px;
    padding-bottom: 10px;
    border-radius: 90px 90px 0px 0px;
    margin-bottom: 40px;
    margin-top: 40px;
    font-family: GoodOT;
}

.km-nostalgia-box > h5 {
    color: #fff;
    font-family: Roundest;
    font-size: 25px;
}

.km-nostalgia-box strong {
    color: #fff;
}

.km-nostalgia-box::before {
    content: "";
    display: block;
    width: 125%;
    position: relative;
    background-size: calc(100% - 0px);
    margin: -80px -95px;
    height: 150px;
    top: 10px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/divider-top.png);
    background-position: top;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 810px) {
  .km-nostalgia-box::before {
width: 850px;
  margin: -80px -130px -120px;
  background-size: calc(100%);
  height: 180px;
  }
}

.km-table th {
    background-color: #315029 !important;
}

.km-table {
    text-align: left;
}

.km-table tbody {
    color: #3f6735 !important;
}

.km-table td {
    border-right: 1px solid #315029;
}

.km-table .km-final-col {
    text-align: center;
    border-right: 0px solid;
}

.km-table .km-no-border {
    border-right: 0px solid;
}

.km-table .small-field {
    text-align: center;
}

.hexland th {
    background-color: #d5c58c;
    color: #000;
}

.km-chapter-intro {
    color: #315029;
    font-family: GoodOT;
    text-align: center;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/Sidebar.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 70px 50px 60px 50px;
    margin-top: 100px;
    margin-bottom: 30px;
}

.km-chapter-header {
    font-family: Roundest !important;
    color: #315029 !important;
    font-size: 50px;
    margin-bottom: 30px;
}

@media screen and (max-width: 810px) {
  .km-chapter-header  {
font-size: 35px;
  }
}

.km-chapter-number {
    font-size: 30px;
}

.km-chapter-author {
    font-size: 14px;
    display: block;
    padding: 0 60px 0;
}

.km-chapter-intro::before {
    content: "";
    display: block;
    width: 125%;
    position: relative;
    background-size: calc(100% - 0px);
    margin: -80px -95px;
    height: 150px;
    top: 10px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/divider-top.png);
    background-position: top center;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 800px) {
  .km-chapter-intro::before {
    display: block;
  width: 1000px;
  margin: -80px -200px;
  background-position: center top;
  }
}

.km-chapter-intro::after {
    content: "";
    display: block;
    width: 125%;
    position: relative;
    background-size: calc(100% - 0px);
    margin: -60px -75px;
    height: 150px;
    top: 0px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/divider-bottom.png);
    background-position: top center;
    background-repeat: no-repeat;
    justify-content: center;
}

@media screen and (max-width: 800px) {
  .km-chapter-intro::after {
display: block;
  width: 1000px;
  margin: -65px -200px;
  background-position: center bottom;
  top: 0;
  }
}

.advancement {
    text-align: left;
    padding: 0px 70px 0px 70px;
}

.adv-header {
 font-family: roundest;
    color: #315029;
    font-size: 25px;
    margin-bottom: -10px;   
}

.chapter-crown {
    width: 210px;
    position: relative;
    top: -170px;
    margin-bottom: -150px;
}

.intro-body {
    text-align: left;
    padding: 0px 10px 0px 20px;
}

.image-with-subtitle-right, .image-with-subtitle-left p {
    font-family: Roundest;
    text-transform: uppercase;
    color: #315029;
}

.km-handout-container {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/sidebar_1.png);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px;
}

@media screen and (max-width: 800px) {
  .km-handout-container {
   padding: 10px;
  }
}

.handout5, .handout6 {
    font-family: Quikhand;
    font-size: 30px;
    color: #000;
}

.handout5, .handout6 p {
    margin-bottom: -10px;
}

.handout7, .handout8 {
    font-family: Basing;
    font-size: 30px;
    color: #315029;
}

.handout62 {
    font-family: Brush Script;
    font-size: 30px;
    color: #000;
}

.handout62::first-letter {
    font-size: 60px;
}

.kmchandout1 {
    font-family: Quikhand;
    font-size: 30px;
    color: #000;
}

.kmchandout2 {
    font-family: Basing;
    font-size: 20px;
    color: #000;
    font-variant: small-caps;
    font-weight: 600;
}

.km-handout-border {
    padding: 25px;
    border: 3px double #550b06;
    border-radius: 12px;
}

@media screen and (max-width: 800px) {
  .km-handout-border{
   padding: 0px;
  }
}

.km-handout-red {
    background: #550b06;
    border-radius: 1px;
    padding: 50px;
    color: #d5c58c;
    font-family: GoodOT;
    margin: 50px 10px 30px;
}

@media screen and (max-width: 800px) {
  .km-handout-red{
    border-radius: 1px;
    padding: 8px;
    margin: 10px;
  }
}


.km-handout-red p {
    margin: -50px 0 -60px;
    font-family: Basing;
    font-size: 25px;
    letter-spacing: 1px;
    text-align: center;
}

@media screen and (max-width: 800px) {
  .km-handout-red p {
  font-size: 20px;
  margin: 5px;
  }
}

.km-handout-red::before {
    content: "";
    display: block;
    width: auto;
    position: relative;
    background-size: calc(100% - 1px);
    height: 50px;
    top: -85px;
    margin: 0 -54px 30px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/handout-top.png);
    background-position: top left;
    background-repeat: no-repeat;
}

@media screen and (max-width: 800px) {
  .km-handout-red::before{
  display: none;
  }
}

.km-handout-red::after {
    content: "";
    display: block;
    width: auto;
    position: relative;
    background-size: calc(100% - -2px);
    height: 50px;
    top: 95px;
    margin: 0 -53px 10px;
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/kingmaker-adventure-path/css/handout-bottom.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}

@media screen and (max-width: 800px) {
  .km-handout-red::after {
  display: none;
  }
}

.km-handout-first {
    font-size: 60px;
}

@media screen and (max-width: 800px) {
  .km-handout-first {
  font-size: 30px;
  }
}

.signature {
    text-align: right;
}

.result-block {
    background-color: #dcdfc9;
    padding: 5px 20px 5px;
    text-align: center;
    font-family: GoodOT CondBold;
}

.tale-panel {
    align-content: center;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.buildings {
    display: flex;
    text-align: center;
    font-family: GoodOT;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.build-slot {
    width: 200px;
    padding: 25px;
}

.build-two {
    width: 260px;
    padding: 15px;
}

.build-four {
    width: 200px;
    padding: 5px;
}