/* Connect FontAwesome file with FontAwesome family name.
 * Supplements fontawesome.min.css.  Without this, the codes
 * like `fa-github` don't work in the Furo theme as they did
 * with RTD theme. */
@font-face {
  font-family: FontAwesome;
  src:
    /* 1st choice, smallest file, best compression. */
    url("../fonts/fontawesome-webfont.woff2") format("woff2"),
    /* 2nd choice in case browser cannot digest a woff2 yet. */
    url("../fonts/fontawesome-webfont.woff")  format("woff")
}
.fa {
  font-family: FontAwesome, Arial, sans-serif;
  cursor: pointer;
}

/*-------------------------------------------------------------------------
 * Custom Roles:  workarounds for reStructuredText parser shortcomings.
 * These use `custom_roles.txt` to set up roles using these class names.
 *
 * To use them in `.rst` files:
 * ----------------------------
 * 1.  .. include::  <doc_root>/include/custom_roles.txt
 * 2.  Use with custom roles like this:
 *         :bi:`text`
 *         :ib:`text`
 *         :u:`text`
 *         :ub:`text`
 *         :bu:`text`
 *         :ui:`text`
 *         :iu:`text`
 *         :ubi:`text`
 *         :uib:`text`
 *         :bui:`text`
 *         :iub:`text`
 *         :biu:`text`
 *         :ibu:`text`
 *
 * The above combinations were done so you don't have to remember
 * whether 'i', 'b' or 'u' comes first when they are combined.
 *-------------------------------------------------------------------------*/
span.bi {
  font-weight: bold;
  font-style: italic;
}
span.ul {
  text-decoration: underline;
}
span.bu {
  text-decoration: underline;
  font-weight: bold;
}
span.iu {
  text-decoration: underline;
  font-style: italic;
}
span.ubi {
  text-decoration: underline;
  font-weight: bold;
  font-style: italic;
}

/*-------------------------------------------------------------------------
 * Custom roles:  a few "nifties" selected from Docutils `s5defs.txt`.
 * These use `custom_roles.txt` to set up roles using these class names.
 *-------------------------------------------------------------------------*/
/* Colors */
span.black       {color: black;  }
span.white       {color: white;  }
/* Grays in order from light to dark */
span.lightgray   {color: gray;   } /* synonym of lightgray */
span.silver      {color: silver; }
span.darkgray    {color: gray;   } /* synonym of darkgrey */
span.gray        {color: gray;   } /* synonym of grey */
span.dimgray     {color: gray;   } /* synonym of dimgray */
/* Basic colors in roughly color-wheel order */
span.red         {color: red;    }
span.pink        {color: pink;   }
span.orange      {color: orange; }
span.gold        {color: gold;   }
span.yellow      {color: yellow; }
span.olive       {color: olive;  }
span.lime        {color: lime;   }
span.yellowGreen {color: yellowGreen;  }
span.green       {color: green;  }
span.aqua        {color: aqua;   } /* synonym of cyan */
span.cyan        {color: cyan;   } /* synonym of aqua */
span.teal        {color: teal;   }
span.navy        {color: navy;   }
span.blue        {color: blue;   }
span.purple      {color: purple; }
span.fuchsia     {color: fuchsia;} /* synonym of magenta */
span.magenta     {color: magenta;} /* synonym of fuchsia */
span.maroon      {color: maroon; }

/*-------------------------------------------------------------------------
 * Custom roles:  ideas generated from s5defs.txt above.
 * These use `custom_roles.txt` to set up roles using these class names.
 *-------------------------------------------------------------------------*/
/* Text Sizes */
/* Absolute */
span.tiny    {font-size: xx-small; }
span.small2  {font-size: xx-small; }
span.small1  {font-size: x-small;  }
span.small   {font-size: small;    }
span.medium  {font-size: medium;   }
span.large   {font-size: large;    }
span.large1  {font-size: x-large;  }
span.large2  {font-size: xx-large; }
span.large3  {font-size: xxx-large;}
span.huge    {font-size: xxx-large;}

/* Relative */
span.smaller {font-size: smaller;  }
span.larger  {font-size: larger;   }

/* Outlines, Buttons and Keys, e.g. to depict buttons and keys embedded in text. */
span.outline   {
  outline: 1px solid;
  border-radius: 2px;
  padding: 1px;
}
span.outline3d {
  outline: 4px ridge rgb(170 170 170 / 0.6);
  border-radius: 1px;
  padding: 1px;
}
span.outline3d2 {
  outline-style: groove;
  outline-width: 4px
  padding: 1px;
}
span.button  {
  padding: 4px 9px;
  border: none;
  border: 0;
  transition: all 150ms ease-in-out;
  font-weight: 600;
  color: #000;
  border-radius: 5px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.00) 70.48%,
      #FFF 93.62%,
      rgba(255, 255, 255, 0.00) 100%
    ),
    linear-gradient(
      180deg,
      rgba(30, 54, 87, 0.00) 0%,
      rgba(30, 54, 87, 0.01) 100%
    ),
    #FAFAFA
    ;
  box-shadow:
          0px  0px 0px  1px rgba(  0,   0,   0, 0.08),
    inset 0px -2px 1px  0px rgba(  0,   0,   0, 0.08),
    inset 0px  2px 1px  0px rgba(255, 255, 255, 0.50),
          0px  2px 5px -1px rgba(  0,   0,   0, 0.05),
          0px  1px 3px -1px rgba(  0,   0,   0, 0.30)
    ;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
}
span.button:hover {
  background-color: #E0E0E0;
}
span.button:active {
  background-color: #F1F1F1;
  box-shadow:
          0px 0px 0px  1px rgba(  0,   0,   0, 0.08),
    inset 0px 1px 1px  0px rgba(  0,   0,   0, 0.08),
    inset 0px 2px 1px  0px rgba(255, 255, 255, 0.10),
          0px 2px 5px -1px rgba(  0,   0,   0, 0.05)
    ;
}
html[data-theme="dark"] span.button:hover {
  background-color: #D0D0D0;
}
html[data-theme="dark"] span.button:active {
  background-color: #F1F1F1; /*#008DF4;*/
  /* box-shadow -- multiple shadows separated by commas.
   * 4 length values:  offset-x, offset-y, blur-radius, spread-radius
   * inset moves shadow inside border, and
   * color can be anywhere.
   */
  box-shadow:
          0px 0px 0px  1px rgba(  0, 141, 244, 0.28),
    inset 0px 2px 4px  0px rgba(  0, 141, 244, 0.48),
    inset 0px 2px 1px  0px rgba(255, 255, 255, 0.20),
          0px 2px 4px -1px rgba(  0, 141, 244, 0.95)
    ;
}

/*-------------------------------------------------------------------------
 * Headings Below Level 6
 *-------------------------------------------------------------------------*/
h6[aria-level="7"] { font-size: small;                                    }
h6[aria-level="8"] { font-size: small; text-decoration: underline;        }
h6[aria-level="9"] { font-size: small; text-decoration: underline dotted; }

/*-------------------------------------------------------------------------
 * From `pygments.css` (for color names reference, sorted alphabetically)
 *-------------------------------------------------------------------------*/
/* .highlight      { background: #ffffff; color: #24292F } */
/* .highlight .hll { background-color: #0969da4a } */
/* .highlight .bp  { color: #953800 }     */ /* Name.Builtin.Pseudo */
/* .highlight .c   { color: #6E7781 }     */ /* Comment */
/* .highlight .c1  { color: #6E7781 }     */ /* Comment.Single */
/* .highlight .ch  { color: #6E7781 }     */ /* Comment.Hashbang */
/* .highlight .cm  { color: #6E7781 }     */ /* Comment.Multiline */
/* .highlight .cp  { color: #6E7781 }     */ /* Comment.Preproc */
/* .highlight .cpf { color: #6E7781 }     */ /* Comment.PreprocFile */
/* .highlight .cs  { color: #6E7781 }     */ /* Comment.Special */
/* .highlight .dl  { color: #0550AE }     */ /* Literal.String.Delimiter */
/* .highlight .err { color: #CF222E }     */ /* Error */
/* .highlight .fm  { color: #0550AE }     */ /* Name.Function.Magic */
/* .highlight .gd  { color: #0550AE }     */ /* Generic.Deleted */
/* .highlight .ge  { font-style: italic } */ /* Generic.Emph */
/* .highlight .gh  { color: #0550AE }     */ /* Generic.Heading */
/* .highlight .gr  { color: #CF222E }     */ /* Generic.Error */
/* .highlight .gs  { font-weight: bold }  */ /* Generic.Strong */
/* .highlight .gu  { color: #0550AE }     */ /* Generic.Subheading */
/* .highlight .il  { color: #953800 }     */ /* Literal.Number.Integer.Long */
/* .highlight .k   { color: #CF222E }     */ /* Keyword */
/* .highlight .kc  { color: #0550AE }     */ /* Keyword.Constant */
/* .highlight .kd  { color: #CF222E }     */ /* Keyword.Declaration */
/* .highlight .kn  { color: #CF222E }     */ /* Keyword.Namespace */
/* .highlight .kp  { color: #CF222E }     */ /* Keyword.Pseudo */
/* .highlight .kr  { color: #CF222E }     */ /* Keyword.Reserved */
/* .highlight .kt  { color: #CF222E }     */ /* Keyword.Type */
/* .highlight .l   { color: #953800 }     */ /* Literal */
/* .highlight .ld  { color: #953800 }     */ /* Literal.Date */
/* .highlight .m   { color: #953800 }     */ /* Literal.Number */
/* .highlight .mb  { color: #953800 }     */ /* Literal.Number.Bin */
/* .highlight .mf  { color: #953800 }     */ /* Literal.Number.Float */
/* .highlight .mh  { color: #953800 }     */ /* Literal.Number.Hex */
/* .highlight .mi  { color: #953800 }     */ /* Literal.Number.Integer */
/* .highlight .mo  { color: #953800 }     */ /* Literal.Number.Oct */
/* .highlight .n   { color: #8250DF }     */ /* Name */
/* .highlight .na  { color: #953800 }     */ /* Name.Attribute */
/* .highlight .nb  { color: #953800 }     */ /* Name.Builtin */
/* .highlight .nc  { color: #0550AE }     */ /* Name.Class */
/* .highlight .nd  { color: #953800 }     */ /* Name.Decorator */
/* .highlight .ne  { color: #8250DF }     */ /* Name.Exception */
/* .highlight .nf  { color: #0550AE }     */ /* Name.Function */
/* .highlight .ni  { color: #116329 }     */ /* Name.Entity */
/* .highlight .nl  { color: #953800 }     */ /* Name.Label */
/* .highlight .nn  { color: #24292F }     */ /* Name.Namespace */
/* .highlight .no  { color: #0550AE }     */ /* Name.Constant */
/* .highlight .nt  { color: #116329 }     */ /* Name.Tag */
/* .highlight .nv  { color: #953800 }     */ /* Name.Variable */
/* .highlight .nx  { color: #8250DF }     */ /* Name.Other */
/* .highlight .o   { color: #116329 }     */ /* Operator */
/* .highlight .ow  { color: #8250DF }     */ /* Operator.Word */
/* .highlight .p   { color: #24292F }     */ /* Punctuation */
/* .highlight .pm  { color: #24292F }     */ /* Punctuation.Marker */
/* .highlight .py  { color: #0550AE }     */ /* Name.Property */
/* .highlight .s   { color: #0550AE }     */ /* Literal.String */
/* .highlight .s1  { color: #0550AE }     */ /* Literal.String.Single */
/* .highlight .s2  { color: #0550AE }     */ /* Literal.String.Double */
/* .highlight .sa  { color: #0550AE }     */ /* Literal.String.Affix */
/* .highlight .sb  { color: #0550AE }     */ /* Literal.String.Backtick */
/* .highlight .sc  { color: #0550AE }     */ /* Literal.String.Char */
/* .highlight .sd  { color: #0550AE }     */ /* Literal.String.Doc */
/* .highlight .se  { color: #0550AE }     */ /* Literal.String.Escape */
/* .highlight .sh  { color: #0550AE }     */ /* Literal.String.Heredoc */
/* .highlight .si  { color: #0550AE }     */ /* Literal.String.Interpol */
/* .highlight .sr  { color: #0550AE }     */ /* Literal.String.Regex */
/* .highlight .ss  { color: #0550AE }     */ /* Literal.String.Symbol */
/* .highlight .sx  { color: #0550AE }     */ /* Literal.String.Other */
/* .highlight .vc  { color: #953800 }     */ /* Name.Variable.Class */
/* .highlight .vg  { color: #953800 }     */ /* Name.Variable.Global */
/* .highlight .vi  { color: #953800 }     */ /* Name.Variable.Instance */
/* .highlight .vm  { color: #953800 }     */ /* Name.Variable.Magic */
/* .highlight .w   { color: #24292F }     */ /* Text.Whitespace */

/*-------------------------------------------------------------------------
 * Colors from MrDogeBro `dark.css` for dark mode colors that override
 * `pygments.css` colors.  The highlight colors that are NOT overridden
 * are the problem areas that generate the need to override them below.
 * https://github.com/MrDogeBro/sphinx_rtd_dark_mode/
 *-------------------------------------------------------------------------*/
/* html[data-theme="dark"] .highlight      { background-color: #17181c; } */
/* html[data-theme="dark"] .highlight .hll { background-color: #002c4d; } */
/* html[data-theme="dark"] .highlight .c1  { color: #686868; } */ /* Comment.Single */
/* html[data-theme="dark"] .highlight .k   { color: #41c2ea; } */ /* Keyword */
/* html[data-theme="dark"] .highlight .kc  { color: #41c2ea; } */ /* Keyword.Constant */
/* html[data-theme="dark"] .highlight .kn  { color: #41c2ea; } */ /* Keyword.Namespace */
/* html[data-theme="dark"] .highlight .nb  { color: #8bb8df; } */ /* Name.Builtin */
/* html[data-theme="dark"] .highlight .nn  { color: var(--dark-text-color); } */ /* Name.Namespace */
/* html[data-theme="dark"] .highlight .nt  { color: #ccb350; } */ /* Name.Tag */
/* html[data-theme="dark"] .highlight .nv  { color: #40ffff; } */ /* Name.Variable */
/* html[data-theme="dark"] .highlight .s1  { color: #b3e87f; } */ /* Literal.String.Single */
/* html[data-theme="dark"] .highlight .s2  { color: #b3e87f; } */ /* Literal.String.Double */

/*-------------------------------------------------------------------------
 * Overridden usually because highlight text (e.g. for code blocks) doesn't
 * have enough contrast to read, etc..  This is usually because the MrDogeBro
 * `dark.css` (https://github.com/MrDogeBro/sphinx_rtd_dark_mode) failed to
 * override certain colors used for highlighting by `pygments.css`.
 * Most of the original set were simply not addressed in `dark.css`.
 * Ordered alphabetically by secondary class name.
 *-------------------------------------------------------------------------*/
html[data-theme="dark"] .descname  .n   { color: #0a44de; } /* Name */
html[data-theme="dark"] .descname  .pre { color: #ccd285; } /* Name, class="pre", e.g. method names */
html[data-theme="dark"] .descclassname .pre { color: #31c9b1;} /* Name, class="pre", e.g. method names */

html[data-theme="dark"] .highlight      { color: #6EA2E1 }
html[data-theme="dark"] .highlight .no  { color: #4C78B0; } /* Name.Constant */
html[data-theme="dark"] .highlight .nc  { color: #f9ae57; } /* Name.Class */
html[data-theme="dark"] .highlight .nf  { color: #ccd285; } /* Name.Function */
html[data-theme="dark"] .highlight .nl  { color: #0043e2; } /* Name.Label */
html[data-theme="dark"] .highlight .p   { color: #677b75; } /* Punctuation */
html[data-theme="dark"] .highlight .s   { color: #4e7ab1; } /* Literal.String */

/* :menuselection: role text */
html[data-theme="dark"] span.menuselection {
  color: #141414;
  background: #8ca4b6;
}

/* :kbd: role text */
html[data-theme="dark"]
.rst-content :not(dl.option-list)   :not(dt):not(kbd):not(.kbd) > .kbd,
.rst-content :not(dl.option-list) > :not(dt):not(kbd):not(.kbd) > kbd
{
  color: #141414;
  background-color: #b0b0b0;
  border: 1px solid #777;
  box-shadow: 0 2px dimgrey;
  font-weight: 600;
}

/*-------------------------------------------------------------------------
 * Literal Text in Footnotes
 *-------------------------------------------------------------------------*/
html[data-theme="dark"] .rst-content aside.footnote-list aside.footnote code,
html[data-theme="dark"] .rst-content aside.footnote code {
  color: #a2a2a2;
}

/*-------------------------------------------------------------------------
 * Normal/Dark <aside class="sidebar">
 *-------------------------------------------------------------------------*/
.rst-content .sidebar {
  width:38%;
}
html[data-theme="dark"] .rst-content .sidebar {
  background:#17181f;
}
html[data-theme="dark"] .rst-content .sidebar .sidebar-title {
  background:#27282f;
}

/*-------------------------------------------------------------------------
 * Only Light / Only Dark
 * ----------------------
 * Images or any directive on which a :class: parameter can be used
 * (:class: is universal), can be hidden in light mode, or vice versa.
 *
 * The exception is ".. figure::" because of an apparent `docutils` but
 * that does not adorn the <figure> element with the specified class, but
 * only the <img> child element.  So when there is a caption, the
 * <figcaption> element that is a sibling to the <img> element shows up
 * regardless, which would not happen if the class were placed in the
 * <figure> element.
 *
 * To use this, simply do 2 of the directives:  one for light, and one for
 * dark.  Example:
 *
 * .. image:: _static/images/sphinx-events-flow-diagram_light.png
 *     :class: only-light
 *     :align: center
 *     :scale: 50%
 *     :alt:   Sphinx Core Events Flow
 *
 * .. image:: _static/images/sphinx-events-flow-diagram_dark.png
 *     :class: only-dark
 *     :align: center
 *     :scale: 50%
 *     :alt:   Sphinx Core Events Flow
 *-------------------------------------------------------------------------*/
html[data-theme="dark"] .only-light {
  display: none !important;
}

html[data-theme="light"] .only-dark {
  display: none !important;
}

/*-------------------------------------------------------------------------
 * Tighter Tables
 * -------------
 * Sphinx RTD Theme has profuse padding in its table cells, so much so
 * that large and many-columned tables become difficult to read and use.
 * To solve this, we introduce 7 levels of proportional table "tightening"
 * with increasingly reduced space and size.  The large number of options
 * here are for flexibility, giving the author the possibility of honing
 * his table to optimum readability for its context.
 *
 * RTD normal table styling is for <th> and <td> elements:
 *
 * .rst-content table.docutils td,   <=== effective selectors for tables
 * .rst-content table.docutils th,   <=== effective selectors for tables
 * .rst-content table.field-list td,
 * .rst-content table.field-list th,
 * .wy-table td,
 * .wy-table th {
 *   font-size: 90%;
 *   margin: 0;
 *   overflow: visible;
 *   padding: 8px 16px;              <=== this is what we are reducing.
 *     // top/bottom = 8px, left/right = 16px
 * }
 *
 * We make more compact tables by reducing the padding for the first 6, and
 * finally reducing the font size for the 7th.  Note that these are used by
 * putting the table within a ``container`` directive like this:
 *
 *     .. container:: tighter-table-N
 *
 *         table definition here
 *
 * where 'N' is an integer in the range [1-7], so that the table is wrapped
 * in a <div class="tighter-table-N"> element.
 *
 * Note that the table has to be indented past the leading `..` of the
 * directive in order to accomplish this, so that the table itself is
 * "the content" of the directive.
 *-------------------------------------------------------------------------*/
.rst-content .tighter-table-1 table.docutils th,
.rst-content .tighter-table-1 table.docutils td { padding: 7px 14px; }
.rst-content .tighter-table-2 table.docutils th,
.rst-content .tighter-table-2 table.docutils td { padding: 6px 12px; }
.rst-content .tighter-table-3 table.docutils th,
.rst-content .tighter-table-3 table.docutils td { padding: 5px 10px; }
.rst-content .tighter-table-4 table.docutils th,
.rst-content .tighter-table-4 table.docutils td { padding: 4px 8px; }
.rst-content .tighter-table-5 table.docutils th,
.rst-content .tighter-table-5 table.docutils td { padding: 3px 6px; }
.rst-content .tighter-table-6 table.docutils th { padding: 2px 2px; }
.rst-content .tighter-table-6 table.docutils td { padding: 2px 4px; }
.rst-content .tighter-table-7 table.docutils th { padding: 1px 1px; font-size: 70%; }
.rst-content .tighter-table-7 table.docutils td { padding: 1px 2px; font-size: 70%; }
/* The last 2 <th> elements have left/right padding smaller than <td>
 * so column headings have less of an impact on column width. */

/*-------------------------------------------------------------------------
 * Additional Whitespace Over Headerings
 * Base `margin-bottom` for RTD theme is effectively 1 `line-height` (24px),
 * so the `margin-top` top has to exceed that so that margin-overlapping
 * will make use of it.  24px == 1.5em.
 *-------------------------------------------------------------------------*/
h2 { margin-top: 2.4em; }
h3 { margin-top: 2.3em; }
h4 { margin-top: 2.2em; }
h5 { margin-top: 2.0em; }
h6 { margin-top: 1.8em; }

/*-------------------------------------------------------------------------
 * Field Lists
 *
 * RTD Theme Defaults:
 *
 * <dl>
 *    padding: 0;
 *    margin: 0;
 *    margin-bottom: 24px;
 *    Inherited from theme.css:  html.writer-html5 .rst-content dl.field-list
 *      display: grid;
 *      grid-template-columns: auto minmax(80%,95%);
 * <dt>
 *    margin-bottom: 0;
 *    Inherited from theme.css:  html.writer-html5 .rst-content dl.field-list > dt
 *      padding-left: 1rem;
 * <dd>
 *    margin-bottom: 0;
 *    Inherited from theme.css:  html.writer-html5 .rst-content dl.field-list > dt
 *      margin-bottom: 12px;
 *      margin-left: 24px;
 * <dl>
 * +---------------------------------------------------------------------+
 * |    <dt>                           <dd>                              |
 * |    +-------------------------+    +-------------------------------+ |
 * | mgn| pad+-------------------+| mgn| pad+-------------------------+| |
 * | 0  | 16 |                   || 24 | 0  |<p> content here </p>    || |
 * |    |    +-------------------+|    |    +-------------------------+| |
 * |    +-------------------------+    +-------------------------------+ |
 * |                                                                     |
 * |     ...                                                             |
 * |                                                                     |
 * +---------------------------------------------------------------------+
 *                                  mgn 24
 *
 * This looks a bit like an unintentional mix of padding and margins.
 * Since we are not dealing with any visible border, this design reverts to
 * using all margins and no padding.  It makes more sense to do it this way:
 *
 * +---------------------------------------------------------------------+
 * |     <dt>                             <dd>                           |
 * |     +----------------------------+    +---------------------------+ |
 * | mgn | pad+------------------+mgn | mgn| pad+---------------------+| |
 * | 1rem| 0  |                  |2rem| 0  | 0  |<p> content here </p>|| |
 * |     |    +------------------+    |    |    +---------------------+| |
 * |     +----------------------------+    +---------------------------+ |
 * |             mgn 0.5rem                       mgn 0.5rem             |
 * |     ...                                                             |
 * |                                                                     |
 * +---------------------------------------------------------------------+
 *                                  mgn 24
 *
 * Reason:  this handles space nicely when there is a multi-line paragraph
 * in the <dd> element and there needs to be a little whitespace between
 * list items over and above `line-height`, since otherwise the paragraphs
 * look "run together" (theme default).  The Margin below the <dt> element
 * keeps spacing consistent when the <dd> element is empty.
 *
 * The following 3 are equivalent for `line-height`:  normal == 1.25rem == 20px.
 *-------------------------------------------------------------------------*/
/* Control horizontal whitespace exclusively through the <dt> element.
 * Increase gap between list items when they are empty. */
html.writer-html5 .rst-content dl.field-list > dt {
  padding: 0;
  margin-right: 1.5em;
  margin-bottom: 0.5em;
  margin-left: 1em;
}
/* Increase gap between list items when they have multiple lines
 * and multiple paragraphs. */
html.writer-html5 .rst-content dl.field-list > dd {
  margin-bottom: 0.5em;
  margin-left: 0;
  line-height: 1.25em;
}
/* Make paragraph line height inside <dd> elements slightly more compact
 * than the RTD default (1.25rem == normal == 20px instead of 24px).
 * Increase gap between list items when they have multiple lines. */
html.writer-html5 .rst-content dl.field-list > dd > p {
  line-height: 1.25em;
}

/*-------------------------------------------------------------------------
 * Images
 *-------------------------------------------------------------------------*/
/* Put some space below images. */
img {
  margin-bottom: 1.4em;
}
/* ...except when the image is inside a figure when a caption is present. */
figure > img:not(:last-child)  {
  margin-bottom: 0.25em;
}

/*-------------------------------------------------------------------------
 * Thematic Breaks vs Heading/Footer Separators
 *
 * |hr| => <hr />
 * --------------
 * Full-width page separators.
 *
 * |hrtb| => <hr class="thematic-break" />
 * ---------------------------------------
 * Thematic breaks between between paragraph-level elements.  For example,
 * a change of scene in a story, or a shift of topic within a section.
 *-------------------------------------------------------------------------*/
hr {
  border: none;
  border-top: 1px solid var(--fbc-primary-text);
}
html[data-theme="dark"] hr {
  border: none;
  border-top: 1px solid var(--dark-text-color);
}
hr.thematic-break {
  border: none;
  border-top: 1px solid var(--fbc-primary-text);
  margin: 3rem auto;
  width: 40%;
}
html[data-theme="dark"] hr.thematic-break {
  border: none;
  border-top: 1px solid var(--dark-text-color);
  margin: 3rem auto;
  width: 40%;
}