:root{
  --readaloud-color: #7e1716;
  
  --base-font: 20px !important;
  --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));

--vtm-cf-clr-white: white;
--vtm-cf-clr-black: black;
--vtm-cf-clr-paper-4-font: #516590;
--vtm-cf-clr-red: #a83235;
}

/*Fonts*/
@font-face {
font-family: "Alana";
src: url("https://content.demiplane.com/fonts/Alana.otf") format("opentype"),
}

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

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

@font-face {
font-family: "Vintage Typewriter";
src: url("https://content.demiplane.com/fonts/VintageTypewriter-Corona.otf") format("opentype"),
}

@font-face {
font-family: "Futura PT Bold";
src: url("https://content.demiplane.com/fonts/Futura+PT+Bold.ttf") format("truetype"),
}

@font-face {
font-family: "Futura PT Book";
src: url("https://content.demiplane.com/fonts/Futura+PT+Book.ttf") format("truetype"),
}

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

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

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

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

@font-face {
font-family: "Hans Hand";
src: url("https://content.demiplane.com/fonts/hanshand-1.TTF") format("truetype"),
}

@font-face {
font-family: "Old Newspaper Types";
src: url("https://content.demiplane.com/fonts/OldNewspaperTypes.ttf") format("truetype"),
}

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

.main-holder {
  position: relative;
}

.main-holder p {
  z-index: 2;
}

.main-holder h1 {
  font-family: Alana;
  font-weight: bold;
  /*font-size: var(--font-size-8);*/
  font-size: min(72px, 9vw);
  line-height: 100%;
  text-transform: none;
  color: var(--vtm-cf-clr-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*height: 300px;*/
  height: min(300px, 37.5vw);
  background-image: url(https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-header-hexagram.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  margin-top: var(--font-size-8);
}

.main-holder h1 span.chapter {
  /*padding-left: 300px;*/
  padding-left: min(300px, 37.5vw);
  font-family: Remington Noiseless;
  text-transform: lowercase;
  /*font-size: var(--font-size-2);*/
  font-size: min(24px, 3vw);
  letter-spacing: 1px;
}

.main-holder h1.one-line {
  /*padding-left: 80px;*/
  padding-left: min(80px, 10vw);
}

.main-holder h1.two-line {
  /*padding-right: 80px;*/
  padding-right: min(80px, 10vw);
  z-index: 2001 !important;
}

.main-holder h1.two-line span.break {
  /*padding-left: 200px;*/
  padding-left: min(200px, 25vw);
}

.main-holder h1.three-line {
  /*padding-right: 80px;*/
  padding-right: min(80px, 10vw);
}

.main-holder h1.three-line span:nth-of-type(2){
  /*padding-left: 160px;*/
  padding-left: min(160px, 20vw);
}

.main-holder h1.three-line span:nth-of-type(3){
  /*padding-left: 250px;*/
  padding-left: min(250px, 31.25vw);
}

.main-holder > .box-sidebar h5 {
    font-family: Gill Sans !important;
    color: white !important;
}

.loresheet-description-block h1 {
  font-family: "Bodoni 72";
  font-weight: bold;
  /*font-size: var(--font-size-8);*/
  font-size: min(72px, 9vw);
  line-height: 100%;
  text-transform: none;
  color: var(--vtm-cf-clr-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*height: 300px;*/
  height: 100%;
  background: none;
  margin-top: 0;
  text-transform: uppercase;
}

.main-holder h2 {
  /*color: var(--vtm-cf-clr-white);*/
  font-size: var(--font-size-5);
}

h2.vtm-npc-header {
background: url(https://content.demiplane.com/compendium/vampire/chicago-by-night/css/cbn-stat-block-header-full-bg.png);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
margin-left: -10px;
font-family: FuturaPT !important;
color: white;
text-transform: uppercase;
font-size: 28px !important;
font-weight: bold;
letter-spacing: 2px;
display: block;
position: relative;
max-width: calc(100% + 10px);
padding-left: 24px !important;
padding: 6px;
text-shadow:
 -2px -2px 0 #000,  
  2px -2px 0 #000,
  -2px 2px 0 #000,
   2px 2px 0 #000;
}

.main-holder h3 {
  font-size: var(--font-size-4);
}

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

.white-block-header {
    font-family: Gill Sans !important;
    color: white !important;
}

.main-holder .ch-image {
  position: relative;
}

.circled-name {
    border: 2px solid var(--vtm-cf-clr-red);
    border-radius: 10px;
    padding: 5px;
}

.main-holder .ch-image:after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 800px;
  height: 200px;
  background: rgb(16, 16, 16);
  background: linear-gradient( 180deg, rgba(16, 16, 16, 0) 25%, rgba(16, 16, 16, 1) 100% );
}

.main-holder .header-ss-tl {
  width: 100%;
  aspect-ratio: 1200 / 800;
  position: absolute;
  z-index: 1;
  
  /*background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(15, 15, 15, 1) 70%), url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/chicago+city+scape+merged+top+left+compressed.webp");*/
  
  
  background: linear-gradient(180deg, rgba(16,16,16,0.352000175070028) 0%, rgba(16,16,16,0.7497592787114846) 31%, rgba(16,16,16,1) 70%), url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/chicago+city+scape+merged+top+left+compressed.webp");
  
  
  background-size: cover; /* or any other value as per your need */
  background-repeat: no-repeat;
  
}

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

.DOTS {
    color: transparent;
    border-bottom: 2px solid #6f4138;
    padding: 0px 10px 0px 10px;
    margin-top: -5px;
}



.main-holder .quote-block {
  text-align: center;
  font-family: "Cormorant Italic" !important;
}

.main-holder .quote-block .author {
  text-align: center;
  font-style: normal;
  font-family: EBGaramond !important;
}

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

.note-block {
  background: #333;
}

.handwriting-block {
  background: #333;
}

.newspaper-block {
  background: #333;
}

.main-holder .paper-1 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Vintage Typewriter;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-1 p {
  font-size: min(20px, 2.5vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
}

.main-holder .paper-1 .center {
  text-align: center;
}

.main-holder .paper-1 .underline {
  text-decoration: underline;
}

.main-holder .paper-1 .uppercase {
  text-transform: uppercase;
}

.speaker-transcript {
  text-decoration: underline;
  text-transform: uppercase;
}

.main-holder .paper-1 ul > li::before {
  content: "\25CF";
  color: var(--vtm-cf-clr-black);
  font-size: min(12px, 1.5vw);
  bottom: 3px;
}

.main-holder .paper-2 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Remington Noiseless;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-2 p {
  font-size: min(20px, 2.5vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
}

.main-holder .paper-2 .uppercase {
  text-transform: uppercase;
}

.main-holder .paper-2 .underline {
  text-decoration: underline;
}

.main-holder .paper-3 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Amigo;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-3 p {
  font-size: min(24px, 3vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
}

.main-holder .paper-4 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Handwriting Dakota;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-4 p {
  font-size: min(24px, 3vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
  color: var(--vtm-cf-clr-paper-4-font);
}

.main-holder .paper-5 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: Brubeck;
  color: black;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-5 p {
  font-size: min(24px, 3vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
}

.main-holder .paper-6 {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Arial;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .paper-6 p {
  font-size: min(20px, 2.5vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
}

.main-holder .paper-6 p strong {
  color: var(--vtm-cf-clr-black);
}

.main-holder .paper-7 {
  background: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-paper-decoration.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(255, 252, 222, 0.8);
  background-blend-mode: screen;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: #516590;
  font-family: "Hans Hand";
  font-weight: bold;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
  padding-left: min(16px, 2vw);
  padding-right: min(16px, 2vw);
}

.main-holder .paper-7 p {
  font-size: min(26px, 3.25vw);
}

.main-holder .paper-8 {
  background: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-stained-texture.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(255, 249, 186, 0.8);
  background-blend-mode: lighten;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: "Old Newspaper Types";
  font-weight: bold;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
  padding-left: min(16px, 2vw);
  padding-right: min(16px, 2vw);
}

.main-holder .paper-8 p {
  font-size: min(18px, 2.25vw);
}

.main-holder .email {
  background-image: url("https://content.demiplane.com/compendium/vampire/the-chicago-folios/css/vtm-cf-crumpled-paper.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: black;
  font-family: Tahoma;
  padding-top: min(16px, 2vw);
  padding-bottom: min(16px, 2vw);
}

.main-holder .email p {
  font-size: min(20px, 2.5vw);
  margin-top: 0px;
  margin-bottom: min(12px, 1.5vw);
  margin-left: min(24px, 3vw);
  margin-right: min(24px, 3vw);
  text-indent: min(24px, 3vw);
}

.main-holder .email p strong {
  color: var(--vtm-cf-clr-black);
}

.main-holder h3.comment {
  font-family: Futura PT Bold;
  background-color: #000 !important;
  text-transform: uppercase !important;
  font-size: var(--font-size-2) !important;
  padding: 10px 20px 10px 20px !important;
  color: #fff !important;
}

.main-holder p.comment {
  font-family: Futura PT Book;
  background-color: #3a3233;
  margin: 0 10px 0 10px !important;
  padding: 10px;
}

.main-holder p {
  font-size: var(--font-size-1);
  position: relative;
}

.main-holder .hidden {
  color: transparent;
  margin: -2em;
  background-image: none !important;
}

.main-holder .header-spacer {
  height: var(--font-size-6);
}

/*Utility*/
.main-holder .spacer {
    height: min(16px, 2vw);
}
/*Image Wizard Styles*/