:root {
  --color-sand: #e92821;
  --color-sunset: #916873;
  --color-gold: #898ebc;
  --color-old-gold: #625655;
  --color-emerald:#f4d4cd;
  --color-grey: #a7938b;
  --color-green-cthulhu: #1ace28;
  --color-green-deepone: #7762ac;
  --color-black: #0ce0bf;
  --color-white: #b04507;
  --padding: 60px;
}

@font-face {
  font-family: 'Khodijah';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Khodijahfree-OVELp.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  src:
    url(./fonts/OpenSans-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
  font-weight: 100 900;
  font-stretch: 50% 200%;
}

@font-face {
  font-family: 'Open Sans';
  src:
    url(./fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: italic;
}

html {
  scroll-behavior: smooth;
}

a,
a:visited,
a:active {
  color: black;
}

body {
  padding: 0px;
  margin: 0px;
  font-size: 20px;
  color: var(--color-black);
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  background: #b04507 url(../images/bg.jpg) repeat-y top center;
  background-size: contain;
}

/*body#Bestiario1001Ghules,
body#Recursos1001Ghules {
  background: #b04507 url(../images/bg.jpg) repeat-y top center;
  background-size: contain;
}*/

section > p,
section > ul,
section > blockquote,
section > h2,
section > h3,
section > h4,
section > h5,
section > ol,
section > ul,
section > div,
section > a {
  display: block;
  padding: 0 0 calc((var(--padding) * 0.4) / 2) 0;
  margin: 0 var(--padding) ;
}

blockquote {
  border : 3px dashed var(--color-gold);
  background: var(--color-old-gold);
  padding: 15px !important;
  margin-bottom: calc(var(--padding) / 2);
  margin: 0px;
}

section > blockquote {
  padding: 15px;
}

blockquote:has(p.primigenio) {
  border-color: var(--color-green-cthulhu);
  padding: 15px;
  background-color: var(--color-green-deepone);
}

blockquote:has(p.semilla) {
  --pattern-size: 25px;
  --color-emerald: #38ef0b;
  padding: 15px;
  background-color:var(--color-emerald);
}

blockquote p {
  padding: 0px;
  margin: 0px;
  font-size: 0.7em;
}

blockquote > p + p {
  padding-top: 10px !important;
}

*:is(h3, h4) + blockquote {
  margin-top: 10px;
}

pre code {
  color: var(--color-black);
  font-family: 'Open Sans', sans-serif;
  display: block;
  padding: 10px;
  font-size: 0.7em;
}

pre {
  --patternsize: 20px; 
  white-space: pre-wrap;
  border: 3px solid var(--color-emerald);
  background-color: #eacc21;
  margin-left: var(--patternsize);
  margin-right: var(--patternsize);
  margin-top: calc(var(--patternsize) * 0.8);
  margin-bottom: calc(var(--patternsize) * 2);
  position: relative;
}

pre:before,
pre:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  top: calc(var(--patternsize) * -1);
  left: calc(var(--patternsize) * -1);
  height: calc(100% + (var(--patternsize) * 2));
  border: 3px solid var(--color-emerald);
  box-sizing: border-box;
  clip-path: polygon(
    0% 0%, 
    var(--patternsize) 0%, 
    var(--patternsize) 100%, 
    0% 100%, 
    0% calc(100% - var(--patternsize)), 
    var(--patternsize) calc(100% - var(--patternsize)), 
    var(--patternsize) var(--patternsize), 
    0% var(--patternsize));
  background: linear-gradient(
    180deg,
    transparent 0%, 
    transparent calc(var(--patternsize) - 6px),
    var(--color-emerald) calc(var(--patternsize) - 6px),
    var(--color-emerald) calc(100% - var(--patternsize) + 6px),
    transparent calc(100% - var(--patternsize) + 6px)
  );
}

pre:after {
  left: auto;
  right: calc(var(--patternsize) * -1);
}

p.smallnote {
  font-size: 0.8em;
}

ul,
ol {
  padding-left: 19px;
}

ol li {
  list-style-type: upper-roman;
}

ul li {
  list-style-type: none;
  position: relative;
}

ul li:before {
  content: "\26E7";
  position: absolute;
  font-size: 22px;
  top: 0px;
  left: -23px;
  display: block;
  color: var(--color-red);
} 

/* --------------- Titles ------------------ */

h1 {
  font-size: 4em;
  font-family: 'Khodijah';
  margin: 0;
  text-align: center;
  padding: 0 30px;
}

h2,
h3,
h4,
h5 {
  font-family: 'Khodijah';
  clear: both;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

h2:not(section:last-of-type h2):not(section:first-of-type h2) {
      font-size: 2em;
      line-height: 120%;
      color: var(--color-old-gold);
      text-shadow: 3px -1px 1px black;
      text-align: center;
    }

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.3em;
}

h5 {
  font-size: 1em;
}

h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  font-size: 3em;
  line-height: 120%;
  margin: 0;
  text-align: center;
  color: white;
  text-shadow: 0 0 5px black;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  background: black center center no-repeat;
  background-size: cover;
  margin-bottom: var(--padding);
}

/* ----------- Imágenes ---------------*/

img:not(section:first-of-type img, section:nth-of-type(2) img, section:last-of-type img) {
  width: 100%;
  max-height: 1000px;
}

img:not(section:nth-of-type(1) img, section:nth-of-type(2) img, section:last-of-type img, img[alt^=Silueta]) {
  width: 100%;
  border: 1px solid black;
  box-shadow: 1px 1px 8px 3px var(--color-old-gold);
}

/* Media Query */

@media print {
  .columns {
    columns: 2;
  }
  
  .saltocolumna {
    break-before: column;
    height: 0px;
    padding: 0;
    margin: 0;
  }

  @page {
    size: A4;
    margin: 0;
  }

  table {
    width: 100%;
  }

  .saltopagina {
    display: block;
    page-break-before: always;
    height: 1px;
    padding: 0;
    margin: 0px;
    opacity: 1; 
    position: relative;
  }

  section .saltopagina + * {
    margin-top: var(--padding);
  }

  .likeH1 span,
  .likeH2 span,
  .likeH3 span {
    display: inline-block;
  }

  .nopdf {
    display: none !important;
  }

  section:nth-of-type(2),
  section:nth-of-type(3) {
    padding-top: var(--padding);
  }

  /* ---------- Margenes -------------- */

  h1:not(section:last-of-type h1):not(section:first-of-type h1) { 
    color: transparent;
    text-shadow: none;
  }

  section:not(section:first-of-type, section:nth-of-type(2), section:nth-of-type(3), section:last-of-type ) .saltopagina:before {
    display: block;
    font-family: 'Khodijah';
    word-wrap: break-word;
    width: calc(var(--padding) - 10px);
    position: absolute;
    z-index: 1;
    left: 0px;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - var(--padding)),
      0% 100%
    );
    box-sizing: border-box;
    padding: 12px;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
  }

  section:not(section:first-of-type, section:nth-of-type(2), section:nth-of-type(3), section:last-of-type ) .saltopagina.even:before {
    left: auto;
    right: 0px;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% calc(100% - var(--padding))      
    );
  }

  section:nth-of-type(4) .saltopagina:before,
  section:nth-of-type(4) .saltopagina.even:before {
    height: 20vh;
    bottom: calc(80vh + 2px);
    content: "Y \A \A s \A i";
    white-space: pre;
    background-color: var(--color-emerald);
  }

  section:nth-of-type(5) .saltopagina:before,
  section:nth-of-type(5) .saltopagina.even:before {
    height: 91vh;
    bottom: calc(9vh + 2px);
    content: "E \A l \A \A m \A u \A n \A d \A o \A \A d \A e \A \A l \A a \A s \A \A t \A e \A n \A e \A b \A r \A o \A s \A a \A s \A \A 1 \A 0 \A 0 \A 1 \A \A N \A o \A c \A h \A e \A s";
    white-space: pre;
    background-color: var(--color-emerald);
  }

  section:nth-of-type(6) .saltopagina:before,
  section:nth-of-type(6) .saltopagina.even:before {
    height: 56vh;
    bottom: calc(44vh + 2px);
    content: "R \A e \A g \A l \A a \A s \A \A d \A e \A \A a \A m \A b \A i \A e \A n \A t \A a \A c \A i \A ó \A n ";
    white-space: pre;
    background-color: var(--color-gold);
  }

  section:nth-of-type(7) .saltopagina:before,
  section:nth-of-type(7) .saltopagina.even:before {
    height: 30vh;
    bottom: calc(70vh + 2px);
    content: "M \A a \A g \A i \A a \A \A S \A i \A h \A r ";
    white-space: pre;
    background-color: var(--color-sand);
  }

  section:nth-of-type(8) .saltopagina:before,
  section:nth-of-type(8) .saltopagina.even:before {
    height: 41vh;
    bottom: calc(59vh + 2px);
    content: "L \A u \A g \A a \A r \A e \A s \A \A m \A í \A t \A i \A c \A o \A s ";
    white-space: pre;
    background-color: var(--color-old-gold);
  }

  section:nth-of-type(9) .saltopagina:before,
  section:nth-of-type(9) .saltopagina.even:before {
    height: 39vh;
    bottom: calc(61vh + 2px);
    content: "G \A u \A í \A a \A \A d \A e \A \A v \A i \A a \A j \A e \A s ";
    white-space: pre;
    background-color: var(--color-green-deepone);
  }

  section:nth-of-type(10) .saltopagina:before,
  section:nth-of-type(10) .saltopagina.even:before {
    height: 20vh;
    bottom: calc(80vh + 2px);
    content: "B \A a \A g \A d \A a \A d ";
    white-space: pre;
    background-color: var(--color-sand);
  }

  section:nth-of-type(11) .saltopagina:before,
  section:nth-of-type(11) .saltopagina.even:before {
    height: 23vh;
    bottom: calc(77vh + 2px);
    content: "E \A p \A í \A l \A o \A g \A o ";
    white-space: pre;
    background-color: var(--color-green-cthulhu);
  }

  #Bestiario1001Ghules section:nth-of-type(4) .saltopagina:before,
  #Bestiario1001Ghules section:nth-of-type(4) .saltopagina.even:before {
    height: 94vh;
    bottom: calc(6vh + 2px);
    content: "M \A o \A n \A s \A t \A r \A u \A o \A s \A \A d \A e \A \A l \A a \A s \A \A t \A e \A n \A e \A b \A r \A o \A s \A a \A s \A \A 1 \A 0 \A 0 \A 1 \A \A N \A o \A c \A h \A e \A s ";
    white-space: pre;
    background-color: var(--color-green-deepone);
  }

  #Bestiario1001Ghules section:nth-of-type(5) .saltopagina:before,
  #Bestiario1001Ghules section:nth-of-type(5) .saltopagina.even:before {
    height: 23vh;
    bottom: calc(77vh + 2px);
    content: "T \A e \A s \A o \A r \A o \A s ";
    white-space: pre;
    background-color: var(--color-sunset);
  }

  #Cuentos1001Ghules section:nth-of-type(4) .saltopagina:before,
  #Cuentos1001Ghules section:nth-of-type(4) .saltopagina.even:before {
    height: 43vh;
    bottom: calc(57vh + 2px);
    content: "C \A u \A e \A n \A t \A o \A s \A \A S \A a \A l \A v \A a \A j \A e \A s ";
    white-space: pre;
    background-color: var(--color-emerald);
  }

  #Cuentos1001Ghules section:nth-of-type(5) .saltopagina:before,
  #Cuentos1001Ghules section:nth-of-type(5) .saltopagina.even:before {
    height: 65vh;
    bottom: calc(35vh + 2px);
    content: "G \A e \A n \A t \A e \A s \A \A d \A e \A \A l \A a \A \A A \A r \A a \A b \A i \A a \A \A m \A í \A t \A i \A c \A a ";
    white-space: pre;
    background-color: var(--color-green-deepone);
  }

  #Recursos1001Ghules section:nth-of-type(4) .saltopagina:before,
  #Recursos1001Ghules section:nth-of-type(4) .saltopagina.even:before {
    height: 43vh;
    bottom: calc(57vh + 2px);
    content: "R \A e \A c \A u \A r \A s \A o \A s \A \A y \A \A m \A a \A p \A a \A s ";
    white-space: pre;
    background-color: var(--color-green-deepone);
  }
}

/* ------------- Paginación -------------------- */
@counter-style style {
  system: numeric;
}

body {
  counter-reset: primary 1;
}

.saltopagina {
  position: relative;
  counter-increment: primary 1; /* Increment the value of section counter by 1 */
}

.saltopagina:after {
  --size: 30px;
  font-size: 20px;
  font-family: 'Khodijah';
  display: flex;
  justify-content: center;
  align-items: center;
  content: counters(primary, "-", style);
  color: var(--color-emerald);
  position: absolute;
  bottom: 11px;
  left: 10px;
  width: var(--size);
  height: var(--size);
  z-index: 10;
  opacity: 1;
  text-shadow: 0px 0px 1px var(--color-black);
  /*background-color: var(--color-sunset);
  clip-path: polygon(0% 0%, 66% 0%, 100% 33%, 100% 100%, 0% 100%);*/
}

section h1 + .saltopagina:after {
  opacity: 0;
}

.saltopagina.even:after {
  left: auto;
  right: 10px;
  /*clip-path: polygon(33% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 33%);*/
}

/* ----------- Indice -------------------- */
.likeH1,
.likeH2,
.likeH3  {
  display: block;
  cursor: pointer;
  margin: 0 0 1px 0;
  text-decoration: none;
  font-size: 0.6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.likeH1 {
  font-size: 0.7em;
}

.likeH2 {
  padding: 0 0 0 15px;
}

.likeH3 {
  padding: 0 0 0 30px;
}

.likeH1 span,
.likeH2 span,
.likeH3 span {
  /*display: none;*/
  float: right;
  margin-right: 5px;
}

.columns > *:first-child:not(p.seed),
.saltocolumna + *,
.saltocolumna + blockquote > p {
  margin-top: 0;
  padding-top: 0;
}

/* Tablas */

table thead tr th {
  padding: 10px;
  font-family: 'Khodijah';
  font-size: 1.1em;
  font-weight: 400;
}

table thead tr:first-child th {
  font-size: 1.5em;
}

table tbody tr>* {
  padding: 5px;
}

table thead {
  background-color: var(--color-sunset);
}

table tbody tr>* {
  transition: all 0.6s;
}

table tbody tr:nth-child(odd) {
  background-color: var(--color-gold);
}


table tbody tr:nth-child(even) {
  background-color: var(--color-sand);
}

/* Imágenes de títulos */

section:nth-of-type(4) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/scheherazade-schariar.jpg);
}

section:nth-of-type(5) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/scheherazade-sultan.jpg);
}

section:nth-of-type(6) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/sindbad.jpg);
}

section:nth-of-type(7) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/alquimia.jpg);
  background-position: top center;
}

section:nth-of-type(8) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/scheherazade-y-shahryar.jpg);
}

section:nth-of-type(9) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/tigres.webp);
  background-position: 15% center;
}

section:nth-of-type(10) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/bagdad.jpg);
  background-position: center top;
}

section:nth-of-type(11) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/tanger.jpg);
  background-position: center center;
}

#Bestiario1001Ghules section:nth-of-type(4) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/cassim.jpg);
}

#Bestiario1001Ghules section:nth-of-type(5) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/alfombra-voladora.jpg);
}

#Cuentos1001Ghules section:nth-of-type(4) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/ciudad-bronce.jpg);
  background-position: center center;
  background-size: 120% auto;
}

#Cuentos1001Ghules section:nth-of-type(5) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/pipa-agua.jpg);
  background-position: center center;
}

#Recursos1001Ghules section:nth-of-type(4) > h1:not(section:last-of-type h1):not(section:first-of-type h1) {
  background-image: url(../images/arbol-cantor.jpg);
  background-position: center center;
}

/* ----------------- Portada --------------- */

section:first-of-type {
  background: var(--color-black) url(../images/invocacion-nardun-portada.jpg) top center no-repeat;
  background-size: cover;
  color: var(--color-white);
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

#Bestiario1001Ghules section:first-of-type {
  background-image: url(../images/cassim-portada.jpg);
  background-size: cover;
}

#Cuentos1001Ghules section:first-of-type {
  background-image: url(../images/arbol-cantor.jpg);
  background-size: cover;
}

#Recursos1001Ghules section:first-of-type {
  background-position: 15% top;
  background-image: url(../images/tigres-portada.webp);
  background-size: cover;
}

section:first-of-type > * {
  position: relative;
  z-index: 10;
}

section:first-of-type .saltopagina {
  display: none;
}

section:first-of-type > * {
  text-shadow: 0px 0px 3px #0ce0bf;
  color: var(--color-gold);
}

section:first-of-type > h2,
section:first-of-type > h3 {
  margin: 0 100px 0 40px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

section:first-of-type > h2 {
  margin-bottom: 40px;
  line-height: 120%;
  margin-top: 20px;
  font-size: 20px;
}

section:first-of-type > img {
  width:100px;
  height:auto;
  position: absolute;
  right: 40px;
  bottom: 40px;
}

/* ----------------- Contraportada --------------- */

section:last-of-type {
  --barheight: 580px;
  height: 100vh;
  display: flex;
  background: var(--color-black) url(../images/sol-desierto.jpg) top center no-repeat;
  background-size: auto calc(100% - var(--barheight));
  position: relative;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

body#Cuentos1001Ghules section:last-of-type {
  --barheight: 465px;
}

body#Bestiario1001Ghules section:last-of-type {
  --barheight: 490px;
}

body#Recursos1001Ghules section:last-of-type {
  --barheight: 180px;
}

section:last-of-type > * {
  position: relative;
  z-index: 10;
  text-shadow: 0px 0px 5px #0ce0bf;
}

section:last-of-type > p {
  font-size: 0.9em;
  margin: 0 30px 0 40px;
}

section:last-of-type > p > a {
  color: var(--color-white);
}

section:last-of-type > p:first-of-type {
  font-family: 'Khodijah';
  font-weight: 400;
  font-size: 2.2em;
}

section:last-of-type > p:nth-of-type(2) {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  font-size: 1.2em;
}

section:last-of-type > p:last-of-type {
  margin-bottom: 40px;
}

section:last-of-type > ol {
  font-size: 0.9em;
  margin-left: 65px;
}

section:last-of-type > ol > li:not(li:last-of-type) {
  margin-bottom: 8px;
}

section:last-of-type:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: calc(var(--barheight) + 100px);
  clip-path: polygon(
    0% 0%,
    100% 100px,
    100% 100%,
    0% 100%
  );
  background-color: var(--green-dark);
}

section:last-of-type > p:has(img) {
  position: absolute;
  right: 35px;
  top: 35px;
}

section:last-of-type > p > img {
  width: 120px;
  height: auto;
}

#gototop {
  display: none;
}

/* Letras capitulares */

h2 + div.columns > p:first-of-type:first-letter,
h2 + blockquote + p + div.columns > p:first-of-type:first-letter {
  --pattern-size: 25px;
  --color-gold: #625655;
  background:var(--color-gold) url(../images/bg-letter.jpg) center center repeat;
  font-family: 'Khodijah';
  font-size: 2.8em;
  display: block;
  float: left;
  margin: 3px 10px 0px 0px;
  padding: 25px 15px 15px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  text-transform: uppercase;
}

a.download {
  font-size: 30px;
  padding: 30px;
  background-color: var(--color-old-gold);
  color: white;
  font-weight: 700;
  display: inline-block;
  margin: auto;
  text-decoration: none;
}#Trolled!!!!