/*
 * =====================================================
 * Default settings for all elements ('html' and 'body')
 * =====================================================
 */

* {
    box-sizing: border-box;
}

@font-face {
   font-family: "Nunito Sans";
   src: url("NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf")
}
@font-face {
   font-family: "Source Code Pro Medium";
   src: url("SourceCodePro-Medium.ttf")
}

:root {
   /* These variables are used in place of explicit colors */
   /* **Default to dark theme**. This helps with an uncomfortably bright white flash when new pages
    * are loaded w/ dark theme. A "black flash", on the other hand, isn't as consequential, as it's
    * a *decrease* in radiation, not a sudden increase. */
   --alt-heading-fg: #00cc29; /* #00ff33 (CRT green) darkened by 15% */
   --body-bg: black;
   --body-fg: antiquewhite;
   --button-bg: #202020;
   --button-fg: antiquewhite;
   --card-bg: #202020;
   --code-bg: black;
   --code-fg: silver;
   --code-var-fg: #ea3131;
   --current-selection: gold;
   --link-decoration: none;
   --link-fg: #00bfbf; /* #00ffff (cyan) darkened by 25% */
   --link-weight: 600;
   --current-toc-node: #cc8d00; /* #ffb000 (CRT amber) darkened by 20% */
   --main-heading-fg: #cc8d00; /* #ffb000 (CRT amber) darkened by 20% */
   --page-contents-width: 26rem;
   /* Other default settings */
   font-size: 10px; /* establishes the size of "1rem" */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 500;
}

/* Light theme colors */
:root.theme-light {
   --alt-heading-fg: darkgreen;
   --body-bg: #bdbdbd;
   --body-fg: black;;
   --button-bg: lightgray;
   --button-fg: black;
   --card-bg: #fff0f0;
   --code-bg: black;
   --code-fg: silver;
   --code-var-fg: red;
   --current-selection: gold;
   --link-decoration: underline gray;
   --link-fg: #605e9d; /* old silver */
   --link-weight: 740;
   --main-heading-fg: #5a4fcf;
}

/* Links */
a, a.visited {
   color: var(--link-fg);
   text-decoration: var(--link-decoration);
   font-weight: var(--link-weight);
}

img {
   max-width: 100%;
}

img.logo {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

code em {
   color: var(--code-var-fg);
}

pre {
   background-color: var(--code-bg);
   padding: 1.0rem;
   color: var(--code-fg);
   overflow: auto;
}

/* Headings */

h1 {
   font-size: 3.2rem;
   color: var(--main-heading-fg);
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   font-family: "Source Code Pro Medium", monospace;
   text-align: center;
}

h2 {
   font-size: 2.6rem;
   color: var(--alt-heading-fg);
}

h3 {
   font-size: 2.4rem;
   color: var(--alt-heading-fg);
}

h4 {
   font-size: 2.0rem;
   color: var(--alt-heading-fg);
}

h5 {
   font-size: 1.6rem;
   font-weight: bold;
   color: var(--alt-heading-fg);
}

/* header links */

a.headerlink {
   opacity: 50%;
   font-size: 1.2rem;
   vertical-align: super;
   text-decoration: none;
   margin-left: 0.6rem;
}

h1 > a.headerlink {
   /* turn off headerlinks for <H1> elements (the page title) */
   display: none;
}

a.headerlink:hover {
   opacity: 100%;
}

div#tools {
   z-index: 10;
   position: absolute;
   right: 2rem;
   top: 0.5rem;
}

button#theme-switch {
   border: 0px;
   padding: 0.3rem;
   background-color: inherit;
}

button#theme-switch > img {
   position: relative;
   top: 0px;
   right: 0px;
   display: none;
}

button#theme-switch > img#theme-dark-img {
   filter: brightness(0) saturate(100%) invert(92%) sepia(16%) saturate(571%) hue-rotate(320deg) brightness(105%) contrast(96%);
   display: block;
}

html.theme-light button#theme-switch > img#theme-light-img {
   display: block;
}

html.theme-light button#theme-switch > img#theme-dark-img {
   display: none;
}

/*
 * ===============================
 * Structural elements on the page
 * ===============================
 */

.sphinxsidebar ul, #contents ul {
   padding-left: 2rem;
}

.sphinxsidebar ul > * {
   /* ul contents are hidden by default */
   display: none;
}

.sphinxsidebar ul.current > li {
   /* Display list items within a "current" ul */
   display: list-item;
}

.sphinxsidebar li.current > ul > li {
   /* Display list items within a "current" ul */
   display: list-item;
}

.sphinxsidebar li.current > ul > li {
   /* Display list items within a "current" ul */
   display: list-item;
}

.sphinxsidebarwrapper > div > ul > li {
   /* Display list items within a "current" ul */
   display: list-item;
}

.sphinxsidebar a, #contents a {
   font-weight: normal;
}

.sphinxsidebar li.current > a {
   color: var(--current-toc-node);
}

.sphinxsidebar li.current > a.current {
   font-weight: bold;
}

/* Relbar styling */

/* This is the Sphinx "relbar" navigation bar */
div.related {
}

/* The relbar title */
div.related > h3 {
}

/* The list of links */
div.related > ul {
}

/* Common styling for all the links in the relbar */
div.related > ul > li {
}

/* These are the 'index', 'next', and 'previous' links */
div.related > ul > li.right {
}

/* These are the 'breadcrumbs' to the current page. */
div.related > ul > li.nav-item {
}


/* Content structure */

body {
   font-size: 1.6rem; /* default font size for body elements */
   background-color: var(--body-bg);
   color: var(--body-fg);
   margin: 0px;
}

/* This represents the main content of the page. */
div.document {
}

/* The first div within the 'document' is just a wrapper for the 'body' */
div.documentwrapper {
}

/* The body of the document. It contains any 'section' elements */
div.body {
}

/* Each section on the page is wrapped by this */
div.section {
}

/* The 'sphinxsidebar'. It contains the main navigation for the page, starting with the logo and
 * then the table of contents. */
div.sphinxsidebar {
   background-image: linear-gradient(var(--body-bg), 15%, var(--card-bg), 85%, var(--body-bg));
}

/* Search form */
form input {
   background: var(--body-bg);
   color: var(--body-fg);
   border: 2px solid #444;
   border-radius: 3px;
}

/*
 * ======================
 * Responsive breakpoints
 * ======================
 */

@media screen and (min-width: 800px) {
   div.document {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 30rem 1fr;
      grid-gap: 2rem;
      height: 100vh;
   }

   /* The list of links */
   div.related > ul {
      display: flex;
      flex-flow: row wrap;
      padding-left: 0rem;
   }

   div.sphinxsidebar {
      grid-row: 1;
      grid-column: 1;
      background-image: linear-gradient(var(--body-bg), 15%, var(--card-bg), 85%, var(--body-bg));
      overflow: auto;
   }

   div.documentwrapper {
      grid-row: 1;
      grid-column: 2;
      border-radius: 0.7em;
      padding: 4rem 6rem 4.5rem 6rem;
      background-image: linear-gradient(var(--body-bg), 15%, var(--card-bg), 85%, var(--body-bg));
      overflow: auto;
   }

   nav#contents {
      display: inline-block;
      float: right;
      height: calc(100vh - 4rem);
      overflow: auto;
      width: 24rem;
      z-index: 5;
   }

   div.bodywrapper {
      margin: 0;
   }

   div.body > section > * {
      margin-right: var(--page-contents-width);
   }

   div.body > section > h1 {
      margin-right: auto;
      padding-right: 2rem;
      display: inline-block;
   }

   /*
   div.body > section > h1.collapsed {
      position: absolute;
      top: 4rem;
      right: 6rem;
      font-size: 2.0rem;
      width: var(--page-contents-width);
      padding: 0px 1rem 1rem 1rem;
      border-bottom: 2px solid gray;
   }
   */

   /*
   nav#contents.collapsed {
   }
   */

   div.body > section > #contents {
      margin-right: 0rem;
   }

   div.related {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
   }

   div.related > ul > li {
      display: inline-block;
      margin-left: 0.6rem;
   }

   /* Don't show the relbar title on desktop */
   div.related > h3 {
      display: none;
   }

   div.footer {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
   }

   h1 {
      margin-top: 0rem;
   }

   div.sphinxsidebar {
      padding: 0 2rem;
      border-radius: 0.7em;
   }

   div.sphinxsidebarwrapper {
      display: flex;
      flex-flow: column;
   }

   #searchbox {
      margin-left: auto;
      margin-right: auto;
   }
}