/* File containing the configuration variables that other stylesheets can depend on */
/* Background particle configuration */
/* Media query values */
/* Regular font definitions */
/* Main Layout Fonts */
/* Instead of importing custom web fonts, taking the same approach as Stack Overflow and
 * using a selection of native system fonts. 
 * Based on https://github.com/StackExchange/Stacks/blob/d76e32dad24ba0f8ae7c087c6f099f52a3e98a52/lib/css/exports/_stacks-constants-type.less ,
 * just not as LESS.
 */
/* Font setup */
/* Custom icon font */
/*
 * Icon set from https://icomoon.io/app/
 * 
 * Usage is like: <span class="icon-chevrons-down"></span>
 */
@font-face {
  font-family: "icomoon";
  src: url("/assets/fonts/icomoon/fonts/icomoon.eot?himhik");
  src: url("/assets/fonts/icomoon/fonts/icomoon.eot?himhik#iefix") format("embedded-opentype"), url("/assets/fonts/icomoon/fonts/icomoon.ttf?himhik") format("truetype"), url("/assets/fonts/icomoon/fonts/icomoon.woff?himhik") format("woff"), url("/assets/fonts/icomoon/fonts/icomoon.svg?himhik#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mastodon:before {
  content: "\e902";
  /* color: #3088d4; */
}

.icon-chevrons-down:before {
  content: "\e900";
}

.icon-chevrons-up:before {
  content: "\e901";
}

.icon-file-text:before {
  content: "\e903";
}

.icon-link:before {
  content: "\e905";
}

.icon-send:before {
  content: "\e907";
}

.icon-price-tags:before {
  content: "\e936";
}

.icon-envelop:before {
  content: "\e945";
}

.icon-calendar:before {
  content: "\e953";
}

.icon-link1:before {
  content: "\e9cb";
}

.icon-bookmarks:before {
  content: "\e9d3";
}

.icon-embed2:before {
  content: "\ea80";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-rss:before {
  content: "\ea9b";
}

.icon-github1:before {
  content: "\eab0";
}

.icon-stackoverflow:before {
  content: "\ead0";
}

/* Colour definitions */
/**
 * File containing all our colour definitions
*/
:root, [data-theme=default], [data-theme=light] {
  --colour-primary: hsl(240, 4%, 20%);
  --colour-secondary: #1282A2;
  --colour-tertiary: #42a8c0;
  /* color contrasts */
  --colour-bg: white;
  --colour-contrast-lower: hsl(0, 0%, 95%);
  --colour-contrast-low: hsl(240, 1%, 83%);
  --colour-contrast-medium: hsl(240, 1%, 48%);
  --colour-contrast-high: hsl(240, 4%, 20%);
  --colour-contrast-higher: black;
}

[data-theme] {
  background-color: var(--colour-bg);
  color: var(--colour-primary);
}

[data-theme=dark] {
  --colour-primary: hsl(0, 0%, 89%);
  --colour-secondary: #1282A2;
  --colour-tertiary: #42a8c0;
  /* color contrasts */
  --colour-bg: rgb(34, 39, 46);
  --colour-contrast-lower: hsl(240, 6%, 15%);
  --colour-contrast-low: hsl(252, 4%, 25%);
  --colour-contrast-medium: hsl(240, 1%, 57%);
  --colour-contrast-high: hsl(0, 0%, 89%);
  --colour-contrast-higher: white;
}

/* Common styles which are global to the site */
/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
  font-weight: 300;
}
@media (max-width: 1024px) {
  body {
    padding: 0 1em;
  }
}

h1 {
  font-size: calc(1.5rem + 3vw);
  line-height: 1em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 2rem;
  line-height: 1em;
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 1.4rem;
  }
}

h3 {
  font-size: 1.3rem;
}

h4, h5, h6 {
  font-size: 100%;
}

ul, ol {
  margin-left: 2em;
}

p {
  margin: 1em 0;
  line-height: 1.5em;
}

a {
  color: var(--colour-primary);
  transition-duration: 0.5s;
  text-decoration: underline;
}
a:hover {
  color: var(--colour-secondary);
}

figure {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 1em;
}

figure > pre, pre.highlight {
  overflow-x: auto;
  margin-left: -1em;
  margin-right: -1em;
  padding: 1em;
  border-radius: 1em;
}

blockquote {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 2.5em;
  margin-inline-end: 2.5em;
}

/* Our Theme Toggle switch styles. 
 * Based on https://www.w3schools.com/howto/howto_css_switch.asp
 */
.switch {
  /* The switch - the box around the slider */
  position: relative;
  display: inline-block;
  width: 1.75rem;
  height: 1rem;
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  background-color: var(--colour-contrast-high);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch input:checked + .slider {
  background-color: var(--colour-secondary);
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--colour-secondary);
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(0.75rem);
  -ms-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}
.switch .slider.round {
  border-radius: 1rem;
}
.switch .slider.round:before {
  border-radius: 50%;
}

/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.container .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 2rem 1rem 2rem;
  padding-bottom: 1rem;
  border-width: 0 0 0.25rem 0;
  border-style: solid;
  border-image: linear-gradient(to right, var(--colour-bg), var(--colour-contrast-low), var(--colour-secondary), var(--colour-contrast-low), var(--colour-bg)) 1;
}
@media only screen and (max-width: 767px) {
  .container .header {
    flex-direction: column;
    margin: 1rem 0;
  }
  .container .header .site-byline {
    text-align: center;
  }
}
.container .header ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .container .header ul {
    margin: 1rem 0;
  }
}
.container .header li {
  margin-left: 1em;
}
.container .post-title {
  margin-bottom: 2rem;
}
.container ul.social {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 1rem 0;
}
.container ul.social li {
  margin: 0 0.5rem;
}
.container ul.social a {
  text-decoration: none;
}
.container .post-meta {
  display: flex;
}
.container .post-meta .meta {
  margin: 0;
}
.container .post-meta .post-date {
  white-space: nowrap;
}
.container .post-grouping {
  margin-left: 1rem;
}
.container .post-grouping ul {
  display: inline;
  list-style: none;
  padding: 0px;
  margin-left: 0;
}
.container .post-grouping li {
  display: inline;
}
.container .post-grouping li::after {
  content: ",";
}
.container .post-grouping li:last-child::after {
  content: "";
}
.container hr.post-divider {
  background: radial-gradient(var(--colour-secondary), var(--colour-bg));
  border: 0;
  height: 5px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.container .post, .container .not-found .heading, .not-found .container .heading, .container .archives {
  max-width: 80ch;
  margin: 1rem auto;
}
.container .post img, .container .not-found .heading img, .not-found .container .heading img, .container .archives img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container a.post-link {
  text-decoration: none;
  font-size: 0.5em;
}
.container .post-series {
  padding: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0px 0px 10px 1px var(--colour-secondary);
  background: var(--colour-contrast-lower);
}
.container .site {
  /*	background*/
  background-color: var(--colour-bg);
  /* text */
  line-height: 1.5em;
  text-align: left;
  text-rendering: optimizelegibility;
  font-weight: 300;
  /* Sizing */
  margin: 5vh 2vw;
  padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .container .site {
    margin: 0;
  }
}

.highlight {
  background-color: #f8f8f8;
}
.highlight code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
}

.pagination {
  padding-top: 2em;
  text-align: center;
}
.pagination ul {
  list-style: none;
  max-width: 40ch;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.footer {
  padding: 2rem 0;
  text-align: center;
  margin-top: auto;
}
.footer p {
  margin: 0;
}

/* Syntax highlighting */
/* This is basically the output of
 * rougify style base16.solarized.light > _sass/_syntax_light.scss
 * but wrapped with the data-theme grouping
 */
[data-theme=default] .highlight table td {
  padding: 5px;
}
[data-theme=default] .highlight table pre {
  margin: 0;
}
[data-theme=default] .highlight, [data-theme=default] .highlight .w {
  color: #586e75;
}
[data-theme=default] .highlight .err {
  color: #002b36;
  background-color: #dc322f;
}
[data-theme=default] .highlight .c, [data-theme=default] .highlight .ch, [data-theme=default] .highlight .cd, [data-theme=default] .highlight .cm, [data-theme=default] .highlight .cpf, [data-theme=default] .highlight .c1, [data-theme=default] .highlight .cs {
  color: #657b83;
}
[data-theme=default] .highlight .cp {
  color: #b58900;
}
[data-theme=default] .highlight .nt {
  color: #b58900;
}
[data-theme=default] .highlight .o, [data-theme=default] .highlight .ow {
  color: #93a1a1;
}
[data-theme=default] .highlight .p, [data-theme=default] .highlight .pi {
  color: #93a1a1;
}
[data-theme=default] .highlight .gi {
  color: #859900;
}
[data-theme=default] .highlight .gd {
  color: #dc322f;
}
[data-theme=default] .highlight .gh {
  color: #268bd2;
  background-color: #002b36;
  font-weight: bold;
}
[data-theme=default] .highlight .k, [data-theme=default] .highlight .kn, [data-theme=default] .highlight .kp, [data-theme=default] .highlight .kr, [data-theme=default] .highlight .kv {
  color: #6c71c4;
}
[data-theme=default] .highlight .kc {
  color: #cb4b16;
}
[data-theme=default] .highlight .kt {
  color: #cb4b16;
}
[data-theme=default] .highlight .kd {
  color: #cb4b16;
}
[data-theme=default] .highlight .s, [data-theme=default] .highlight .sa, [data-theme=default] .highlight .sb, [data-theme=default] .highlight .sc, [data-theme=default] .highlight .dl, [data-theme=default] .highlight .sd, [data-theme=default] .highlight .s2, [data-theme=default] .highlight .sh, [data-theme=default] .highlight .sx, [data-theme=default] .highlight .s1 {
  color: #859900;
}
[data-theme=default] .highlight .sr {
  color: #2aa198;
}
[data-theme=default] .highlight .si {
  color: #d33682;
}
[data-theme=default] .highlight .se {
  color: #d33682;
}
[data-theme=default] .highlight .nn {
  color: #b58900;
}
[data-theme=default] .highlight .nc {
  color: #b58900;
}
[data-theme=default] .highlight .no {
  color: #b58900;
}
[data-theme=default] .highlight .na {
  color: #268bd2;
}
[data-theme=default] .highlight .m, [data-theme=default] .highlight .mb, [data-theme=default] .highlight .mf, [data-theme=default] .highlight .mh, [data-theme=default] .highlight .mi, [data-theme=default] .highlight .il, [data-theme=default] .highlight .mo, [data-theme=default] .highlight .mx {
  color: #859900;
}
[data-theme=default] .highlight .ss {
  color: #859900;
}

/* This is basically the output of
 * rougify style base16.solarized.dark > _sass/_syntax_dark.scss
 * but with a few changes:
 *
 * - wrapped with the data-theme grouping
 * - refrences to #002b36 replaced with "var(--colour-bg)"
 */
[data-theme=dark] .highlight table td {
  padding: 5px;
}
[data-theme=dark] .highlight table pre {
  margin: 0;
}
[data-theme=dark] .highlight, [data-theme=dark] .highlight .w {
  color: #93a1a1;
  background-color: var(--colour-bg);
}
[data-theme=dark] .highlight .err {
  color: var(--colour-bg);
  background-color: #dc322f;
}
[data-theme=dark] .highlight .c, [data-theme=dark] .highlight .ch, [data-theme=dark] .highlight .cd, [data-theme=dark] .highlight .cm, [data-theme=dark] .highlight .cpf, [data-theme=dark] .highlight .c1, [data-theme=dark] .highlight .cs {
  color: #657b83;
}
[data-theme=dark] .highlight .cp {
  color: #b58900;
}
[data-theme=dark] .highlight .nt {
  color: #b58900;
}
[data-theme=dark] .highlight .o, [data-theme=dark] .highlight .ow {
  color: #93a1a1;
}
[data-theme=dark] .highlight .p, [data-theme=dark] .highlight .pi {
  color: #93a1a1;
}
[data-theme=dark] .highlight .gi {
  color: #859900;
}
[data-theme=dark] .highlight .gd {
  color: #dc322f;
}
[data-theme=dark] .highlight .gh {
  color: #268bd2;
  background-color: var(--colour-bg);
  font-weight: bold;
}
[data-theme=dark] .highlight .k, [data-theme=dark] .highlight .kn, [data-theme=dark] .highlight .kp, [data-theme=dark] .highlight .kr, [data-theme=dark] .highlight .kv {
  color: #6c71c4;
}
[data-theme=dark] .highlight .kc {
  color: #cb4b16;
}
[data-theme=dark] .highlight .kt {
  color: #cb4b16;
}
[data-theme=dark] .highlight .kd {
  color: #cb4b16;
}
[data-theme=dark] .highlight .s, [data-theme=dark] .highlight .sa, [data-theme=dark] .highlight .sb, [data-theme=dark] .highlight .sc, [data-theme=dark] .highlight .dl, [data-theme=dark] .highlight .sd, [data-theme=dark] .highlight .s2, [data-theme=dark] .highlight .sh, [data-theme=dark] .highlight .sx, [data-theme=dark] .highlight .s1 {
  color: #859900;
}
[data-theme=dark] .highlight .sr {
  color: #2aa198;
}
[data-theme=dark] .highlight .si {
  color: #d33682;
}
[data-theme=dark] .highlight .se {
  color: #d33682;
}
[data-theme=dark] .highlight .nn {
  color: #b58900;
}
[data-theme=dark] .highlight .nc {
  color: #b58900;
}
[data-theme=dark] .highlight .no {
  color: #b58900;
}
[data-theme=dark] .highlight .na {
  color: #268bd2;
}
[data-theme=dark] .highlight .m, [data-theme=dark] .highlight .mb, [data-theme=dark] .highlight .mf, [data-theme=dark] .highlight .mh, [data-theme=dark] .highlight .mi, [data-theme=dark] .highlight .il, [data-theme=dark] .highlight .mo, [data-theme=dark] .highlight .mx {
  color: #859900;
}
[data-theme=dark] .highlight .ss {
  color: #859900;
}

/* Existing styles */
table {
  width: 100%;
  margin-bottom: 1em;
}
table thead {
  border: 0;
}
table thead th {
  background-color: var(--colour-contrast-high);
  border: 1px solid var(--colour-contrast-high);
  font-weight: normal;
  color: var(--colour-contrast-low);
}
table thead th:first-of-type {
  text-align: left;
}
table th, table td {
  padding: 0.5em;
  vertical-align: middle;
}
table tbody tr {
  margin-bottom: 1em;
  border: 2px solid var(--colour-contrast-high);
}
table tbody tr:last-of-type {
  margin-bottom: 0;
}
table tbody tr:nth-of-type(even) {
  background-color: var(--colour-contrast-low);
}
table tbody th[scope=row] {
  background-color: var(--colour-contrast-high);
  color: var(--colour-contrast-low);
}

.archive-links, .archives .grouping-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.archive-links li.tag, .archive-links li.category, .archives .grouping-list li.tag, .archives .grouping-list li.category {
  margin: 0.5rem;
}

.archives .grouping-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  grid-gap: 1rem;
}

li.tag {
  margin: 0 0.5rem, 0, 0;
}

.archive-links .active {
  border-color: var(--colour-secondary);
  border-width: 0 0 1px 0;
  border-style: solid;
}
.archive-links li {
  margin: 0 0.5rem;
}
@media only screen and (max-width: 767px) {
  .archive-links li {
    margin-left: 0;
    margin-right: 1rem;
  }
}
.archive-links a, .archive-links a:hover {
  text-decoration: none;
}

.archives .fa-li, .archives .fa-li.fa-lg {
  margin-left: 0;
}
.archives .groupedPosts {
  margin: 1em 0 0 0;
  list-style: none;
}
.archives .groupedPosts .meta {
  width: 6ch;
  border-color: var(--colour-secondary);
  border-right: 1px;
  vertical-align: middle;
}
.archives .groupedPosts .meta-year {
  width: 12ch;
}
.archives .groupedPosts .title {
  overflow: hidden;
  padding-left: 4px;
}
.archives .groupedPosts ul {
  margin: 1em 0;
}
.archives ul {
  list-style: none;
}
.archives ul h3.year, .archives ul h3.tag, .archives ul h3.category {
  font-weight: 300;
  vertical-align: top;
  text-align: center;
}
.archives ul .post-list-item {
  display: flex;
  margin: 0.5em 0;
}
.archives ul .title {
  flex: 1;
}
.archives ul .meta {
  border-color: var(--colour-secondary);
  border-right: 1px;
  vertical-align: middle;
}
.archives ul .title {
  overflow: hidden;
  padding-left: 4px;
}

.not-found .next-greatest-thing {
  background: #000000;
  color: #6C59D1;
  padding: 1em;
  overflow: hidden;
}
.not-found .next-greatest-thing h1, .not-found .next-greatest-thing h2 {
  text-align: center;
  animation: blinker 1.7s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}
.not-found .next-greatest-thing .underc {
  display: block;
  margin: 0 auto;
}
.not-found .next-greatest-thing .bkslide {
  display: block;
  margin: 0 auto;
}
@keyframes blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*# sourceMappingURL=main.css.map */