:root {
    --font-size: 18px;
}

/* Set the values for dark/light preferences */
@media (prefers-color-scheme: dark) {
   :root {
      --col-50: #1B182B;
      --col-100: #21244A;
      --col-200: #1E3052;
      --col-300: #1D445E;
      --col-400: #134D56;
      --col-500: #3A87BB;
      --col-600: #8FA7D6;
      --col-700: #BCBFE1;
      --col-800: #DBD8E9;
      --col-900: #F0EDF3;
      --col-950: #F8F7F8;

      /* Links still have to be a shade of blue and a shade of magenta */
      --color-fg-link:             #99ccff;
      --color-fg-link-visited:     #ed58fb;

      --header-logo-img-invert-10: 10%;
      --header-logo-img-invert-20: 20%;
      --header-logo-img-invert-30: 30%;

    }

    .light-mode-image {
       display: none;
    }

    .dark-mode-image {
       display: block;
    }
}

@media (prefers-color-scheme: light) {
    :root {
      --col-50:  #fafafa;
      --col-100: #eeeeee;
      --col-200: #D6C6BD;
      --col-300: #C1BD9A;
      --col-400: #97AD7A;
      --col-500: #5D945B;
      --col-600: #64784A;
      --col-700: #424242;
      --col-800: #3C2D25;
      --col-900: #1C1113;
      --col-950: #100A0E;

      /* Links still have to be a shade of blue and a shade of magenta */
      --color-fg-link:             #039be5;
      --color-fg-link-visited:     #e040fb;

      --header-logo-img-invert-10: 0%;
      --header-logo-img-invert-20: 0%;
      --header-logo-img-invert-30: 0%;
    }

    .light-mode-image {
       display: block;
    }

    .dark-mode-image {
       display: none;
    }
}

:root {

   --color-bg-blockquote:       var(--col-100);
   --color-border-blockquote:   var(--col-400);
   --color-fg-blockquote:       var(--col-800);

   --color-bg-content:          var(--col-50);
   --color-fg-content:          var(--col-700);

   --color-bg-page:             var(--col-50);

   --color-bg-table:            var(--col-50);
   --color-fg-table:            var(--col-900);
   --color-bg-table-even:       var(--col-50);
   --color-bg-table-odd:        var(--col-100);
   --color-border-table:        var(--col-800);

   --color-bg-thead:            var(--col-50);
   --color-fg-thead:            var(--col-950);

   --color-bg-link-active:      var(--col-100);

   --color-fg-code:             var(--col-900);
   --color-bg-code:             var(--col-100);
   --color-border-code:         var(--col-400);

   --color-fg-header:           var(--col-800);
}

/* Small Phones */
@media (max-width:359px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 100%;
      --code-font-size: 0.9em;
      --font-size: 14px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 1.15em;
   }
}

/* Large Phones */
@media (min-width:360px) and (max-width:599px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 100%;
      --code-font-size: 0.9em;
      --font-size: 16px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 1.15em;
   }
}

/* Portrait Tablet */
@media (min-width:600px) and (max-width:899px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 60ch;
      --code-font-size: 0.9em;
      --font-size: 18px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 1.15em;
   }
}

/* Landscape Tablet */
@media (min-width:900px) and (max-width:1199px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 70ch;
      --code-font-size: 0.9em;
      --font-size: 18px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 1.15em;
   }
}

/* Desktop */
@media (min-width:1200px) and (max-width:1920px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 70ch;
      --code-font-size: 0.9em;
      --font-size: 20px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 18px;
   }
}

/* 4K screen */
@media (min-width:1921px) {
   :root {
      --toc-width: 100%;
      --body-max-width: 70ch;
      --code-font-size: 0.9em;
      --font-size: 24px;
      --h1-font-size: 1.25em;
      --h2-font-size: 1.2em;
      --h3-font-size: 1.15em;
   }
}

/* ************************************************ */

html {
   margin: auto;
   background-color: var(--color-bg-page);
}

body {
   vertical-align: middle;
   background-color: var(--color-bg-content);
   color: var(--color-fg-content);
   font-size: var(--font-size);
   line-height: 1.6em;
   font-family: Roboto;
   max-width: var(--body-max-width);
   padding: 2em;
   margin: 0 auto 0 auto;
   box-shadow: 0px 0px 20px 0px #464646ff;
}

a:link {
   color: var(--color-fg-link);
   border-style: none;
}

a:visited {
   color: var(--color-fg-link-visited);
   border-style: none;
}

a:active, a:hover, a:focus-visible {
   background-color: var(--color-bg-link-active);
}

a:active[class="tableOfContents"], a:hover[class="tableOfContents"] {
}

h1,
h2,
h3 {
   font-size: var(--h1-font-size);
   color: var(--color-fg-header);
   padding-top: 1.5ex;
   text-transform: lowercase;
}

h1 {
   text-align: right;
   text-transform: lowercase;
}

h2 {
   font-size: var(--h2-font-size);
}

h3 {
   font-size: var(--h3-font-size);
}

p {
   text-indent: 1.5em;
}

li {
   padding-bottom: 1.0ex;
}

.sourceCode:first-child {
   padding-left: 0;
}

.sourceCode  {
   font-size: var(--code-font-size);
   overflow: scroll;
   line-height: 1.25ex;
}

.sourceCode > * {
   padding-left: 0.5em;
   padding-right: 0.5em;
}

table {
   margin-left: auto;
   margin-right: auto;
   border-collapse: separate;
   border-color: var(--color-border-table);
   border-spacing: 0px 0.25em;
   background-color: var(--color-bg-table);
   color:            var(--color-fg-table);
}

thead {
   background-color: var(--color-bg-thead);
   color: var(--color-fg-thead);
}

th,
td {
   padding: 0.5em 2em 0.5em 2em;
}


tr[class="odd"] > td {
   background-color: var(--color-bg-table-odd);
}

tr[class="even"] > td {
   background-color: var(--color-bg-table-even);
}

tr:last-child > td {
   background-color: var(--color-bg-table-even);
   text-justify: center;
}

td:first-child {
}

td:last-child {
}


tr[class="odd"] {
}

tr[class="even"] {
}

.navbar {
   width: 100%;
   font-size: smaller;
   display: grid;
   grid-template-columns: auto auto auto;
   padding-bottom: 2ex;
   padding-top: 2ex;
}

.nav-prev {
   text-align: left;
}

.nav-up {
   text-align: center;
}

.nav-next {
   text-align: right;
}

code {
   font-size: var(--font-size);
   font-family: courier;
}

.tableOfContents {
   width: var(--toc-width);
   margin: 0 auto 0 auto;
   font-size: var(--h2-font-size);
   text-transform: lowercase;
   display: grid;
   grid-template-columns: 10em auto;
}

.tableOfContentsItem {
   text-align: left;
   padding: 1em 2em 1em 2em;
}

blockquote {
   font-style: italic;
   padding: 25px;
   color: var(--color-fg-blockquote);
   background-color: var(--color-bg-blockquote);
}

p > code, em > code, b > code {
   font-size: var(--code-font-size);
   color: var(--color-fg-code);
   background-color: var(--color-bg-code);
   border-style: solid;
   border-width: 1px;
   border-color: var(--color-border-code);
   padding-left: 0.5em;
   padding-right: 0.5em;
}

.filter--10 {
   filter: invert(var(--header-logo-img-invert-10));
}

.filter--20 {
   filter: invert(var(--header-logo-img-invert-20));
}

.filter--30 {
   filter: invert(var(--header-logo-img-invert-30));
}

.no--border {
   border-width: 0px;
}

img {
   max-width: 90%;
   margin: 0 auto 0 auto;
   display: block;
}

.caption {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-align: center;
}

figure {
   max-width: 90%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

figure > * {
   max-width: 90%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 0.75em;
}