/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/

.hljs {
  color: var(--offWhite); /* #24292e */
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #416fa4; /* #032f62 */
}

.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a;
}

.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: var(--offWhite); /* #24292e */
}

.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold;
}

.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f;
}

.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: var(--offWhite); /* #24292e */
  font-style: italic;
}

.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: var(--offWhite); /* #24292e */
  font-weight: bold;
}

.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4;
}

.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0;
}

.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
}

{{{appCSS}}}

html {
  --green: #61BB46;
  --yellow: #FDB827;
  --orange: #F5821F;
  --red: #E03A3E;
  --purple: #963D97;
  --blue: #009DDC;
  --lightGray: #b2b2b2;
  --darkGray: #282D30;
  --offWhite: #D8D4D4;

  --tagIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMyAyMiIgd2lkdGg9IjIzcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzPjxwYXRoIGQ9Ik0xMy4xMjgwNzM4LC0xLjg2ODA4NjcyIEw2LDQuMjk4NjQzMjcgTDYsMTkuNTY2ODc3NSBDNiwxOS44MzY4NjU4IDYuMjIzNjgyNiwyMC4wNTU3MzQ1IDYuNDk5MDc2ODUsMjAuMDU1NzM0NSBMMjAuNTAwOTIzMiwyMC4wNTU3MzQ1IEMyMC43NzY1NTU3LDIwLjA1NTczNDUgMjEsMTkuODMyOTg3MyAyMSwxOS41NjY4Nzc1IEwyMSw0LjI5ODY0MzI3IEwxMy44NzE5MjYyLC0xLjg2ODA4NjcyIEMxMy42NjY1MTcxLC0yLjA0NTc5MjkgMTMuMzI5MjYwNCwtMi4wNDIxMzk4MSAxMy4xMjgwNzM4LC0xLjg2ODA4NjcyIFogTTEzLjUsNy44MzM1MTIzMiBDMTQuNjA0NTY5Niw3LjgzMzUxMjMyIDE1LjUsNi45NTc5ODAzMiAxNS41LDUuODc3OTU2NzYgQzE1LjUsNC43OTc5MzMyMSAxNC42MDQ1Njk2LDMuOTIyNDAxMjEgMTMuNSwzLjkyMjQwMTIxIEMxMi4zOTU0MzA1LDMuOTIyNDAxMjEgMTEuNSw0Ljc5NzkzMzIxIDExLjUsNS44Nzc5NTY3NiBDMTEuNSw2Ljk1Nzk4MDMyIDEyLjM5NTQzMDUsNy44MzM1MTIzMiAxMy41LDcuODMzNTEyMzIgTDEzLjUsNy44MzM1MTIzMiBaIiBpZD0icGF0aC0xIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9Im1pdSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiPjxnIGlkPSJjb21tb25fdGFnXzJfZ2VuZXJhbF9wcmljZV9nbHlwaCI+PHVzZSBmaWxsPSIjOTk5OTk5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjUwMDAwMCwgOS4wMDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTMuNTAwMDAwLCAtOS4wMDAwMDApICIgeGxpbms6aHJlZj0iI3BhdGgtMSIvPjx1c2UgZmlsbD0ibm9uZSIgeGxpbms6aHJlZj0iI3BhdGgtMSIvPjwvZz48L2c+PC9zdmc+);
  --searchIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMy4wLjEgLS0+Cjxzdmcgd2lkdGg9IjgiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDggOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8cGF0aCBpZD0ic2VhcmNoIiBmaWxsPSIjYjJiMmIyIiBzdHJva2U9Im5vbmUiIGQ9Ik0gNy45OSA2LjkyOCBMIDUuODQ3IDQuNzg0IEMgNi4xMzYgNC4zMDggNi4zMDUgMy43NTEgNi4zMDUgMy4xNTQgQyA2LjMwNSAxLjQxMiA0Ljg5NSAwIDMuMTUyIDAgQyAxLjQxMSAwIDAgMS40MTIgMCAzLjE1NCBDIDAgNC44OTUgMS40MTIgNi4zMDUgMy4xNTMgNi4zMDUgQyAzLjc1IDYuMzA1IDQuMzA3IDYuMTM2IDQuNzgzIDUuODQ3IEwgNi45MjggNy45OTMgTCA3Ljk5IDYuOTI4IFogTSAxLjIwMyAzLjE1NCBDIDEuMjA1IDIuMDc3IDIuMDc3IDEuMjA1IDMuMTU0IDEuMjAzIEMgNC4yMyAxLjIwNSA1LjEwMiAyLjA3NyA1LjEwMyAzLjE1NCBDIDUuMTAxIDQuMjMgNC4yMjkgNS4xMDMgMy4xNTMgNS4xMDMgQyAyLjA3NSA1LjEwMyAxLjIwNSA0LjIzIDEuMjAzIDMuMTU0IFoiLz4KPC9zdmc+Cg==);
  --feedsIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMy4wLjEgLS0+Cjxzdmcgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJQYXRoIiBmaWxsPSIjYjJiMmIyIiBzdHJva2U9Im5vbmUiIGQ9Ik0gMzYuNzcgMTAxLjYxNDk5OCBDIDM2Ljc3IDExMS43Njg3NTMgMjguNTM4NzU1IDEyMCAxOC4zODUgMTIwIEMgOC4yMzEyNDUgMTIwIC0wIDExMS43Njg3NTMgMCAxMDEuNjE0OTk4IEMgLTAgOTEuNDYxMjQzIDguMjMxMjQ1IDgzLjIzMDAwMyAxOC4zODUgODMuMjMwMDAzIEMgMjguNTM4NzU1IDgzLjIzMDAwMyAzNi43NyA5MS40NjEyNDMgMzYuNzcgMTAxLjYxNDk5OCBaIi8+CiAgICA8cGF0aCBpZD0icGF0aDEiIGZpbGw9IiNiMmIyYjIiIHN0cm9rZT0ibm9uZSIgZD0iTSAtMS4wMzEgNjEgQyAzMS41MDIwMDEgNjEgNTcuOTY5MDAyIDg3LjQ2ODAwMiA1Ny45NjkwMDIgMTIwIEMgNTcuOTY5MDAyIDE1Mi41MzE5OTggMzEuNTAyMDAxIDE3OSAtMS4wMzEgMTc5IEMgLTMzLjU2Mzk5OSAxNzkgLTYwLjAzMDk5OCAxNTIuNTMxOTk4IC02MC4wMzA5OTggMTIwIEMgLTYwLjAzMDk5OCA4Ny40NjgwMDIgLTMzLjU2Mzk5OSA2MSAtMS4wMzEgNjEgTSAtMS4wMzEgMzggQyAtNDYuMzE5IDM4IC04My4wMzA5OTggNzQuNzEyOTk3IC04My4wMzA5OTggMTIwIEMgLTgzLjAzMDk5OCAxNjUuMjg3MDAzIC00Ni4zMTkgMjAyIC0xLjAzMSAyMDIgQyA0NC4yNTcgMjAyIDgwLjk2OTAwMiAxNjUuMjg3MDAzIDgwLjk2OTAwMiAxMjAgQyA4MC45NjkwMDIgNzQuNzEyOTk3IDQ0LjI1NyAzOCAtMS4wMzEgMzggWiIvPgogICAgPHBhdGggaWQ9InBhdGgyIiBmaWxsPSIjYjJiMmIyIiBzdHJva2U9Im5vbmUiIGQ9Ik0gMC4xNTQgMjMuMDQxIEMgNTMuNTAyOTk4IDIzLjA0MSA5Ni45MDM5OTkgNjYuNDQzMDAxIDk2LjkwMzk5OSAxMTkuNzkxIEMgOTYuOTAzOTk5IDE3My4xMzkwMDggNTMuNTAxOTk5IDIxNi41NDEgMC4xNTQgMjE2LjU0MSBDIC01My4xOTQgMjE2LjU0MSAtOTYuNTk2MDAxIDE3My4xMzkwMDggLTk2LjU5NjAwMSAxMTkuNzkxIEMgLTk2LjU5NjAwMSA2Ni40NDMwMDEgLTUzLjE5NCAyMy4wNDEgMC4xNTQgMjMuMDQxIE0gMC4xNTQgMC4wNDEgQyAtNjUuOTgyMDAyIDAuMDQxIC0xMTkuNTk2MDAxIDUzLjY1NTk5OCAtMTE5LjU5NjAwMSAxMTkuNzkxIEMgLTExOS41OTYwMDEgMTg1LjkyNTk5NSAtNjUuOTgyMDAyIDIzOS41NDEgMC4xNTQgMjM5LjU0MSBDIDY2LjI4OTAwMSAyMzkuNTQxIDExOS45MDM5OTkgMTg1LjkyNTk5NSAxMTkuOTAzOTk5IDExOS43OTEgQyAxMTkuOTAzOTk5IDUzLjY1NTk5OCA2Ni4yODkwMDEgMC4wNDEgMC4xNTQgMC4wNDEgWiIvPgo8L3N2Zz4K);

  background: var(--darkGray);

  font-family: -apple-system, Helvetica, BlinkMacSystemFont, "Roboto",
  "Oxygen", "Ubuntu", Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: calc(17 / 16 * 100%);  /*font size in pixels / (default font of 16px * 100%) */
  line-height: calc(24 / 17);       /*line height in pixels / font size in pixels */
  word-wrap: break-word;
  color: var(--offWhite);

  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga";
  /* -moz-osx-font-smoothing: grayscale; */
  -moz-font-feature-settings: “liga” on;

  scroll-behavior: smooth; /* Enables smooth scrolling for visiting anchor links */

  margin: 0 auto;
  max-width: 1000px;
  min-width: 320px;
}

.clear {width: 100%;clear: both;float: none;display: block;height: 0}

.small,
.caption {font-size: .75rem;
  color: #999;
  font-weight: 500;
}

.caption {
  line-height: 1.05;
  display: block;
  margin: 9px auto 24px;
  max-width: 600px;
  font-style: normal;
  text-align: center;
}

/* 29.3333 / 1.2933333 */
.wide.left .caption {margin-left: 22.680412113%}
.wide.right .caption {margin-right: 22.680412113%}


.right {float: right;}
.left {float: left;}

div {
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

header {
  margin: 48px auto 24px 180px;
  position: relative;
}

.temp-callout {
  position: absolute; 
  top: 1%; 
  right: 15%;
  z-index: 1000;  /* A high value ensures it is on top of other elements */
}

.temp-callout a {
  background-image: none;
}

body {margin: 0 4%; /* max-width: 60%; min-width: 600px; */}
/* .entry {margin: 48px 0 48px} */
.projectBlurb {margin: 3em 1em 4em}
.blogBlurb {font-weight: bold;font-size: .85rem;text-align: center}

.site-byline {
  color: #963D97;
  font-size: .65rem;
}

.site-tagline {
  color: var(--lightGray);
  font-size: smaller;
}

.logo-cursor {
  display: inline-block;
  width: 7px;
  height: .8em;
  border-radius: 1px;
  -webkit-animation: cursor 1s infinite;
  animation: cursor 1s infinite;
  background: var(--orange);
}

/* Standard keyframes definition */
@keyframes cursor {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* WebKit-specific keyframes for older versions of Chrome, Safari, etc. */
@-webkit-keyframes cursor {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.columned {
  column-count: 3;
}

.centered {
  display: block !important;
  margin: 0 auto !important;
  width: fit-content;
}

.archives {
  text-indent: -2em;
  padding-left: 2em;
}

/* LAYOUT */

#content {
  float: left;
  width: calc(95% - 166px);
}

.sidebar {
  float: right;
  /* margin-left: 5%; */
  width: 166px;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
}

.content-heading {
  float: left;
  position: sticky;
  top: 2em;
  max-width: 25%;
  margin-top: 20px;
  margin-bottom: 25px;
}

.content-body {
  float: right;
  max-width: 67%;
  margin: 8px 4%;
}

.margin {
  position: absolute;
  box-sizing: border-box;
  width: 29.3333%;
}

.margin blockquote {margin: 3px 0;color:#232323;padding: 3px 6px;font-size: .82rem;line-height:1.05;border: 1px solid rgba(0,0,0,0.1);border-left:4px solid rgba(0,0,0,0.2);background: rgba(0,0,0,0.05);}
.margin blockquote p {margin: 0}

.margin img,
.column img {margin-top: 6px}

.margin p {font-style: italic;font-size: 0.9em;margin-top: 0}
.margin h1, .margin h2, .margin h3 {margin-top:0}

.left.margin {
  left: -29.3333%;
  padding-right: 30px;
  text-align: right;
}

.right.margin {
  right: -29.3333%;
  padding-left: 30px;
}

.wide {
  width: 158.6666667%;
  margin-left: -29.3333333%;
  overflow: auto; /* collapse internal margins */
}

.wide.left, .wide.right {width: 129.3333333%;float: none;}
.wide.left {margin: 0 0 0 -29.3333333%}
.wide.right {margin: 0 -29.3333333% 0 0}

.column {
  box-sizing: border-box;
  float: left;
}

.column .caption {margin-bottom: 6px}

.column.two {
  width: 50%;
  padding-right: 12px;
}

.column.three {
  width: 33%;
  padding-right: 24px;
}

.column.two + .column.two {
  padding: 0 0 0 12px;
}

.column h1,
.column h2,
.column h3 {margin-bottom: -12px}

/* TEXT */

p, 
li,
details {
  color: var(--offWhite);
  position: relative;
  margin: 12px 0 16px;
  line-height: 1.75;
}

/* FOOTER */

#footer {
    padding-bottom:12px
}

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

.other-nav a,
.other-nav a:hover {
  background-image: none;
}

.other-nav a::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  color: var(--lightGray);
  font-weight: bold; /* Optional: more styling */
}

/* Prevent the footer text from wrapping weirdly on small screens */

.footer-subscribe {
	font-size: 14px;
	text-align: center;
	white-space: nowrap; /* Prevent text from wrapping */
}

.separator {
  display: inline; /* Ensure the separator remains inline */
}

.follow-jarrod {
  display: inline-block; /* Allows the span to be treated as a block element */
}

@media screen and (max-width: 377px) { /* Adjust the max-width as needed */
  .footer-subscribe {
    white-space: normal; /* Allow text to wrap when screen is smaller */
  }

  .separator {
    display: none; /* Hide the separator when follow-jarrod text wraps */
  }
}

/* TIP & COPYRIGHT */

#final-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 16px;
}

.footer-left {
	max-width: 140px;
	background-image: none;
}

.footer-right {
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* CARBON ADS */

.carbon-text {
  text-align: left;
  /*! padding-left: 10px; */
  font-size: .8em;
  color: var(--lightGray);
}

#carbonads a {
  background-image: none;
  color: unset;
}

.carbon-text:hover {
  opacity: unset;
}

.carbon-img:hover {
  opacity: unset;
}

#carbonads > span {
  display: block;
  align-items: center;
  max-width: 100%;
  margin: auto;
  padding: 16px;
}

#carbonads {
  flex-direction: column;
  position: relative;
  padding: unset;
  max-width: 360px;
  border-style: dashed;
  border-color: var(--lightGray);
  border-width: 2px;
  border-radius: 16px;
}

#carbonads .carbon-wrap {
  align-items: start;
}

#carbonads .carbon-poweredby {
  font-size: .7em;
  opacity: .5;
  display: block;
}

/* HEADINGS */

h1 {
	color: var(--orange);
	font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 700;
  margin-top: 0px !important;
  margin-bottom: 12px;
}

h2 {
	color: var(--green);
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 24px 0 12px}

  .shoutout__title,
  h3 {
	color: var(--purple);
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 24px 0 12px}

h4, h5, h6 {font-size: 1.1rem;font-weight: bold;margin: 24px 0 12px}

h4 {color: var(--red)}

h5 {color: var(--yellow)}

h6 {color: var(--blue)}

blockquote {
  margin: 0 1em 0 0.25em;
  /* border-left: 1px #b2b2b2 solid; PLAIN-LEFT-BORDER*/
  padding: 0 0 0 .75em;
  border-style: solid;
  border-width: 0px 0px 0px 2px;
  border-image: linear-gradient(to bottom, var(--green), var(--yellow), var(--orange), var(--red), var(--purple), var(--blue)) 1;
}

blockquote p,
blockquote li,
blockquote details {
    font-size: .95rem;
    color: var(--lightGray);
}

/*
p .small-caps,
li .small-caps {
  font-family: "Georgia Pro SC";
}*/

big {color: #000;font-size: 1.9rem;line-height: 2;display: block;}

figcaption {
  font-size: .75rem;
  color: #999;
  font-weight: 500;
  display: block;
  margin: 5px auto 24px;
  max-width: 90%;
  font-style: normal;
  text-align: center;
}

/* FOOTNOTES */

.footnotes {
  color: var(--lightGray);
  font-size: .85rem;
}

.footnote-ref,
.reversefootnote,
.footnote-back {
  background: none;
}

.footnote-back:hover,
.reversefootnote:hover, 
.footnote-ref:hover {
    background: none;
}

sup {
  vertical-align: super;
  font-size: small;
  line-height: 0
}

sup .footnote-ref::before,
.footnote-ref sup::before {
    content: "["
}

sup .footnote-ref::after,
.footnote-ref sup::after {
    content: "]"
}

/* LINKS */

a {
  color: unset;
  text-decoration: none;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 100% 0.07em;
  background-repeat: no-repeat;
  background-position: 0% 95%;
}

a:hover {
  opacity: .8;
}

.archives a:hover,
.columned a:hover,
.shortcut_entry a:hover,
center a:hover,
button a:hover,
li a:hover,
p a:hover {
	background-image: linear-gradient(to right, var(--green), var(--yellow), var(--orange), var(--red), var(--purple), var(--blue)); /* #004984 original blue */
	color: var(--blue);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  background-size: 0 0,0 0,0.07em 0.07em;
  background-position: 0% 90%, 100% 90%, 0% 98%;
  color: inherit;
  background-image: none;
}

a.tag {
  color: var(--yellow);
  padding-left: 1.33em;
  margin-right: 1em;
  background: var(--tagIcon) left center/0.94em no-repeat;
}

a.tag:hover {
  background: var(--tagIcon)left center/0.94em no-repeat;
}

/* RULE */

hr {
  width: 100%;
  margin: 20px auto 20px;
  border: none;
  border-bottom: 2px solid #dbcece; /*off white*/
  /*padding-bottom: 1.4em;*/ /*COMMENTED OUT TO REMOVE EXTRA SPACING AROUND HR ELEMENTS*/
  text-shadow: none;
  box-shadow: none;
}

hr.red {
  border-bottom: 2px solid var(--red);
}

#footer hr {
  border-bottom: double var(--red)
}

/* CODE */

code {
    display: inline-block;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: .85rem;
    padding: 3px;
    line-height: 1;
    background: #535353;
    border-radius: 3px;
}

pre code {
    display: block;
    padding: 1rem;
    line-height: 1.5em;
    background-color: black;
    border-radius: 8px;
    overflow:auto;
}

code:before,
code:after {
  letter-spacing: -0.5em;
  content: "\00a0";
}

/* TABLES */

table {
  display: block;
  width: auto;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
  font-size: .9rem;
  line-height: 1.4;
}

tr {box-sizing: border-box;border-top: 1px solid #ccc;padding: 0}
th, td {box-sizing: border-box;border: 1px solid #ddd;padding: 5px 12px 6px}

/* LISTS */

ul, ol {
  margin-left: 0;
  padding-left: 1.5em;
  list-style-position: outside;
  margin-bottom: 1.5em;
}

ul {list-style: disc;} /*'disc' is default dot, 'circle' is dot outline*/

ul ul, ol ul, ol ol, ul ol {margin-left: 1.33em;margin-bottom: 0}

li {
  margin: 0;
}

/* IMAGES */

img {
  max-width: 100% !important;
  height: auto;
  margin: auto;
  display: block;
}

.image {
  position: relative;
  height: 0;
  padding: 0 0 35.504201681%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.image img {width: 100%}

.image_container {display: block;}

.wide .image_container {margin: 0 auto}
.wide p {margin-top: 0}

figure {
  margin: 2rem 0;
}

/* VIDEOS & tweets */

iframe {width: 100%;}

/* Only apply vertical margin to direct
   descendants, prevents multi margins */
.entry > iframe {margin: 24px 0!important;}

video {
  max-width: 100%;
}

/* TWEETS */

.entry .twitter-tweet {margin-left:-16px!important}

/* MATH */

.katex  {font-size: 1.05em;}

/* HEADER */

#logo {
  font-weight: bold;
  display:block;
  font-size: 1.3rem;
  color: var(--orange);
  position: relative;
  text-shadow: none;
  background-image: none;
}

#logo img {position: absolute;width: 48px;left: -62px;}

#logo:hover {opacity: .8}
#logo img:hover {opacity: 0.8}

#logo img.rounded {width: 52px;border-radius: 50%;top: -2px;left: -64px}
#logo img:active {margin-top: 1px}

#logo, .site-tagline {
  margin: auto;
}

/* Nav links are underlined which affects their optical lineheight */

nav {
  padding: 2px;
  max-width: 90%;
  margin: auto 10% 24px 5%;
  display: block;
  /* border-bottom-style: dashed; */
  /* border-bottom-color: black; */
  /* border-bottom-width: 2px; */
  background-image: linear-gradient(to right, var(--green), var(--yellow), var(--orange), var(--red), var(--purple), var(--blue));
}

#top-nav {
  padding: 8px 0;
  margin: 0 1%;
  display: none;
  justify-content: space-around;
  font-size: 90%;
}

#top-nav a {
  background: none;
  text-shadow: none;
}

.nav a {
  color: var(--lightGray);
  background: none;
  text-shadow: none;
}

.nav a:hover {
  background-image: none;
}

.nav a[href="/blog"]:hover {
  color: var(--green)
}

.nav a[href="/blog"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--green);
}

.nav a[href="/projects"]:hover {
  color: var(--yellow)
}

.nav a[href="/projects"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--yellow);
}

.nav a[href="/now"]:hover {
  color: var(--orange)
}

.nav a[href="/now"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--orange);
}

.nav a[href="/about"]:hover {
  color: var(--red)
}

.nav a[href="/about"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--red);
}

.nav a[href="/social"]:hover {
  color: var(--purple)
}

.nav a[href="/social"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--purple);
}

.nav a[href="#more"]:hover {
  color: var(--blue)
}

.nav a[href="#more"]::before {
  content: "/\00a0"; /* `\00a0` adds a non-breaking space. */
  font-weight: bold; /* Optional: more styling */;
  color: var(--blue);
}

.nav a[href="/feeds"],
.nav a[href="/search"] {
  color: var(--lightGray);
  /*! font-weight: 500; */
  padding-left: 1.25em;
  background: var(--feedsIcon) no-repeat left center/100%;
  background-size: 0.88em;
  font-size: 90%;
}

.nav a[href="/search"] {
  background: var(--searchIcon) no-repeat left center/100%;
  background-size: 1em;
}

.nav a:hover {color: var(--green)}

input#search {
  font-size: 1.2em;
  color: #A4A9B0;
  padding: .5em 1em .5em 2.3em;
  background: var(--searchIcon) 1em center/0.8em no-repeat;
  border-radius: 3em;
  width: 85%;
  box-sizing: border-box;
  margin: .33em .66em .33em;
  border: 1px solid #A1ADB6;
}

input#search:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(100, 169, 226, 0.51);
  border: 1px solid #A1ADB6;
}

::-webkit-input-placeholder {
   color: #A4A9B0;
}

:-moz-placeholder { /* Firefox 18- */
   color: #A4A9B0;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #A4A9B0;
}

:-ms-input-placeholder {
   color: #A4A9B0;
}

.date {
	color: var(--yellow);
    margin-top: 10px;
    background: none;
}
.date:empty {display: none;}

/* Reset the spacing when date is not followed by an h1 tag */
.entry .date + p,
.entry .date + ul,
.entry .date + ol {position: relative;top: 9px;padding-bottom: 9px}

.entry .date + .wide {position: relative;top: 2.66em;padding-bottom: 2.66em}
.entry .date + .wide.right {position: relative;top: 0.66em;padding-bottom: 0.66em}
.entry .date + h2,
.entry .date + h3,
.entry .date + h4,
.entry .date + h5,
.entry .date + h6
 {position: relative;top: 9px;}

/* Pagination */
.pagination {
  text-align: center;
  /*margin: 36px 0 36px;*/
  font-size: 1.06rem;
  color: var(--red);
}

.pagination a {margin: 0 1em;background: none;color: var(--red)}

.previousEntry,
.nextEntry {
  text-decoration: none;
  background: none;
  text-shadow: none;
  font-size: 0.88em;
  line-height: 1.33;
  width: 48%;
  margin: 1em 0 1em 2%;
  color: var(--red);
  display: block;
  float: right;
  text-align: right
}

.previousEntry {
	margin: 1em 2% 1em 0;
  text-align: left;
  float: left;
}

.previousEntry h4, .nextEntry h4 {margin: 0 0 12px}

.adjacent a h5 {margin-bottom: 3px;color: #000}
.adjacent a .summary {color: #6B6B6B;font-size: .75rem;line-height: 1;}

.previousEntry .title,
.nextEntry .title {
  display: block;
  color: var(--orange);
  font-size: 1.15em;
  line-height: 1.25;
  margin-bottom: 3px
}

/* MICRO.BLOG TIMELINE */

.microblog_post footer,
.microblog_text p {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 75%;
}

.microblog_time {
  color: var(--yellow);
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 60%;
  text-align: right;
}

.microblog_post {
  background-color: black;
  border-radius: 8px;
  padding: 1px 10px 5px;
  margin: 4px auto;
}

#more-microposts {
  font-size: smaller;
  float: right;
}

/* SHOUTOUTS */

.shoutout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#shoutouts-footer {
  display: block;
  max-width: 500px;
}

/* Shoutouts Quotes Style */
.shoutout.shoutout__vtmY11vMnJxJDUPzuRtR {
	border: none;
  font-size: 85%;
	text-align: left;
	color: var(--lightGray);
	font-style: italic;
  margin: 24px auto;
  padding: 0;
	width: 100%;
}

/* BUTTONS */

/* Old button style
button {
  color: inherit;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 8px;
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to bottom right, #61BB46, #FDB827, #F5821F, #E03A3E, #963D97, #009DDC) 1;
  background: none;
  cursor: pointer;
} */

.button-container {
  display: flex;
  flex-wrap: wrap;
}

button,
.button {
  display: inline-block;
  color: var(--offWhite);
  font-size: 100%;
  margin: 8px;
  padding: 8px;
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to bottom right, #61bb46, #fdb827, #f5821f, #e03a3e, #963d97, #009ddc) 1;
  background: 0 0;
  background-color: black;
  cursor:pointer;
  transition: all  .2s ease-in-out;
  box-shadow: 4px 4px 0 0 var(--offWhite); /* Added box shadow */
}

button a,
a.button {
  background-image: none;
  color: var(--offWhite);
}

button a:hover,
a.button:hover {
  background-image: none;
  opacity: 100%;
}


button:hover,
.button:hover { 
  box-shadow: none; /* Remove box shadow on hover */
}

/* SHORTCUTS LIBRARY */

.shortcut_entry {
  font-size: 100%;
  margin: 1em .5em;
  padding: .5em;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-image: linear-gradient(to bottom right, #61bb46, #fdb827, #f5821f, #e03a3e, #963d97, #009ddc) 1;
  background:0 0
}

/* TINYLYTICS */

.tinylytics_kudos.did_select {
  font-weight: bold;
  color: var(--offWhite);
  background-color: black;
  cursor: default;
  box-shadow: none;
}

/*PENPAL LETTERS*/

.email {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  margin: 1rem 0;
  background: #000;
  border: 3px solid #eee;
  padding: .5rem 1rem;
}

.close_top {
  margin: -1.5rem 0 16px 0;
}

/* ASIDES */

.aside {
  border-radius: 8px;
  background-color: rgb(253, 184, 39, .06);
  border: dashed var(--yellow);
  padding: 1.5em 1.5em 0em;
  margin: 1em;
}

.aside::before {
  color: var(--yellow);
  content: 'AS AN ASIDE...';
  position: absolute;
  top: .5em;
  left: .75em;
  width: 100%;
  font-size: 20px;
  font-style: italic;
}

/*iPAD PORTRAIT*/
@media screen and (max-width: 1000px) {
  header {
    margin: 48px auto 24px 62px;
    position: relative;
  }

  .content-body {max-width: 100%; margin: auto;}

  .content-heading {
    max-width: 100%; 
    position: relative;
    top: auto; 
    margin-bottom: auto;}
  
  .entry .margin {position: relative;top: auto;left: auto;right: auto;bottom: auto;}

  .entry .margin.right {
    float: right;
  }

  .entry .margin.left {
    text-align: left;
    display: block;
    float: left;
  }

  .entry .date {width: 100%;}

  .entry .margin .caption,
  .entry .margin p {margin-bottom: 6px;text-align: left;}

  .wide, .wide.left, .wide.right {width: 100%;margin: 0}
  .wide.left .caption {margin-left: 0}

  .date {/*position: absolute;*/top: -24px;left: 0;text-align: left;margin: 0}

  /*HIDE SHOUTOUTS.LOL CONTAINER WHEN IN SMALL SIZE*/
  #shoutouts-margin {display: none;}
  #shoutouts-footer {display: block;}

  /*REMOVE LINE BREAK BETWEEN DATE & PERMALINK WHEN IN SMALLER DISPLAY SIZE*/
  /*#permalinkBreak {display: none;}*/
}

/*iPad Half+ Screen*/
@media screen and (max-width: 730px) {
  /*ul, li {margin-left: 24px}*/
  ul ul, ol ul, ol ol, ul ol {margin-left: 0}
  nav .right {clear: both;float: none;margin-top: 3px}
  a.search {margin-left: 0}
}

@media screen and (max-width: 615px) {
  /*Hide Search and RSS icons*/
  nav a[href="/feeds"],
  nav a[href="/search"] {display: none;}
  nav {max-width: 110%; margin: auto -5%; background: black; border-bottom: none;}
  #copyright {font-size: .7rem}
  #kofiTip {max-width: 175px}
  .sidebar {display: none;}
  #top-nav {display: flex;}
  #content {width: 100%;}
  .temp-callout {right: 0%}
}

@media screen and (max-width: 442px) {
  .entry .twitter-tweet {margin-left: 0!important}
  header {margin: 9px auto 20px 62px;}
  #top-nav {font-size: 80%;}
  #copyright {font-size: .56rem;margin: 0}
  #kofiTip {max-width: 140px}
  .columned {column-count: 2;}
}

/* .text-gradient {
  background: linear-gradient(to right, var(--green) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
} */