@font-face {
    font-family: 'LibreBaskerville';
    src: url("../fonts/LibreBaskervilleNew-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url("../fonts/LibreBaskervilleNew-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url("../fonts/LibreBaskervilleNew-Bold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url("../fonts/LibreBaskervilleNew-ExtraBold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'LibreBaskerville';
    src: url("../fonts/LibreBaskervilleNew-Italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    color: #444;
}
body a {
    color: #0066cc;
    text-decoration: none;
}
.document, .article, .modal-content {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
.book {
    display: inline-block;
    margin-right: 0.05rem;
}
.book h1, .legend h1 {
    border-top: 1px solid #ccc;
    padding-top: 0.25rem;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 2rem;
}
.tag {
    font-size: 84%;
}
.article {
    background-color: #fff;
}
.article, .legdesc .rhs, .tag-description, .legend p, .topper p {
    font-family: 'LibreBaskerville', 'Georgia', serif;
    font-size: 1.0rem;
    line-height: 1.66;
}
h3.outer, .document h2 {
   font-family: 'LibreBaskerville', 'Georgia', serif;
}
.legdesc .rhs {
    border-radius: 4px;
}
.article h1, .document h2 {
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 2.25rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.article h2 {
    text-align: center;
    font-weight: normal;
    font-style: italic;
    font-size: 1.25rem;
}
h3 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    font-size: 1.125rem;
    margin-block-start: 2rem;
}
.snippet h1, .snippet h2, .snippet h3 {
    text-align: left;
}
.snippet h2 {
    font-size: 1.75rem;
}
.snippet h3 {
    font-size: 1.05rem;
}
strong {
    font-weight: 800;
}
.legend {
    margin-bottom: 4em;
}
.legdesc .rhs {
    margin: 1rem;
    padding: 0.4rem;
}
.legtable {
    width: 100%;
}
.legtable tr {
    vertical-align: top;
}
.chapter {
    margin: 1.25rem auto;
    width: 4rem;
    height: 4rem;
    border: 1px solid #ccc;
    padding: 0.4rem;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
}
.chapter.blue {
    background-color: blue;
    color: white
}
.chapter.red {
    background-color: red;
    color: white
}
.chapter.orange {
    background-color: orange;
    color: black;
}
.chapter.green {
    background-color: green;
    color: white;
}
.chapter.lightgray {
    background-color: lightgray;
    color: black;
}
.chapter.gold {
    background-color: gold;
    color: brown;
}
.chapter.lime {
    background-color: #c0ee00;
    color: black;
}
.chapter.gray {
    background-color: gray;
    color: white;
}
.chapter.magenta {
    background-color: magenta;
    color: white;
}
.chapter.purple {
    background-color: purple;
    color: white;
}
.chapter.brown {
    background-color: tan;
    color: black;
}
.chapter.turquoise {
    background-color: turquoise;
    color: black;
}
.chapter.white {
    background-color: white;
    color: black;
    border: 1px solid #ccc;
}

.chapter.green-tan {
    background: linear-gradient(135deg, green 50%, tan 50%);
    color: white;
}
.chapter.lime-tan {
    background: linear-gradient(135deg, #c0ee00 50%, tan 50%);
    color: black;
}
.chapter.red-lime {
    background: linear-gradient(135deg, red 50%, #c0ee00 50%);
    color: white;
}
.chapter.blue-red {
    background: linear-gradient(135deg, blue 50%, red 50%);
    color: white;
}
.chapter.green-red {
    background: linear-gradient(135deg, green 50%, red 50%);
    color: white;
}
.chapter.orange-gray {
    background: linear-gradient(135deg, orange 50%, gray 50%);
    color: black;
}
.chapter.green-blue {
    background: linear-gradient(135deg, green 50%, blue 50%);
    color: white;
}
.chapter.purple-gold {
    background: linear-gradient(135deg, purple 50%, gold 50%);
    color: white;
}
.chapter.gold-tan {
    background: linear-gradient(135deg, gold 50%, tan 50%);
    color: brown;
}
.chapter.yellow-tan {
    background: linear-gradient(135deg, yellow 50%, tan 50%);
    color: black;
}
.chapter.yellow-turquoise {
    background: linear-gradient(135deg, yellow 50%, turquoise 50%);
    color: black;
}
.chapter.turquoise-magenta {
    background: linear-gradient(135deg, turquoise 50%, magenta 50%);
    color: black;
}
.chapter.gold-red-blue {
    background: linear-gradient(135deg, gold 50%, red 50%, red 75%, blue 75%);
    color: brown;
}
.chapter.blue-red-lime {
    background: linear-gradient(135deg, blue 50%, red 50%, red 75%, #c0ee00 75%);
    color: white;
}
.chapter.blue-green-gold {
    background: linear-gradient(135deg, blue 50%, green 50%, green 75%, gold 75%);
    color: white;
}
.chapter.gold-red {
    background: linear-gradient(135deg, gold 50%, red 50%);
    color: brown;
}
.chapter.gold-green {
    background: linear-gradient(135deg, gold 50%, green 50%);
    color: brown;
}
.chapter.gold-purple {
    background: linear-gradient(135deg, gold 50%, purple 50%);
    color: brown;
}
.chapter.gold-lime {
    background: linear-gradient(135deg, gold 50%, #c0ee00 50%);
    color: brown;
}
.chapter.gold-lime-gray {
    background: linear-gradient(135deg, gold 50%, #c0ee00 50%, #c0ee00 75%, gray 75%);
    color: brown;
}
.chapter.gold-lime-magenta {
    background: linear-gradient(135deg, gold 50%, #c0ee00 50%, #c0ee00 75%, magenta 75%);
    color: brown;
}
.chapter.magenta-blue {
    background: linear-gradient(135deg, magenta 75%, blue 75%);
    color: white;
}
.chapter.gold-blue {
    background: linear-gradient(135deg, gold 75%, blue 75%);
    color: brown;
}
.chapter.turquoise-gold-purple {
    background: linear-gradient(135deg, turquoise 50%, gold 50%, gold 75%, purple 75%);
    color: black;
}
.chapter.yellow-gold-red {
    background: linear-gradient(135deg, yellow 50%, gold 50%, gold 75%, red 75%);
    color: black;
}
.chapter.lime-gold-red {
    background: linear-gradient(135deg, #c0ee00 50%, gold 50%, gold 75%, red 75%);
    color: black;
}
.chapter.lime-red {
    background: linear-gradient(135deg, #c0ee00 50%, red 50%);
    color: black;
}
.chapter.magenta-turquoise {
    background: linear-gradient(135deg, magenta 75%, turquoise 75%);
    color: white;
}
.chapter.lime-white-red {
    background: linear-gradient(135deg, #c0ee00 50%, white 50%, white 75%, red 75%);
    color: black;
}
.chapter.white-gold {
    background: linear-gradient(135deg, white 50%, gold 50%);
    color: black;
}
.chapter.lime-white-tan {
    background: linear-gradient(135deg, #c0ee00 50%, white 50%, white 75%, tan 75%);
    color: black;
}
.chapter.green-turquoise {
    background: linear-gradient(135deg, green 50%, turquoise 50%);
    color: white;
}
.chapter.gray-turquoise {
    background: linear-gradient(135deg, gray 50%, turquoise 50%);
    color: white;
}
.chapter.lime-turquoise {
    background: linear-gradient(135deg, #c0ee00 50%, turquoise 50%);
    color: black;
}
.chapter.turquoise-blue {
    background: linear-gradient(135deg, turquoise 50%, blue 50%);
    color: black;
}
.chapter.gold-turquoise {
    background: linear-gradient(135deg, gold 50%, turquoise 50%);
    color: brown;
}
.chapter.lime-turquoise-tan {
    background: linear-gradient(135deg, #c0ee00 50%, turquoise 50%, turquoise 75%, tan 75%);
    color: black;
}
.chapter.blue-turquoise {
    background: linear-gradient(135deg, blue 75%, turquoise 75%);
    color: white;
}
.chapter.yellow-lime {
    background: linear-gradient(135deg, yellow 50%, #c0ee00 50%);
    color: black;
}
.chapter.gold-magenta {
    background: linear-gradient(135deg, gold 50%, magenta 50%);
    color: brown;
}
.chapter.gold-magenta-green {
    background: linear-gradient(135deg, gold 50%, magenta 50%, magenta 75%, green 75%);
    color: brown;
}
.chapter.magenta-purple-turquoise {
    background: linear-gradient(135deg, magenta 50%, purple 50%, purple 75%, turquoise 75%);
    color: white;
}
.chapter.lime-magenta-turquoise {
    background: linear-gradient(135deg, #c0ee00 50%, magenta 50%, magenta 75%, turquoise 75%);
    color: black;
}
.chapter.magenta-red-turquoise {
    background: linear-gradient(135deg, magenta 50%, red 50%, red 75%, turquoise 75%);
    color: white;
}
.chapter.green-magenta {
    background: linear-gradient(135deg, green 50%, magenta 50%);
    color: white;
}
.chapter.gray-blue-red {
    background: linear-gradient(135deg, gray 50%, blue 50%, blue 75%, red 75%);
    color: white;
}
.chapter.turquoise-gray {
    background: linear-gradient(135deg, turquoise 50%, gray 50%);
    color: black;
}
.chapter.magenta-gray {
    background: linear-gradient(135deg, magenta 50%, gray 50%);
    color: white;
}
.chapter.lime-gray {
    background: linear-gradient(135deg, #c0ee00 50%, gray 50%);
    color: black;
}
.chapter.green-magenta-gray {
    background: linear-gradient(135deg, green 50%, magenta 50%, magenta 75%, gray 75%);
    color: white;
}
.chapter.yellow-lime-blue {
    background: linear-gradient(135deg, yellow 50%, #c0ee00 50%, #c0ee00 75%, blue 75%);
    color: black;
}
.chapter.green-gold-turquoise {
    background: linear-gradient(135deg, green 50%, gold 50%, gold 75%, turquoise 75%);
    color: white;
}
.chapter.yellow-gray {
    background: linear-gradient(135deg, yellow 50%, gray 50%);
    color: black;
}
.chapter.lime-blue {
    background: linear-gradient(135deg, #c0ee00 50%, blue 50%);
    color: black;
}
.chapter.lime-blue-red {
    background: linear-gradient(135deg, #c0ee00 50%, blue 50%, blue 75%, red 75%);
    color: black;
}
.chapter.magenta-lime {
    background: linear-gradient(135deg, magenta 50%, #c0ee00 50%);
    color: white;
}
.chapter.yellow-gold {
    background: linear-gradient(135deg, yellow 50%, gold 50%);
    color: black;
}
.chapter.yellow-turquoise-blue {
    background: linear-gradient(135deg, yellow 50%, turquoise 50%, turquoise 75%, blue 75%);
    color: black;
}
.chapter.gold-white {
    background: linear-gradient(135deg, gold 50%, white 50%);
    color: brown;
}
.chapter.purple-lime {
    background: linear-gradient(135deg, purple 50%, #c0ee00 50%);
    color: white;
}
.chapter.yellow-blue {
    background: linear-gradient(135deg, yellow 50%, blue 50%);
    color: black;
}
.chapter.yellow-gold-green {
    background: linear-gradient(135deg, yellow 50%, gold 50%, gold 75%, green 75%);
    color: black;
}
.chapter.white-gold-purple {
    background: linear-gradient(135deg, white 50%, gold 50%, gold 75%, purple 75%);
    color: black;
}
.chapter.lime-red-magenta {
    background: linear-gradient(135deg, #c0ee00 50%, red 50%, red 75%, magenta 75%);
    color: black;
}
.chapter.yellow-gray-turquoise {
    background: linear-gradient(135deg, yellow 50%, gray 50%, gray 75%, turquoise 75%);
    color: black;
}
.chapter.purple-green {
    background: linear-gradient(135deg, purple 50%, green 50%);
    color: white;
}
.chapter.purple-turquoise-tan {
    background: linear-gradient(135deg, purple 50%, turquoise 50%, turquoise 75%, tan 75%);
    color: white;
}
.chapter.gold-tan-red {
    background: linear-gradient(135deg, gold 50%, tan 50%, tan 75%, red 75%);
    color: brown;
}
.chapter.purple-magenta {
    background: linear-gradient(135deg, purple 50%, magenta 50%);
    color: white;
}
.chapter.turquoise-red {
    background: linear-gradient(135deg, turquoise 50%, red 50%);
    color: black;
}
.chapter.gray-red {
    background: linear-gradient(135deg, gray 50%, red 50%);
    color: white;
}
.chapter.gray-blue {
    background: linear-gradient(135deg, gray 50%, blue 50%);
    color: white;
}
.chapter.gray-lime {
    background: linear-gradient(135deg, gray 50%, #c0ee00 50%);
    color: white;
}
.chapter.tan {
    background-color: tan;
    color: black;
}
.chapter.blue-tan {
    background: linear-gradient(135deg, blue 50%, tan 50%);
    color: white;
}
.chapter.lime-gray-red {
    background: linear-gradient(135deg, #c0ee00 50%, gray 50%, gray 75%, red 75%);
    color: black;
}
.chapter.orange-blue {
    background: linear-gradient(135deg, orange 50%, blue 50%);
    color: black;
}
.chapter.lime-magenta-red {
    background: linear-gradient(135deg, #c0ee00 50%, magenta 50%, magenta 75%, red 75%);
    color: black;
}
.chapter.lime-purple-turquoise {
    background: linear-gradient(135deg, #c0ee00 50%, purple 50%, purple 75%, turquoise 75%);
    color: black;
}
.chapter.lime-red-gray {
    background: linear-gradient(135deg, #c0ee00 50%, red 50%, red 75%, gray 75%);
    color: black;
}
.chapter.turquoise-purple {
    background: linear-gradient(135deg, turquoise 50%, purple 50%);
    color: black;
}
.chapter.lime-gray-turquoise {
    background: linear-gradient(135deg, #c0ee00 50%, gray 50%, gray 75%, turquoise 75%);
    color: black;
}
.chapter.gray-purple {
    background: linear-gradient(135deg, gray 50%, purple 50%);
    color: white;
}
.chapter.lime-purple {
    background: linear-gradient(135deg, #c0ee00 50%, purple 50%);
    color: black;
}
.chapter.lime-magenta {
    background: linear-gradient(135deg, #c0ee00 50%, magenta 50%);
    color: black;
}
.chapter.lime-gray-magenta {
    background: linear-gradient(135deg, #c0ee00 50%, gray 50%, gray 75%, magenta 75%);
    color: black;
}
.chapter.gray-purple-magenta {
    background: linear-gradient(135deg, gray 50%, purple 50%, purple 75%, magenta 75%);
    color: white;
}
.chapter.yellow-gold-purple {
    background: linear-gradient(135deg, yellow 50%, gold 50%, gold 75%, purple 75%);
    color: black;
}
.chapter.yellow-turquoise-magenta {
    background: linear-gradient(135deg, yellow 50%, turquoise 50%, turquoise 75%, magenta 75%);
    color: black;
}
.chapter.yellow-magenta {
    background: linear-gradient(135deg, yellow 50%, magenta 50%);
    color: black;
}
.chapter.yellow-magenta-blue {
    background: linear-gradient(135deg, yellow 50%, magenta 50%, magenta 75%, blue 75%);
    color: black;
}
.chapter.gold-magenta-blue {
    background: linear-gradient(135deg, gold 50%, magenta 50%, magenta 75%, blue 75%);
    color: brown;
}
.chapter.lime-magenta-blue {
    background: linear-gradient(135deg, #c0ee00 50%, magenta 50%, magenta 75%, blue 75%);
    color: black;
}
.chapter.lime-purple-red {
    background: linear-gradient(135deg, #c0ee00 50%, purple 50%, purple 75%, red 75%);
    color: black;
}
.chapter.magenta-turquoise-red {
    background: linear-gradient(135deg, magenta 50%, turquoise 50%, turquoise 75%, red 75%);
    color: white;
}
.chapter.gold-turquoise-red {
    background: linear-gradient(135deg, gold 50%, turquoise 50%, turquoise 75%, red 75%);
    color: brown;
}
.chapter.lime-turquoise-red {
    background: linear-gradient(135deg, #c0ee00 50%, turquoise 50%, turquoise 75%, red 75%);
    color: black;
}
.chapter.blue-lime-purple {
    background: linear-gradient(135deg, blue 50%, #c0ee00 50%, #c0ee00 75%, purple 75%);
    color: white;
}
.chapter.lime-gold-gray {
    background: linear-gradient(135deg, #c0ee00 50%, gold 50%, gold 75%, gray 75%);
    color: black;
}
.chapter.gold-turquoise-green {
    background: linear-gradient(135deg, gold 50%, turquoise 50%, turquoise 75%, green 75%);
    color: brown;
}
.chapter.magenta-red {
    background: linear-gradient(135deg, magenta 50%, red 50%);
    color: white;
}
.chapter.lime-green-turquoise {
    background: linear-gradient(135deg, #c0ee00 50%, green 50%, green 75%, turquoise 75%);
    color: black;
}
.chapter.purple-gray-gold {
    background: linear-gradient(135deg, purple 50%, gray 50%, gray 75%, gold 75%);
    color: white;
}
.chapter.yellow-gray-blue {
    background: linear-gradient(135deg, yellow 50%, gray 50%, gray 75%, blue 75%);
    color: black;
}
.chapter.gold-gray-red {
    background: linear-gradient(135deg, gold 50%, gray 50%, gray 75%, red 75%);
    color: brown;
}
.chapter.purple-gray-blue {
    background: linear-gradient(135deg, purple 50%, gray 50%, gray 75%, blue 75%);
    color: white;
}
.chapter.yellow-red {
    background: linear-gradient(135deg, yellow 50%, red 50%);
    color: black;
}
.chapter.yellow-turquoise-gray {
    background: linear-gradient(135deg, yellow 50%, turquoise 50%, turquoise 75%, gray 75%);
    color: black;
}
.chapter.lime-tan-red {
    background: linear-gradient(135deg, #c0ee00 50%, tan 50%, tan 75%, red 75%);
    color: black;
}
.chapter.red-turquoise {
    background: linear-gradient(135deg, red 75%, turquoise 75%);
    color: white;
}
.chapter.gold-lime-red {
    background: linear-gradient(135deg, gold 50%, #c0ee00 50%, #c0ee00 75%, red 75%);
    color: brown;
}
.chapter.gold-green-magenta {
    background: linear-gradient(135deg, gold 50%, green 50%, green 75%, magenta 75%);
    color: brown;
}
.chapter.orange-gray-white {
    background: linear-gradient(135deg, orange 50%, gray 50%, gray 75%, white 75%);
    color: black;
}
.chapter.white-gray {
    background: linear-gradient(135deg, gray 50%, white 50%);
    color: white;
}
.chapter.magenta-gray-blue {
    background: linear-gradient(135deg, magenta 50%, gray 50%, gray 75%, blue 75%);
    color: white;
}
.chapter.magenta-gray-turquoise {
    background: linear-gradient(135deg, magenta 50%, gray 50%, gray 75%, turquoise 75%);
    color: white;
}
.chapter.gold-orange-tan {
    background: linear-gradient(135deg, gold 50%, orange 50%, orange 75%, tan 75%);
    color: brown;
}
.chapter.lime-green {
    background: linear-gradient(135deg, #c0ee00 50%, green 50%);
    color: black;
}

.chapter.blue-black {
    background: linear-gradient(135deg, blue 25%, black 25%);
    color: white;
}
.chapter.red-black {
    background: linear-gradient(135deg, red 25%, black 25%);
    color: white;
}
.chapter.red-black-turquoise {
    background: linear-gradient(135deg, red 25%, black 25%, black 75%, turquoise 75%);
    color: white;
}
.chapter.blue-black-turquoise {
    background: linear-gradient(135deg, blue 25%, black 25%, black 75%, turquoise 75%);
    color: white;
}
.chapter.lime-gold-tan {
    background: linear-gradient(135deg, #c0ee00 50%, gold 50%, gold 75%, tan 75%);
    color: black;
}
.chapter.lime-gold-blue {
    background: linear-gradient(135deg, #c0ee00 50%, gold 50%, gold 75%, blue 75%);
    color: black;
}
.chapter.gray-green {
    background: linear-gradient(135deg, gray 50%, green 50%);
    color: white;
}
.chapter.lime-red-blue {
    background: linear-gradient(135deg, #c0ee00 50%, red 50%, red 75%, blue 75%);
    color: black;
}
.chapter.gold-tan-gray {
    background: linear-gradient(135deg, gold 50%, tan 50%, tan 75%, gray 75%);
    color: brown;
}

table.text-tab, .legtable {
  border-collapse: collapse;
}
table.table-50-50 td {
    width: 50%;
}
table.text-tab tr {
    border-bottom: 1px solid #aaa;
}
table.text-tab tr:last-child {
    border-bottom: none;
}
table.text-tab td, table.text-tab th {
    padding: 0.5rem;
}
table.text-tab td, table.text-tab th {
    text-align: left;
}
table.text-tab td p {
    line-height: 1.4rem;
    font-size: 90%;
}

.quilt {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.quilt table {
    border-collapse: collapse;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
.quilt tr {
    margin: 0;
    padding: 0;
}
.quilt .chapter {
    border: none;
    margin: 0;
    padding: 0;
    --myvar: calc(max(4px, min(6.4vw, 44px) - 3px));
    width: var(--myvar);
    height: var(--myvar);
    border-radius: 0;
    box-shadow: none;
}
table.stats th, table.stats td {
    padding: 0.5rem 1rem;
}
table.stats {
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: left;
}
.tag-full {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    margin-right: 1rem;
}
.tag-full.blue {
    background-color: blue;
    color: white;
}
.tag-full.red {
    background-color: red;
    color: white;
}
.tag-full.orange {
    background-color: orange;
    color: black;
}
.tag-full.green {
    background-color: green;
    color: white;
}
.tag-full.lightgray {
    background-color: lightgray;
    color: black;
}
.tag-full.gold {
    background-color: gold;
    color: brown;
}
.tag-full.lime {
    background-color: #c0ee00;
    color: black;
}
.tag-full.gray {
    background-color: gray;
    color: white;
}
.tag-full.magenta {
    background-color: magenta;
    color: white;
}
.tag-full.purple {
    background-color: purple;
    color: white;
}
.tag-full.brown {
    background-color: tan;
    color: black;
}
.tag-full.turquoise {
    background-color: turquoise;
    color: black;
}
.tag-full.white {
    background-color: white;
    color: black;
    border: 1px solid #ccc;
}

.chNum {
    font-weight: 600;
}
.tag .more {
    font-style: italic;
    font-size: 92%;
}

.leg-desc-container {
  overflow: hidden; /* Clear floats */
}
.leg-desc-square {
  float: left;
  display: flex;
  margin-left: 0.5rem;
  margin-right: 2.2rem;
}
.leg-desc-text {
  margin: 0;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    height: 80%;
    overflow-y: scroll;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#modal-body {
    margin-top: 10px;
}
.filtered h1, .filtered h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.snippet h1, .snippet h2 {
    max-width: unset;
    text-transform: unset;
    letter-spacing: unset;
}
.filtered .tagged-chapter {
    background-color: white;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}
.filtered .tagged-chapter h2 {
    font-size: 20px;
    font-weight: 600;
}
.filtered h1 {
    margin-block-start: 0.25rem;
}
.filter-header h3, .filter-header h2 {
    text-align: left;
}
.filter-header h2 {
    font-size: 1.5em;
}
.filtered span.tag-description {
    display: block;
    margin: 0.5rem;
}
.filtered {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
}
.filtered .tagged-chapter {
    min-width: 36%;
}
@media screen and (min-width: 600px) and (max-width: 900px) {
    .filtered .tagged-chapter {
        max-width: 44%;
        min-width: 40%;
        display: inline-block;
    }
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
    .filtered .tagged-chapter {
        min-width: 19%;
        max-width: 46%;
        display: inline-block;
    }
}
@media screen and (min-width: 1001px) {
    .filtered .tagged-chapter {
        min-width: 21%;
        max-width: 47%;
        display: inline-block;
    }
}

/* dark mode support */
@media screen and (prefers-color-scheme: dark) {
    body, .modal-content {
        background-color: #121212;
        color: #e0e0e0;
    }
    body a {
        color: #bb86fc;
    }
    .article {
        background-color: black;
    }
    /* fix scrollbars to make them dark */
    .modal-content::-webkit-scrollbar {
        background-color: #121212;
    }
    .modal-content::-webkit-scrollbar-thumb {
        background-color: #444;
    }
}