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

* {
    box-sizing: border-box;
}

@font-face {
   font-family: "Nunito Sans";
   src: url("NunitoSans-VariableFont_wght.ttf")
}
@font-face {
   font-family: "Source Code Pro";
   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. */
   --body-bg: black;
   --body-fg: antiquewhite;
   --card-bg: #202020;
   --card-border: 1px solid #FFFFFF32;
   --code-bg: black;
   --code-fg: silver;
   --code-var-fg: #ea3131;
   --alt-heading-fg: #00cc29; /* #00ff33 (CRT green) darkened by 15% */
   --button-bg: #202020;
   --button-fg: antiquewhite;
   --current-selection: gold;
   --current-toc-node: #cc8d00; /* #ffb000 (CRT amber) darkened by 20% */
   --footer-height: 3rem;
   --header-height: 5rem;
   --header-icon-height: 3rem;
   --link-decoration: none;
   --link-fg: #00bfbf; /* #00ffff (cyan) darkened by 25% */
   --link-weight: 600;
   --main-heading-fg: #cc8d00; /* #ffb000 (CRT amber) darkened by 20% */
   --page-contents-width: 26rem;
   --searchbox-border: 2px solid darkgreen;
   /* 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 {
   --body-bg: #bdbdbd;
   --body-fg: black;;
   --card-bg: #fff0f0;
   --code-bg: black;
   --code-fg: silver;
   --code-var-fg: red;
   --alt-heading-fg: darkgreen;
   --button-bg: lightgray;
   --button-fg: black;
   --current-selection: gold;
   --link-decoration: underline gray;
   --link-fg: #605e9d; /* old silver */
   --link-weight: 740;
   --main-heading-fg: #5a4fcf;
}

/* Header elements */
#siteheader {
   display: flex;
   height: var(--header-height);
   padding: 0.6rem 1rem;
}

#sitetitle {
}

span.sitename {
   font-size: 1.8rem;
   padding: 0.4rem;
   display: inline-block;
   vertical-align: top;
   font-family: "Source Code Pro", monospace;
   font-weight: 666;
   color: var(--alt-heading-fg);
}

#searchbox {
   margin-left: auto;
   margin-right: auto;
   padding: 0.6rem;
}

#searchinput {
   width: 312px;
}

/* 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: inline-block;
   height: 32px;
}

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", monospace;
   text-align: center;
}

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

h2 a {
   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 {
}

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
 * ===============================
 */

/* The 'sphinxsidebar'. It contains the main navigation for the page, starting with the logo and
 * then the table of contents. */

div.sphinxsidebar {
   font-size: 1.4rem;
}

div.sphinxsidebar li {
   list-style: none;
}

.sphinxsidebar ul, #contents ul {
   padding-left: 1.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;
}

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

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

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

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

div.sphinxsidebar p.caption {
   margin-top: 0.6rem;
   margin-bottom: 1rem;
   font-family: "Source Code Pro", monospace;
   color: var(--alt-heading-fg);
   font-weight: 600;
}


/* 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 */
   margin: 0px;
   color: var(--body-fg);
   background-image: linear-gradient(var(--body-bg), 15%, var(--card-bg), 85%, var(--body-bg));
}

/* This represents the main content of the page. */
div.document {
   padding: 1rem;
}

/* 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 {
}

/* Search form */
form input {
   background: var(--body-bg);
   color: var(--alt-heading-fg);
   border: var(--searchbox-border);
   border-radius: 10px;
   padding: 0.4rem 0.6rem;
   font-family: "Source Code Pro", monospace;
}

/* Sphinx-design elements */

.sd-card-body {
   border: 1px solid var(--alt-heading-fg);
   border-radius: 10px;
   padding: 0.6rem 1.0rem;
}

/* Ablog elements */

div.ablog__blog_comments {
   border-top: var(--card-border);
   margin-top: 3rem;
   padding-top: 2rem;
}

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

@media screen and (min-width: 800px) {
   /* The list of links */
   div.related > ul {
      display: flex;
      flex-flow: row wrap;
      padding-left: 0rem;
   }

   div.sphinxsidebar {
      grid-row: 1;
      grid-column: 1;
      overflow: auto;
      font-family: "Source Code Pro", monospace;
   }

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

   div.document {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 24rem 1fr;
      grid-gap: 2rem;
      height: calc(100vh - var(--header-height) - var(--footer-height));
   }

   div.documentwrapper {
      grid-row: 1;
      grid-column: 2;
      padding: 0px 4rem 0px 0px;
      overflow: auto;
   }

   nav#contents {
      border: var(--card-border);
      border-radius: 11px;
      background-color: var(--card-bg);
      padding-top: 0.7rem;
      padding-left: 1.4rem;
      padding-right: 0.7rem;
      display: inline-block;
      position: sticky;
      top: 0;
      float: right;
      overflow: auto;
      width: 24rem;
      z-index: 5;
      font-size: 1.4rem;
   }

   nav#contents::before {
      content: "On this page";
      position: relative;
      top: 0;
      display: block;
      font-family: "Source Code Pro", monospace;
      color: var(--alt-heading-fg);
   }

   nav#contents p > a.current {
      color: var(--current-toc-node);
   }

   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.footer {
      height: var(--footer-height);
      font-family: "Source Code Pro", monospace;
      color: var(--alt-heading-fg);
   }

   div.footer a {
      color: var(--alt-heading-fg);
      font-weight: 400;
      font-size: 1.4rem;
   }

   div.related {
      width: fit-content;
      padding: 0.6rem 1rem;
   }

   div.related > ul {
      margin: 0px;
   }

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

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


   h1 {
      margin-top: 0rem;
   }

}