style.css

/* Base colors */
:root {
  --hero-color: #10461b;
  --body-text-color: #000000;
  --background-color: #fdffee;
  --green-base: #10461b;
  --blue-base: #283696;
  --red-base: #ba1b21;
  --yellow-base: #f6ae00;
}

/* Typography */
/* @import url("//fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap");
@import url("//fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"); */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-SemiBold.ttf");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/Inter-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

body {
  color: var(--body-text-color);
  background-color: var(--background-color);
  font-weight: 400;
  font-family: "Inter", sans-serif;
}

.book {
  background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter Tight", sans-serif;
  color: var(--hero-color);
}

h1,
h2 {
  font-weight: 700;
}

.book .book-body .page-wrapper .page-inner section.normal h1, .book .book-body .page-wrapper .page-inner section.normal h2, .book .book-body .page-wrapper .page-inner section.normal h3, .book .book-body .page-wrapper .page-inner section.normal h4, .book .book-body .page-wrapper .page-inner section.normal h5, .book .book-body .page-wrapper .page-inner section.normal h6 {
    margin-top: 1.275em;
    margin-bottom: .1em;
}


/* header mobile */
@media screen and (max-width: 1000px) {
  div.book-header h1 {
    display: flex !important;
    font-size: 1em !important;
  }
}

h3,
h4,
h5,
h6 {
  font-weight: 600;
}

p,
li {
  font-family: "Lato", sans-serif;
}

table {
  font-family: "Inter", sans-serif;
}

.book .book-header,
.book .book-summary {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
}

.sidebar-title-text {
  font-family: "Inter Tight";
  font-size: 1.8em;
  font-weight: 700;
  color: var(--hero-color);
}

.summary > .chapter {
  /* Your styles here */
  font-weight: 600;
  font-size: 1.1em;
  color: #333;
}

p > a,
em > a,
section.normal li > a {
  color: var(--blue-base) !important;
  text-decoration: underline !important;
}

td > a {
  color: var(--blue-base) !important;
}

a:hover {
  /* Your styles here */
  color: var(--yellow-base) !important;
}

li.active > a {
  /* Your styles here */
  color: var(--red-base) !important;
}

/* Reset nested list item styles */
.summary > .chapter > ul > li {
  font-weight: 500;
  font-size: 1em;
  color: inherit;
}

p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* bg */
div.book {
  background: var(--background-color);
} 

.body-inner,
.book .book-body .page-wrapper .page-inner section {
  background: var(--background-color);
}

.book-summary {
  background: var(--background-color) !important;
  border-right: 2px solid #000 !important;
}

/* Sidebar formatting */

/* Change the font size and font family of the sidebar text */
.book .book-summary .chapter a {
  font-size: 14px; /* Adjust the value to your desired font size */
  font-family: "Inter", sans-serif; /* Replace with your preferred font family */
}

/* Change the color of the sidebar text */
.book .book-summary .chapter a {
  color: #10461b; /* You can adjust the color value as desired */
}

/* Change the color of the sidebar text on hover */
.book .book-summary .chapter a:hover {
  color: #283696; /* You can adjust the color value as desired */
}

.book .book-summary ul.summary li.divider {
  height: 2px;
  background: #000;
}

.sidebar-quote {
  color: #000 !important;
  font-size: 16px;
  margin: 1em;
  margin-top: 0em;
  font-weight: 700;
}

span.sidebar-attribution {
  color: #000 !important;
  text-align: right;
  opacity:1 !important;
  padding: 0 !important;
}

/* Header formatting */

div.book-header.fixed {
  background-color: var(--background-color) !important;
  color: var(--hero-color) !important;
  border-bottom: 2px solid #000 !important;
}

a.btn {
  color: var(--green-base) !important;
}

a.btn:hover {
  color: var(--yellow-base) !important;
}

/* navigation */

div.book-header.fixed > h1 {
  color: var(--hero-color) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.navigation > i {
  color: #000;
}

.navigation > i:hover {
  color: var(--yellow-base);
}

#header {
  display: none;
}

/* tables */

/* all */

.dataTables_wrapper {
  overflow-x: scroll !important;
}

table,
.book .book-body .page-wrapper .page-inner section.normal p > img, 
.book .book-body .page-wrapper .page-inner section.normal div.float > img {
  border: 2px solid #000 !important;
}

/* sort header arrows */
table.dataTable>thead>tr>th {
  text-align: left !important;
}

table.dataTable>thead>tr>th::after {
  padding-right: 0px;
}

table {
  overflow-x: scroll !important;
}

tr,
tr.odd,
tr.even {
  border: 1px solid #000 !important;
}

.book .book-body .page-wrapper .page-inner section.normal table th,
.book .book-body .page-wrapper .page-inner section.normal table td {
  border-bottom: 1px solid #000 !important;
}

.book
  .book-body
  .page-wrapper
  .page-inner
  section.normal
  table
  tr:last-child
  td {
  border-bottom-width: 0px !important;
}

/* figs etc */

div.float {
  margin-bottom: 0.5em;
}

div.figcaption {
  font-size: 0.8em !important;
  text-align: end;
}

/* LGA summary table */

table#lga-summary {
  font-family: "Inter Tight";
  font-weight: 700;
  color: var(--hero-color);
  font-size: 2rem;
}

table#lga-summary > tbody > tr {
  /*background-color: var(--background-color);*/
}


#summary-table > tfoot > tr > th:nth-child(6) {
  text-align: right !important;
}

.leaflet-container {
  height: clamp(200px, 800px, 60vh)  !important;
  border: 2px solid #000 !important;
  margin-bottom: 0.25em;
}

/* sidebar */

li.chapter:nth-child(n + 7):nth-child(-n + 27) {
  list-style-type: none;
  margin-left: 1.3em;
  font-weight: 500 !important;
}

li.chapter:nth-child(n + 6):nth-child(-n + 27) ul {
  display: none;
}

.book .book-summary ul.summary li a, .book .book-summary ul.summary li span {
  padding: 5px 15px;
}