/* ================ PAGE ================ */

:root {
  /* Color scheme Dark*/
  --textColor: #bbb;
  --articleBGColor: #111111;
  --articleBorder: #414547;
  --articleShadowColor: #0a0a0a;
  --postColor: #1b1d1f;

  --quoteTextColor: #707070;
  --captionTextColor: #999;
  --textHighlightColor: #71caef;
  /* #b57e11; */
  --codeHighlightColor: #463b10;
  --codeHighlightTitleBG: #353535;

  --navColor: #27282c;
  --navTextColor: #bbb;

  --rawLinkColor: #71caef;
  --rawHighlightedLinkColor: #eee;

  --noteTextColor: #2c8cca;
  --noteBGColor: #062538;
  --noteBorderColor: #114464;
  --importantTextColor: #8250df;
  --importantBGColor: #281845;
  --importantBorderColor: #643dac;
  --warningTextColor: #9a6700;
  --warningBGColor: #312201;
  --warningBorderColor: #654300;
  --tipTextColor: #1e923f;
  --tipBGColor: #07240f;
  --tipBorderColor: #15692d;
  --cautionTextColor: #cf222e;
  --cautionBGColor: #3e0b0e;
  --cautionBorderColor: #9e1a23;

  /* Sizes */
  --navWidth: 9rem;
}

/* Laptops */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
  article .side-by-side:has(.project-table) {
    flex-direction: column;
  }
}

/* Tablets */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

  div:has(> .Banner) {
    padding: 0rem !important;
  }

  article {
    margin: 0rem !important;
  }

  article .side-by-side:has(.project-table) {
    flex-direction: column;
  }

  .Post-parent {
    box-shadow: none !important;
    margin: 0rem !important;
  }

  .NavBackground {
    box-shadow: none !important;
  }

  .Banner {
    display: block;
  }

  footer {
    height: 1.6rem;

  }

  .ArticleParent>article:nth-child(1) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  .Post-parent {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }

  .Post {
    flex-grow: 1;
    padding: 1rem 1rem 0.2rem 1rem !important;
  }
}

/* Large Phones */
@media only screen and (max-device-width: 768px) {

  .NavBackground {
    display: none;
  }

  nav {
    position: fixed !important;
    width: 100vw !important;
    justify-content: center;
    display: flex;
    padding: 0 !important;

    .ProfileImage {
      width: 2.2rem;
      position: fixed;
      right: 0%;
      top: 0%;
      clip-path: none;
    }

    /* .ProfileImage, */
    .NavTitle,
    .tocLinks,
    hr {
      display: none;
    }

    a {
      padding: 0.3rem 0.5rem !important;
    }
  }

  .ArticleParent {
    width: 100% !important;
    margin-top: 2rem;
  }

  article {
    margin: 0rem auto !important;
    height: calc(100dvh - 2rem) !important;
  }

  div:has(> .Banner) {
    padding: 0rem !important;
  }

  .Post-parent {
    box-shadow: none !important;
    margin: 0rem !important;
  }

  img.Banner {
    display: block;
  }

  footer {
    height: 1.6rem;
  }

  .post-date p {
    text-align: left !important;
  }

  .post-date {
    justify-content: left !important;
  }

  article .side-by-side {
    flex-direction: column;
  }

  article .side-by-side-center {
    flex-direction: column;
  }

  article .side-by-side-end {
    flex-direction: column;
  }

  article .example-block {
    flex-direction: column;
  }

  article .example-block>* {
    max-width: none !important;
  }

  .ArticleParent>article:nth-child(1) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  .Post-parent {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }

  .Post {
    flex-grow: 1;
    padding: 1rem 1rem 0.2rem 1rem !important;
  }

  .Post-parent img {
    max-width: calc(100vw - 2rem);
  }

  p>code {
    text-wrap: wrap !important;
    overflow-wrap: break-word;
  }

  .project-table {
    white-space: wrap !important;

    thead {
      display: none;
    }

    tr {
      display: block;
      float: left;
      margin-top: 1rem;
      width: 100%;
      border-radius: 1rem;
      padding-bottom: 0.5rem;
    }

    td {
      display: block;
      border: none !important;
      line-height: 1.4rem;
      padding: 0.5rem 0.75rem 0rem 0.75rem !important;
    }

    td:nth-child(1) {
      border-bottom: 0.2rem solid #27282c !important;
      font-weight: bold;
      padding-bottom: 0.25rem !important;
    }

    td:nth-child(2):not(:last-child) p {
      background: #74d;
      border-radius: 1rem;
      width: fit-content;
      padding-right: 1rem;
      padding-left: 0.5rem;
      color: var(--rawHighlightedLinkColor) !important;
    }

    td:nth-child(2) {
      p:has(span[data-emoji="seedling"]) {
        background: #272;
      }

      p:has(span[data-emoji="chestnut"]) {
        background: #566;
      }
    }

    td:nth-child(3) {
      display: none;
      padding: 0;
    }
  }
}

/* Phones */
@media only screen and (max-device-width: 480px) {
  .right_image {
    max-width: 100% !important;
  }
}

@media (prefers-color-scheme: none) {

  /* NOTE: Disabled light theme for now*/
  :root {
    /* Color scheme Light*/
    --textColor: #282828;
    --articleBGColor: #F2F2F2;
    --articleShadowColor: #cfcfcf;
    ;
    --postColor: #F2F2F2;

    --navColor: #cbcbcb;
    --navTextColor: #282828;

    --rawLinkColor: #0070a0;
    --rawHighlightedLinkColor: #eee;
  }
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-size: 1.05rem;
  font-family: "NunitoSans", sans-serif;
  color: var(--textColor);
  background-color: var(--articleBGColor);
  margin: 0 auto;
  display: flex;
}

a {
  color: var(--rawLinkColor);
  text-decoration: none;
}

/* Link colors */
a:link,
a:visited {
  color: var(--rawLinkColor);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--rawHighlightedLinkColor);
  text-decoration: underline;
}

:is(h1, h2, h3, h4, h5, h6) :is(a:hover, a:active, a:link, a:visited) {
  color: var(--textColor);
  text-decoration: none;
}

a[href*="//"]::after {
  mask-image: url(../images/external.svg), linear-gradient(transparent, transparent);
  mask-position: center center;
  mask-repeat: no-repeat;
  content: "";
  padding-left: 1rem;
  margin-left: 0.2rem;
  vertical-align: middle;
  background: var(--rawLinkColor);
}

a[href*="//"]:hover::after,
a[href*="//"]:active::after {
  background: var(--rawHighlightedLinkColor);
}

/* ================ NAV ================ */

.NavTitle {
  font-weight: bold;
}

/* Fix issues with firefox rubber-banding */
.NavBackground {
  position: fixed;
  width: var(--navWidth);
  height: 100vh;
  background-color: var(--navColor);
  box-shadow: 0rem 0rem 0.5rem 0.2rem var(--articleShadowColor);
  z-index: 0;
}

nav {
  /* --margin-top: 1rem; */
  position: sticky;
  width: var(--navWidth);
  /* margin-top: var(--margin-top); */
  top: 0;
  background-color: var(--navColor);
  text-align: center;
  z-index: 1;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: clip;
  padding-top: 1rem;
  scrollbar-width: none;
}

.ProfileImage {
  width: 80%;
  clip-path: circle(50%);
  aspect-ratio: 115 / 103;
}

a.sidebar:link,
a.sidebar:visited {
  display: flex;
  margin: 0rem;
  background-color: var(--navColor);
  color: var(--navTextColor);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 0rem 0.5rem;
}

a.sidebar:hover,
a.sidebar:active {
  background-color: var(--postColor);
  color: var(--rawLinkColor);
}

h3.sidebar {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

/* ================ ARTICLE ================ */

figure {
  display: flex;
  flex-flow: column;
  margin: auto;
}

figcaption,
caption {
  color: var(--captionTextColor);
  font-style: italic;
  font-size: 1rem;
  padding-bottom: 0.5rem;
  text-align: center;
}

figcaption>p {
  margin: 0;
}

caption {
  caption-side: bottom;
  margin-top: 0.3rem
}

.index-list input[type="radio"] {
  appearance: none;
  display: none;
}

[id^=radio]:checked~.highlighted {
  background: #fd9;
}

[class^=changelog-diff] {
  display: none;
}

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

pre.diff p.diff-header {
  background: #204550;
  margin: 0;
  padding: 0.5rem;
  overflow: clip
}

pre.diff {
  margin: 0;
}

pre.diff p.diff-content {
  padding: 0rem 0.5rem;
  overflow-x: auto;
  margin: 0;
  padding: 0.8rem;
}

pre.diff del {
  background-color: #502020;
  text-decoration: none;
}

pre.diff ins {
  background-color: #305030;
  text-decoration: none;
}

article p>code,
article a code,
article li code,
article td>code {
  font-size: 0.9rem;
  white-space: nowrap;
  background-color: #27282c;
  padding: 0.1rem 0.2rem;
  border: 1px solid #414547;
  border-radius: 0.16rem;
}

article table:not(.highlighttable) {
  margin: 0 auto;
  max-width: fit-content;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

article table.highlighttable th {
  color: #fefefe;
}

article table:not(.highlighttable) th {
  color: #fefefe;
  background-color: #27282c;
  padding: 0.16rem 1.2rem;
  border: 0.2rem solid #27282c;
}

article table:not(.highlighttable) td {
  padding: 0.16rem 1.2rem;
  border: 0.2rem solid #27282c;
}

article table:not(.highlighttable) tr {
  background-color: #363d40;
}

article table:not(.highlighttable) tr:nth-child(odd) {
  background-color: #2f3032;
}

table p {
  margin: 0
}

.project-table {
  white-space: nowrap;
  min-width: 100%;
}

.project-table>tbody>tr>td:last-of-type {
  width: 100%;
}

article .example-block {
  display: flex;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 0.5rem 0 0.8rem 0;
}

article .example-block>*:first-child {
  /* width: 50%; */
  flex: 1;
  background-color: var(--navColor);
  border-radius: 5px;
  max-width: calc(50% - 1rem);
}

article .example-block>*:first-child .highlight {
  background: none;
  color: var(--textColor);
  border: none;
}

article .example-block>*:last-child {
  margin: 1rem;
  /* align-content: center; */
  flex: 1;
  max-width: calc(50% - 1rem);
}

article .side-by-side {
  display: flex;
  /* flex-wrap: wrap; */
  /* align-items: center; */
  gap: 1rem;
}

article .side-by-side-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

article .side-by-side-end {
  display: flex;
  align-items: end;
  gap: 3rem;
}

footer {
  background: var(--navColor);
  padding-left: 1rem;
}

footer p {
  padding: 0.1rem;
}

article .side-by-side>*,
article .side-by-side-center>* {
  flex-grow: 1;
  overflow-x: clip;
  width: 100%;
  min-width: 0;
}

hr {
  width: 100%;
}

img {
  width: 100%;
}

.center {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  width: 100%;
}

/* Image at the top of the page */
div:has(>.Banner) {
  padding: 0rem 7rem;
}

img.Banner {
  width: 100%;
  object-fit: cover;
  /* object-position: 0rem -5rem; */
  box-shadow: 0rem 0rem 0.5rem 0.2rem var(--articleShadowColor);
  margin-top: 0rem;
  aspect-ratio: 900 / 150;
}

/* Div containing article */
.ArticleParent {
  width: calc(100% - 144px);
}

article {
  background-color: var(--articleBGColor);
  max-width: 100rem;
  margin: 2rem auto;
}

/* Text box after optional banner */
.Post {
  /* box-shadow: 0rem 0rem 0.5rem 0.2rem var(--articleShadowColor); */
  padding: 1rem 3rem 0.2rem 3rem;
  /* margin-top: 1rem; */
  /* background-color: var(--postColor); */
}

.Post-parent {
  box-shadow: 0rem 0rem 0.5rem 0.2rem var(--articleShadowColor);
  /* padding: 1rem 3rem 1rem 3rem; */
  background-color: var(--postColor);
  margin: 1rem 7rem 0rem 7rem;
}

.post-date {
  display: flex;
  align-items: center;
  justify-content: right;
}

.post-date p {
  text-align: right;
  margin: 0;
}

/* Table of contents in post */
.Post .toc {
  padding: 0.5rem;
  background-color: var(--navColor);
  border: 1px solid var(--articleBorder);
  border-radius: 2px;
  margin: 0.9rem 0;
  width: fit-content;
  list-style-type: none;
  font-size: 0.9rem;
}

.Post .toc>ul {
  padding-left: 0rem !important;
}

.Post .toc ul {
  padding-left: 1rem;
  margin: 0rem;
}

.Post .toc li {
  list-style-type: none;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

p+ul {
  margin-top: -0.3rem;
}

/* p {
  clear: both;
} */

/* Formatting for block quotes */
blockquote {
  border-left: 4px solid var(--textColor);
  font-family: 'Hack';
  font-size: 0.9rem;
  padding: 0 1rem;
  color: var(--quoteTextColor);
}

blockquote blockquote {
  font-family: 'Hack';
  padding-right: 0;
}

p,
blockquote,
table {
  margin: 0.8rem 0;
  margin-bottom: 0.5rem
}

/* Formatting for "index" style list */
div.index-list>ul {
  list-style-type: none;
  margin-left: -2rem;
  margin-top: 0.25rem;
}

/* Add continuos line to left of list */
div.index-list>ul>li:before {
  background-color: var(--textHighlightColor);
  width: 0.15rem;
  content: '';
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0.5rem;
}

div.index-list>ul>li {
  position: relative;
  margin: 0;
  padding-bottom: 0rem;
  padding-left: 1.2rem;
}

div.task-list>ul {
  list-style-type: none;
  margin-left: -1rem;

}

li>p {
  margin: 0;
}

/* Definitions */
dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

dl>* {
  padding-top: 0.5rem;
}

dt {
  width: 20%;
  font-weight: bold;
  text-align: right;
}

dd {
  width: calc(80% - 1rem);
  padding-left: 1rem;
  margin-left: 0rem;
}

/* Align the first paragraph with its definition */
dd>p {
  margin-top: 0rem;
}

/* Text highlighting */
.highlighted {
  font-family: 'Consolas';
  font-size: 1.1rem;
  overflow-x: auto;
  background: var(--textHighlightColor);
  color: var(--postColor);
  padding: 0.1rem 0.5rem;
  margin: 0.5rem;
  line-height: 2rem;
  border: solid 1px var(--articleBorder);
  border-radius: 3px;
}

/* Code highlighting */
.highlight {
  font-family: 'Consolas';
  font-size: 0.9rem;
  background: var(--navColor);
  border: solid 1px var(--articleBorder);
  border-radius: 3px;
  margin: 1rem 0rem;
}

.highlight>.highlighttable {
  width: 100%;
  margin: 0rem;
  /* padding: 0rem 1rem; */
  display: flex;
  border-collapse: collapse;
}

.highlight>.highlighttable a {
  color: inherit;
  /* color: var(--textColor); */
}

.highlight>.highlighttable tbody {
  width: inherit;
}

.highlight>.highlighttable tr {
  display: flex;
  gap: 0.5rem;
}

.highlight>.highlighttable th {
  padding: 0rem;
  flex-grow: 1;
}

.highlight>.highlighttable tr:last-of-type {
  padding: 0rem 0.5rem;
}


.no-linenos>.highlight .linenos {
  display: none;
}

.no-title>.highlight span.filename {
  display: none;
}

/* Highlighted line */
.highlight span.hll {
  background-color: var(--codeHighlightColor) !important;
}

.highlight span.filename {
  font-family: 'Consolas';
  font-size: 0.9rem;
  /* overflow-x: auto; */
  background: var(--codeHighlightTitleBG);
  padding: 0.5rem 0rem 0.5rem 1rem;
  /* width: calc(100% - 1rem); */
  /* display: block; */
  /* padding-left: 1rem; */
  display: flex;
  text-align: left;

}

td.linenos .normal {
  padding-left: 0rem !important;
}

.code {
  overflow-x: scroll;
}

article pre {
  margin: 0.2rem 0;
}

.Post .note p,
.Post .important p,
.Post .warning p,
.Post .tip p,
.Post .caution p {
  margin: 0.8rem 0;
}

/* Alerts */
.Post .note {
  color: var(--noteTextColor);
  background-color: var(--noteBGColor);
  border: 2px solid var(--noteBorderColor);
  border-radius: 5px;
  padding: 0rem 0.5rem;
  margin: 1rem 0rem;
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}

.Post .important {
  color: var(--importantTextColor);
  background-color: var(--importantBGColor);
  border: 2px solid var(--importantBorderColor);
  border-radius: 5px;
  padding: 0rem 0.5rem;
  margin: 1rem 0rem;
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}

.Post .warning {
  color: var(--warningTextColor);
  background-color: var(--warningBGColor);
  border: 2px solid var(--warningBorderColor);
  border-radius: 5px;
  padding: 0rem 0.5rem;
  margin: 1rem 0rem;
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}

.Post .tip {
  color: var(--tipTextColor);
  background-color: var(--tipBGColor);
  border: 2px solid var(--tipBorderColor);
  border-radius: 5px;
  padding: 0rem 0.5rem;
  margin: 1rem 0rem;
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}

.Post .caution {
  color: var(--cautionTextColor);
  background-color: var(--cautionBGColor);
  border: 2px solid var(--cautionBorderColor);
  border-radius: 5px;
  padding: 0rem 0.5rem;
  margin: 1rem 0rem;
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}

.Post .note:before {
  content: url(../images/note.svg);
  height: 1.5rem;
  width: 1rem;
  min-width: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.Post .important:before {
  content: url(../images/important.svg);
  height: 1.5rem;
  width: 1rem;
  min-width: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.Post .warning:before {
  content: url(../images/warning.svg);
  height: 1.5rem;
  width: 1rem;
  min-width: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.Post .tip:before {
  content: url(../images/tip.svg);
  height: 1.5rem;
  width: 1rem;
  min-width: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.Post .caution:before {
  content: url(../images/caution.svg);
  height: 1.5rem;
  width: 1rem;
  min-width: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

/* Footnotes */
section[role="doc-endnotes"]>ol>li[id^="fn"] {
  margin: 1rem;
}

/* ================ Tabs ================ */

.tabset {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tabset.center {
  justify-content: center;
}

.tabset>input[type="radio"] {
  display: none;
}

.tabset>input[type="radio"]:checked+.tab-label {

  margin-top: 0rem;
  padding-top: 0.5rem;
  border-bottom-width: 0rem;
  z-index: 1;
  margin-bottom: -1px;
  background-color: var(--navColor);
}

.tabset>input[type="radio"]:not(:checked)+.tab-label+.tab-content {
  display: none;
}

.tabset .tab-label {
  padding: 0.3rem 0.5rem;
  color: var(--textColor);
  background-color: var(--articleBorder);
  margin-right: 0.25rem;
  border: 1px solid var(--articleBorder);
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  /* outline: 1px solid var(--articleBorder); */
}

/* .tabset .tab-label::before {
  border: 1px solid var(--articleBorder);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
} */

.boxed {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.boxed::after {
  clear: both;
  display: block;
  content: "";
}

.right_image {
  float: right;
  max-width: 50%;
  margin-left: 1rem;
  width: 30rem;
}

.left_image {
  float: left;
  width: 30rem;
  margin-right: 1rem;
}

.tabset .tab-content,
.boxed {
  padding: 1rem;
  order: 99;
  width: 100%;
  display: block;
  background-color: var(--navColor);
  border: 1px solid var(--articleBorder);
  border-radius: 0.25rem;
  border-top-left-radius: 0rem;
  border-top-right-radius: 0rem;
}


.tabset.center .tab-content {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.tabset .tab-content.center {
  text-align: center;
}