/* use Andika - Regular in .woff format */
@font-face {
  font-family: Andika;
  src: url(andika/web/Andika-Regular.woff2);
}
/* use Andika - Italic in .woff2 format */
@font-face {
  font-family: Andika;
  font-style: italic;
  src: url(andika/web/Andika-Italic.woff2);
}
/* use Andika - Bold in .woff2 format */
@font-face {
	font-family: Andika;
	font-weight: bold;
	src: url(andika/web/Andika-Bold.woff2);
}
/* use Andika - Bold Italic in .woff2 format */
@font-face {
	font-family: Andika;
	font-weight: bold;
	font-style: italic;
	src: url(andika/web/Andika-BoldItalic.woff2);
}

/** Site wide styles */

html {
  background-color: #0E1114;   /* soft black */
  color: #D6D6D6;              /* warm light gray */
}

body {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
  font-family: Andika, sans-serif;
  letter-spacing: 0.033rem;
  word-spacing: 110%;
  font-feature-settings: "cv10" 1, "cv39" 1;
  line-height: 1.3;
  background-color: #0E1114;
  color: #D6D6D6;
}

h6 {
  font-size: 120%;
}

h5 {
  font-size: 130%;
}

h4 {
  font-size: 140%;
}

h3 {
  font-size: 150%;
}

h2 {
  font-size: 160%;
}

h1 {
  font-size: 170%;
}

h1, h2, h3, h4, h5, h6 {
  color: #F1F1E8;  /* warm off-white */
  padding-bottom: 0;
  margin-bottom: 0;
}

h2 {
  text-align: center;
}

tr:nth-child(even) {
  background-color: #161A1E;
}

a, a:visited, a:active {
  color: #8FAED1;   /* softened LUMS navy */
}

a:hover {
  color: #BFD7F0;
  text-decoration: none;
}

code, pre {
  background-color: #1B1F24;
  color: #E6E6E6;
  padding: 0.1em;
  margin: 0 0.1em 0 0.1em;
  white-space: pre-wrap;
  word-break: keep-all;
}
table {
  border-spacing: 0.2em;
}
em, strong {
  margin-right: 0.1em;
}

/** Title, Site Banner */
body>header hgroup {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
}

body>header hgroup>* {
  padding: 0 1ex;
  margin: 1ex 1ex 0 1ex;
}

body>header h1>a {
  color: #F1F1E8;
  text-decoration: none;
}

/** Primary site navigation */
header > nav > ul {
  margin: 1ex 0;
  padding: 0 0 0.5ex 0;
  list-style-type: none;
  border-bottom: 2px dashed #3A3F45;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
}
header > nav > ul > li {
  color: #D6D6D6;
  display: inline;
  font-size: large;
}
header > nav > ul > li + li {
  margin: 0 1ex;
  padding: 0;
}
header > nav > ul > li.active {
  font-weight: bold;
  color: #F1F1E8;
}

/** Pagination page contents */
#content > :first-child {
  margin-top: 0;
}

article>footer {
  font-size: smaller;
}

footer>p {
  font-size: smaller;
}

footer>address {
  font-size: smaller;
}

/** Site footer **/
footer#contentinfo {
  margin-top: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.4em;
  border-top: 2px dashed #3A3F45;
  color: #B8B8B8;
}

/** Post info time data **/
.post-info > .published::before {
  content: "Published on "
}
.post-info > .published {
  display: block;
}
.post-info > .modified::before {
  content: "Last Modified on "
}
.post-info > .modified {
  display: block;
}

.option1, .option2 {
  margin-top: 1lh;
  margin-bottom: 1lh;
  margin-left: 1em;
  padding-left: 1em;
  float: none;
}

.option1 {
  border-left: 1em solid #8C7A3E;  /* muted gold */
  background-color: #13171B;
}

.option2 {
  border-left: 1em solid #4B5563;  /* cool gray */
  background-color: #13171B;
}

p>img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/** Special **/

.warning {
  background-color: #1A1A1A;
  color: #FFF4B0;
  border-color: #E0C45C;
  border-image-source: repeating-linear-gradient(
    -45deg,
    #1A1A1A,
    #1A1A1A 10px,
    #E0C45C 10px,
    #E0C45C 20px
  );
}

/* === Code Highlighting: Dark Mode === */

.highlight {
  background-color: #161A1E;
  color: #D6D6D6;
}

/* Highlighted line */
.highlight .hll {
  background-color: #22262B;
}

/* Comments */
.highlight .c,
.highlight .ch,
.highlight .cm,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: #7FA3A3;
  font-style: italic;
}

/* Errors */
.highlight .err,
.highlight .gr {
  color: #FF6B6B;
  border: 1px solid #FF6B6B;
}

/* Keywords */
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kr,
.highlight .kt,
.highlight .nb,
.highlight .bp {
  color: #8CCF7E;
  font-weight: bold;
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: #C792EA;
}

/* Numbers */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
  color: #F78C6C;
}

/* Strings */
.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .sh,
.highlight .s1 {
  color: #E5C07B;
}

/* Escapes & regex */
.highlight .se,
.highlight .si,
.highlight .sr {
  color: #D19A66;
  font-weight: bold;
}

/* Names */
.highlight .na { color: #82AAFF; } /* Attribute */
.highlight .nc,
.highlight .nn,
.highlight .fm { 
  color: #61AFEF;
  font-weight: bold;
} /* Class / Namespace / Magic */
.highlight .nf { color: #61AFEF; } /* Function */
.highlight .no { color: #E06C75; } /* Constant */
.highlight .nd { color: #C678DD; } /* Decorator */
.highlight .ne { color: #E06C75; font-weight: bold; } /* Exception */
.highlight .nl { color: #E5C07B; } /* Label */
.highlight .nt { color: #98C379; font-weight: bold; } /* Tag */

/* Variables */
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.highlight .vm {
  color: #ABB2BF;
}

/* Output / prompts */
.highlight .go { color: #7F848E; }
.highlight .gp,
.highlight .gh,
.highlight .gu {
  color: #8FAED1;
  font-weight: bold;
}

/* Whitespace */
.highlight .w {
  color: #4B5263;
}