:root {
  --padding: 65px; /*Ancho de los bordes de la página*/
  --color-primary: #34389a;
  --color-secondary: #7404cb;
  --color-tertiaire: #244635;
}

body {
  /*background: white url(./images/bg.png) repeat center center;*/
  margin: 0;
  padding: 0;
  font-family: "Gilda Display", serif;
  color: var(--color-primary);
  font-size: 18px;
}

a {
  color: var(--color-primary);
}

/*body:before {
  content: "";
  display: block;
  width: var(--padding);
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent url(./images/border1.png) top left repeat-y;
  background-size: 50px;
}

body:after {
  content: "";
  display: block;
  width: var(--padding);
  height: 100vh;
  position: fixed;
  top: 0px;
  right: 0px;
  background: transparent url(./images/border2.png) top right repeat-y;
}*/

body > * {
  padding: 0 0 calc(var(--padding) / 3) 0;
  margin: 0 var(--padding);
}

.columns {
  columns: 2;
}

.columns > *:first-child,
.saltocolumna + * {
  margin-top: 0;
  padding-top: 0;
}

.saltocolumna {
  display: block;
  break-before: column;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}


@media screen {
  .saltopagina {
    border-top: 3px dashed var(--color-green);
    border-bottom:  3px dashed var(--color-green);
  }

  .columns {
    columns: auto;
  }

    body {
    font-size: 22px;
  }

  section {
    max-width: 700px;
    margin: auto;
  }
}

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

  .nopdf {
    display: none !important;
    visibility: hidden !important;
  }

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

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

body {
  counter-reset: primary 0;
}

body > *:first-child,
.saltopagina + * {
  margin-top: var(--padding);
  padding-top: 0;
}

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

.saltopagina:after {
  --size: 30px;
  font-family: "Rosarivo", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  content: counters(primary, "-", style);
  position: absolute;
  bottom: 20px;
  right: calc(50% - (var(--size) / 2));
  width: var(--size);
  height: var(--size);
  z-index: 10;
  opacity: 1;
  font-size: 20px;
  padding: 5px 5px 3px;
  color: var(--color-green);
  text-shadow: 1px 0px 1px var(--color-yellow), 0px 1px 1px var(--color-yellow), -1px 0px 1px var(--color-yellow), 0px -1px 1px var(--color-yellow);
}

/* -------------------- */

h1 {
  font-family: "Rosarivo", cursive;
  font-style: italic;
  font-size: 2.8em;
  text-align: center;
  border-bottom: 1px solid var(--color-primary);
  margin-bottom: 30px;
  margin-top: 0;
  padding-top: 0;
}

h1::first-letter {
  font-family: "Lavishly Yours", cursive;
  font-weight: 400;
  font-size: 1.9em;
}

h2 {
  font-family: "Rosarivo", cursive;
  font-size: 2em;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding: 16px 0 10px !important;
}

h3 {
  font-family: "Rosarivo", cursive;
  font-size: 1.5em;
  margin: 0;
  padding: 10px 0 5px;
  font-style: italic;
}

p {
  margin-top: 0; 
}

ul {
  font-size: 0.95em;
  /*padding: 0px;*/
  list-style-type: none;
}

div > ul {
  padding-left: 0;
}

ul ul {
  padding-left: 0px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 0.70em;
}

.columns > ul:first-of-type > li > ul {
  border-top: 1px solid var(--color-primary);
  padding-top: 3px;
  
}

ul ul li {
  width: calc(50% - 5px);
}

table {
  border-collapse: collapse;
  font-size: 0.85em;
}

table td,
table th {
  padding: 5px 5px 2px 5px;
}

table thead th {
  font-family: "Rosarivo", cursive;
  font-style: italic;
}

table thead tr {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}


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

img {
  width: 100%;
}

p:has(img) {
  padding: 0px;
  margin: 0px;
}


blockquote {
  border: 1px solid var(--color-primary);
  padding: 10px;
  margin: 0 0 10px 0;
  font-family: "Rosarivo", cursive;
  line-height: 120%;
  font-style: italic;
}

blockquote p:last-child {
  padding: 0;
  margin: 0;
}


.pdf {
    position: fixed;
    bottom: 0px;
    right: 0px;
    color: var(--color-secondary);
    background-color: var(--color-primary);
    display: block;
    padding: 8px;
    margin: 0px;
    font-family: 'Kablammo';
    font-size: 24px;
    text-decoration: none;
    z-index: 100;
}

.pdf:nth-of-type(2) {
    right: auto;
    left: 0px;
}#Trolled!!!!