/* ============================================================= */
/* ============================================================= */
/* chapter counters */
/* change these in subsequent volumes */
/* ============================================================= */
/* ============================================================= */
div.booktext { counter-reset: h2-counter; }
body { counter-reset: line-counter; }



/* ============================================================= */
/* General values */
/* ============================================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media only screen {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-size: 115%;
}
}

body {
  margin-left: 2em;
  margin-right: 2em;
  padding-left: 2em;
  padding-right: 2em;
}

body {
  font: 100%/1.125 'Cambria', 'Lucida Sans Unicode', Verdana, Helvetica, serif, 'GNU Unifont';
}

h1, h2, h3, h4, h5, h6, .heading {
  font-family: Cambria, serif;
  font-weight: 400;
  word-wrap: break-word;
}

p {
  text-align: justify; /* books are justified */
  text-indent: 3em; /* books indent the first line of a paragraph */
  line-height: 135%; /* I like a little extra space between lines */
  margin-bottom: 0; 
  margin-top: 0;
  padding: 0;
}

em 
{ 
  font-family: "inherit"; 
  font-style: italic 
}

strong 
{ 
  font-family: "inherit"; 
  font-weight: bold 
}


/* ============================================================= */
/* better blockquotes */
/* ============================================================= */

blockquote {
  display: block;
  border-left: 5px solid #777777;
  margin-left: 3em;
  margin-right: 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 1em;
  padding-right: 1em;
}


/* ============================================================= */
/* nicer horizontal rules */
/* ============================================================= */

hr {
  border: none;
  height: auto;
  overflow: hidden;
  text-align: center;
  margin-top: 1em; /* Adjust the top margin as needed */
  margin-bottom: 1em; /* Adjust the bottom margin as needed */
}

hr::before {
  content: "* * * * * * *";
  display: block;
  color: inherit;
  font-size: inherit;
}


/* ============================================================= */
/* chapter titles */
/* ============================================================= */

/* add Chapter # before the title */
.booktext h2.heading {
  counter-increment: h2-counter; /* Increment the counter for each h2 */
}

.booktext h2.heading::before {
  content: "Chapter " counter(h2-counter); /* Display the counter value */
  display: block;
  text-align: center;
  margin: auto;
  width: 50%;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* format the chapter title itself */
h2 {
  font-variant: normal; 
  font-family: "Cambria", serif; 
  font-size: 1.5em;
  font-style: normal; 
  font-weight: normal; 
  line-height: 100%;
  margin-top: 0.14in; 
  margin-bottom: 0.08in; 
  background: transparent;  

  display: block;
  text-align: center;
  margin: auto;
  width: 50%;

  break-before: page; /* every chapter starts on a new page */
}

/* add a little logo after the chapter title */
h2::after {
  content: ""; /* Required for ::after to work */
  display: block; /* Or inline-block, depending on your layout needs */
  margin: auto;
  width: 15%;
  text-align: center;
  height: 50px; /* Adjust as needed */
  background-image: url('logo.png'); /* Replace with your image path */
  background-size: contain; /* Or cover, auto, etc. */
  background-repeat: no-repeat;
  vertical-align: middle; /* Aligns the image vertically with the text */
  margin-top: 1em;
  margin-bottom: 1em;
}


.excerpt {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
}

.excerpt1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
  text-indent: 0em;
}


/* ============================================================= */
/* special formats that I added to AO3's html after conversion */
/* ============================================================= */
.loud {
  font-weight: bold;
  font-style: italic; 
}

.noise
{
  color: #666;
  font-style: italic; 
  font-family: "inherit"; 
  font-weight: bold 
}

.morse {
  font-family: "Calibri", Times, sans-serif;
  font-style: italic;
}


/* ============================================================= */
/* Title Page */
/* ============================================================= */

/* This more or less centers the title of the work */
/* I'm not very good at CSS, so this is pretty ugly */
div.titlepage { 
  display: block;
  text-align: center;
  margin: auto;
  width: 50%;
  page-break-after: always;

/* Title is three times normal height */
  h1 { 
    font-variant: normal; 
    font-family: "Cambria", serif; 
    font-size: 3em;
    font-style: normal; 
    font-weight: bold; 
    line-height: 100%;
  }

  /* Add a little logo between title and stats */
  h1::after {
    content: ""; /* Required for ::after to work */
    display: block; /* Or inline-block, depending on your layout needs */
    margin: auto;
    width: 15%;
    text-align: center;
    height: 50px; /* Adjust as needed */
    background-image: url('logo.png'); /* Replace with your image path */
    background-size: contain; /* Or cover, auto, etc. */
    background-repeat: no-repeat;
    vertical-align: middle; /* Aligns the image vertically with the text */
    margin-top: 1em;
    margin-bottom: 1em;
}

  /* shows stats: when started (published), when completed, number of words */
  h3 {
    font-size: 1.25em;
    display: block;
    text-align: center;
    margin: auto;
    width: 90%;
  }
}

div.innerpage { 
  display: block;
  text-align: center;
  margin: auto;
  width: 50%;

  /* Title is three times normal height */
  h1 { 
    font-variant: normal; 
    font-family: "Cambria", serif; 
    font-size: 3em;
    font-style: normal; 
    font-weight: bold; 
    line-height: 100%;
  }

  /* Add a little logo between title and stats */
  h1::after {
    content: ""; /* Required for ::after to work */
    display: block; /* Or inline-block, depending on your layout needs */
    margin: auto;
    width: 15%;
    text-align: center;
    height: 50px; /* Adjust as needed */
    background-image: url('logo.png'); /* Replace with your image path */
    background-size: contain; /* Or cover, auto, etc. */
    background-repeat: no-repeat;
    vertical-align: middle; /* Aligns the image vertically with the text */
    margin-top: 1em;
    margin-bottom: 1em;
  }

  /* shows stats: when started (published), when completed, number of words */
  h3 {
    font-size: 1.25em;
    display: block;
    text-align: center;
    margin: auto;
    width: 90%;
  }
}




/* ============================================================= */
/* Table of Contents */
/* ============================================================= */

/* sets the chapter (line) counter for Table of Contents */
ul.contents {
  list-style-type: none;
}

.line {
  counter-increment: line-counter;
}

.inner-chapter {
  counter-reset: line-counter;
  margin-left: 3em;
}

/* Formats Chapter # on one line, then title .... XX on next line */
.line, .not-chapter {
  break-inside: avoid;
  page-break-inside: avoid; /* For older browsers */
  text-decoration: none;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 3ch;
  grid-template-rows: auto auto; /* Two rows */
  align-items: start; /* Align to the start of the grid cell */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Puts Chapter # before each line */
li.line::before {
  font-family: "Cambria", serif; 
  font-size: 1.1em;
  content: "Chapter " counter(line-counter);
  display: block;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.line > .ttl {
  grid-row: 2; /* Place the title in the second row */
  grid-column: 1; /* Ensure the title is in the first column */
}

.line > .pg {
  grid-row: 2; /* Place the page number in the second row */
  grid-column: 2; /* Place the page number in the second column */
}

/* formats the title itself */
.ttl {
  font-style: italic; 
  text-align: left;
  position: relative;
  overflow: hidden;
}

.not-chapter > .ttl {
  font-size: 1.1em;
  font-style: normal; 
}

/* min-width controls how many digits you expect in your page numbers */
.pg {
  padding-left: 1em;
  text-align: right;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}

/* weird tricky CSS I found online to put the dots between the title and page number */
.leaders::after {

  text-align: right;
  position: absolute;
  padding-left: .5em;
  content: " . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . ";
}