@charset "UTF-8";
/** Typography */
/** Solarized colors */
/** Colors */
/** Links */
:root {
  --base-font-size: 18px;
  --base-font-size-large: 21px;
  --base-line-height: 1.6rem;
  --base-line-height-large: 1.6rem;
  --half-line-height: 0.8rem;
  --double-line-height: 3.2rem;
  --content-padding-sm: 20px;
  --content-padding-lg: 40px;
  --huge-font-size: 3rem;
  --small-font-size: 0.8rem;
  --huge-size: 3rem;
  --small-size: 0.8rem;
  --font-sans: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-serif: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-heading: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-mono: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --color-s-base03: #002b36;
  --color-s-base02: #073642;
  --color-s-base01: #586e75;
  --color-s-base00: #657b83;
  --color-s-base0: #839496;
  --color-s-base1: #93a1a1;
  --color-s-base2: #eee8d5;
  --color-s-base3: #fdf6e3;
  --color-s-yellow: #b58900;
  --color-s-orange: #cb4b16;
  --color-s-red: #dc322f;
  --color-s-magenta: #d33682;
  --color-s-violet: #6c71c4;
  --color-s-blue: #268bd2;
  --color-s-cyan: #2aa198;
  --color-s-green: #859900;
  --color-accent: var(--color-s-blue);
  --color-dark: #002b36;
  --color-text: #073642;
  --color-light: #657b83;
  --color-lighter: #839496;
  --color-bg: rgb(253.34, 247.53, 231.76);
  --color-bg-darker: #eee8d5;
  --color-bg-white: rgba(255, 255, 255, 0.8);
  --color-tagline: #cb4b16;
  --color-hr: #93a1a1;
  --color-link: #268bd2;
  --color-link-hover: rgb(65.7806451613, 164.1022130533, 233.2193548387);
  --color-link-light: rgb(86.8806451613, 160.4219804951, 212.1193548387);
  --color-link-light-hover: rgb(119.5161290323, 184.6774193548, 230.4838709677);
}

.light {
  background-color: #fdf6e3;
  color: #657b83;
}
.light * {
  color: #657b83;
}
.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
  color: #586e75;
  border-color: #657b83;
}
.light a, .light a:active, .light a:visited {
  color: #586e75;
}

.dark {
  background-color: #002b36;
  color: #839496;
}
.dark * {
  color: #839496;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: #93a1a1;
  border-color: #839496;
}
.dark a, .dark a:active, .dark a:visited {
  color: #93a1a1;
}

/** Media query breakpoints */
/*
 * base.css | v0.4 (06132010) | Thierry Koblentz
 *
 * See: http://thinkvitamin.com/design/setting-rather-than-resetting-default-styling/
 */
/* HTML 5 fix */
header, nav, article, footer, aside, address, section {
  display: block;
}

/**
 * Typography
 */
html {
  height: 100%;
  overflow-y: scroll;
  font-size: 18px;
}
@media (min-width: 700px) {
  html {
    font-size: 21px;
  }
}

body {
  font-size-adjust: none;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.6rem;
  background: rgb(253.34, 247.53, 231.76);
  color: #073642;
  margin: 0;
}

/** Fonts */
body {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
}

pre, tt, code, kbd, samp, var {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1, h2, h3 {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

h4, h5, h6 {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
}

h1, h2, h3, h4, h5, h5 {
  clear: both;
}

small, figcaption, footer, .leave a.calltoaction,
legend, input, button, textarea, select, details {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

.leave a.calltoaction {
  font-size: 0.95em;
  font-weight: bold;
}

/** Text sizing and Leading */
p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 180%;
  line-height: 1.2em;
  margin-bottom: 0.45em;
  color: #002b36;
}
@media (min-width: 700px) {
  h1 {
    font-size: 218%;
  }
}

h2, .post h1, .post--link .title, legend {
  font-size: 145%;
  margin-bottom: 0.7em;
  line-height: 1.3em;
  margin-top: 1.3em;
  color: #002b36;
}
@media (min-width: 700px) {
  h2, .post h1, .post--link .title, legend {
    font-size: 164%;
    margin-bottom: 0.6em;
  }
}

h3, .post h2, .page-heading {
  font-size: 118%;
  margin-bottom: 0.84em;
  line-height: 1.4em;
}
@media (min-width: 700px) {
  h3, .post h2, .page-heading {
    font-size: 145%;
    margin-bottom: 0.7em;
  }
}

h4, h5, h6, .post h3 {
  font-size: 100%;
}
@media (min-width: 700px) {
  h4, h5, h6, .post h3 {
    font-size: 118%;
  }
}

small, figcaption {
  font-size: 0.8rem;
  line-height: 1.6rem;
}

aside#comments {
  margin-top: -4em;
}

article footer {
  font-size: 0.8rem;
  margin-top: 1.6rem;
}
article footer p {
  margin-bottom: 0;
}

footer.footnotes ol {
  font-size: 0.8rem;
  margin-top: 1.6rem;
}

p, ol, ul, .long li, hr, legend, input, button, textarea, select, address, blockquote, .gist, dd {
  margin-bottom: 1.6rem;
}

blockquote {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 0.8rem;
  border-left: 0.4rem solid #6c71c4;
}

blockquote > *:last-child,
blockquote > *:last-child * {
  margin-bottom: 0;
}

figure, table, pre {
  margin-top: 0;
  margin-bottom: 1.6rem;
}

div:has(> div.highlight:first-child) {
  margin-top: 0;
  margin-bottom: 1.6rem;
}
div:has(> div.highlight:first-child) .highlight pre {
  margin-top: 0;
  margin-bottom: 0;
}

figure > table {
  margin-top: 0;
  margin-bottom: 0;
}

footer.footnotes ol *, ul li, ol li, dt {
  margin-bottom: 0;
}

/** Links */
a:not([class]):link, a:not([class]):visited {
  color: #268bd2;
  text-decoration: underline #268bd2;
  text-underline-offset: 0.2em;
}
a:not([class]):link code, a:not([class]):visited code {
  color: #268bd2;
}
a:not([class]):hover, a:not([class]):focus {
  color: rgb(65.7806451613, 164.1022130533, 233.2193548387);
  text-decoration: none;
}
a:not([class]):hover code, a:not([class]):focus code {
  color: rgb(65.7806451613, 164.1022130533, 233.2193548387);
}

/* remove border from image links.
http://perishablepress.com/css-remove-link-underlines-borders-linked-images/ */
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
  border-color: transparent;
  text-decoration: none;
}

a:link img, a:visited img, a:hover img, a:focus img {
  vertical-align: baseline;
}

a:focus {
  outline: 1px dotted #000;
  background: rgba(150, 50, 255, 0.1);
}

a:hover, a:active {
  outline: none;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)  */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers
 */
img {
  vertical-align: bottom;
}

/* Styling of list items
 * This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
 */
ol li,
ul ol li {
  list-style-type: decimal;
}

ul li {
  list-style-type: disc;
}

ul ul li {
  list-style-type: circle;
}

ul ul ul li {
  list-style-type: square;
}

ol ol li {
  list-style-type: lower-alpha;
}

ol ol ol li {
  list-style-type: lower-roman;
}

/* These should be self explanatory
 * I believe *most* UAs style sub and sup like this by default so I am not sure there is value to include these rules here
 */
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: baseline;
  font-size: smaller;
  position: relative;
  top: -0.4em;
  line-height: 0;
}

/* padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  padding-bottom: 0.5em;
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {
  text-align: center;
}

tbody th {
  text-align: left;
}

code {
  background: #eee8d5;
}

code, pre {
  color: rgb(9.4452054795, 72.8630136986, 89.0547945205);
}

i, em {
  font-style: italic;
}

blockquote, q, cite, dfn, var, address {
  font-style: normal;
}

blockquote em, q em, cite em {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
 */
blockquote p:before, blockquote p:after, q:before, q:after {
  content: "";
}

/* These should be self explanatory
 */
th, strong, dt, b {
  font-weight: 700;
}

ins {
  text-decoration: none;
  font-style: italic;
}

del {
  text-decoration: line-through;
}

abbr {
  border-bottom: 1px dotted #333;
  font-variant: normal;
}

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

figure {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow-x: scroll;
}

.youtube iframe {
  max-width: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

ul, ol {
  list-style-position: outside;
}

li ul,
li ol {
  margin: 0 1.6rem;
}

/* ul, ol { margin: 0 0 1.618em 0; } -- better set only one margin direction */
dl {
  margin: 0 0 1.6rem 0;
}

dl dt {
  font-weight: 700;
}

dl dd {
  margin-left: 1.6rem;
}

/* These should be self explanatory
 */
dd {
  padding-left: 20px;
  margin-top: 0.5em;
}

/* we use margin for hr for the same reason we do for table
 */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
  margin-bottom: 1.6rem;
}

address {
  font-style: italic;
}

/* * * * * *
 *
 *   F O R M   E L E M E N T S
 *
 */
/* this should not affect the layout of the labels unless you style them in a way that padding applies
 * if I include this here it is mostly because when labels are styled with float and clear, top padding creates a gap between labels (bottom margin would, but not top margin)
 */
label {
  padding-top: 1.6rem;
}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets)
 */
/* removed because text looks ugly insid fieldset {line-height: 1;}*/
/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type=checkbox] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

/* vertical alignment of radio buttons
 */
input[type=radio] {
  vertical-align: text-bottom;
}

/* vertical alignment of input fields for IE 6
 */
input {
  _vertical-align: text-bottom;
}

/* a specific font-size is set for these elements
 * the line-height is to override FF's default styling
 */
input, button, textarea, select, optgroup, option {
  font-size: 0.8rem;
  line-height: 1.6rem;
}

/* * * * * *
 *
 *   C L A S S E S
 *
 */
/* list items are styled by default with markers (disc, etc.) and left margin
 * if you apply the class "noMarker" to a list, its items won't display markers and won't have left margin
 */
.noMarker li {
  list-style: none;
  margin-left: 0;
}

/* footnotes
 */
sup.footnote {
  line-height: 0px;
}

/* ease clickability */
sup.footnote a {
  padding: 0.1em 0.15em;
}

/** nav */
#site-header {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 0.3em solid rgb(155.7291666667, 186.875, 8.125);
}
@media (min-width: 700px) {
  #site-header {
    text-align: left;
  }
}

@media (min-width: 700px) {
  #banner {
    grid-column: 1/8;
  }
}

#navigation {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  margin: 0;
  grid-column: main-content;
}

.nav_items {
  list-style-type: none;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 700px) {
  .nav_items {
    margin-top: 1.6rem;
    justify-content: flex-start;
  }
}

.nav_item {
  display: inline;
  padding-right: 0.3em;
  padding-left: 0.3em;
}
@media (min-width: 700px) {
  .nav_item {
    padding-left: 0em;
    padding-right: 0em;
  }
  .nav_item:not(:last-child) {
    margin-right: 1em;
  }
}

@media (max-width: 699px) {
  .nav_item--newline-sm:before {
    content: " ";
    display: block;
  }
}

.nav_item__link {
  padding: 0.5em;
  display: inline-block;
}
.nav_item__link:link, .nav_item__link:visited {
  color: #268bd2;
  border-bottom-color: transparent;
}
.nav_item__link:hover {
  color: rgb(155.7291666667, 186.875, 8.125);
  border-bottom-color: transparent;
}
@media (min-width: 700px) {
  .nav_item__link {
    padding: 0.2em;
  }
}

/** banner */
.sitetitle {
  font-family: "Helvetica Neue", Helvetica, Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 2em;
  margin: 0 0 0.5em 0;
  text-align: center;
  font-weight: 800;
  color: #444;
  text-transform: lowercase;
  word-spacing: -0.3em;
}
.sitetitle .forename {
  color: #333;
  font-weight: 200;
}
.sitetitle a.titlelink {
  text-decoration: none;
  color: inherit;
}
@media (min-width: 700px) {
  .sitetitle {
    font-size: 4em;
    display: inline;
    margin-bottom: 0;
    padding-right: 1em;
    text-align: left;
  }
}

/** actual content wrapper */
#content, #footer {
  padding: clamp(0.5rem, 3vw, 2rem) clamp(0.5rem, 5vw, 2rem);
}
@media (min-width: 700px) {
  #content, #footer {
    padding: clamp(0.5rem, 5vw, 5rem);
  }
}

.show-promotion #content {
  padding-top: 2em;
}

.container {
  display: grid;
  grid-template-columns: 0 [main-content-start] repeat(3, 1fr) [main-content-end] 0;
}
@media (min-width: 700px) {
  .container {
    grid-template-columns: minmax(auto, 9rem) [main-content-start] repeat(4, minmax(auto, 11rem)) [main-content-end] 1fr;
  }
}
.container > * {
  grid-column: main-content;
}
.container > p {
  grid-column-end: span 3;
}
.container > aside {
  min-width: 0;
}

.post header {
  grid-column-end: span 5;
}

.post .title {
  font-size: 2rem;
}
@media (min-width: 700px) {
  .post .title {
    font-size: 3rem;
    max-width: 60rem;
  }
}

#site-header {
  padding: 0 clamp(0.5rem, 5vw, 2rem);
}
@media (min-width: 700px) {
  #site-header {
    padding: 0 clamp(0.5rem, 5vw, 5rem);
  }
}

/** home page card containers */
.card-container {
  grid-column: main-content;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
@media (min-width: 700px) {
  .card-container {
    flex-direction: row;
    margin-bottom: 3.2rem;
  }
}

#contact-cards.card-container {
  flex-direction: column-reverse;
}
@media (min-width: 700px) {
  #contact-cards.card-container {
    flex-direction: row;
  }
}

.card-container > h1 {
  grid-column: 1/4;
}

.card-container > .contact-card {
  width: 100%;
}

.card-container > .contact-card > h2 {
  font-size: 1.2rem;
  margin-top: 0;
}

.card-container > contact-card--picture {
  text-align: center;
}
.card-container > contact-card--picture .contact__picture * {
  max-height: 35vh;
  max-width: 40%;
}
@media (min-width: 700px) {
  .card-container > contact-card--picture .contact__picture * {
    max-width: 100%;
  }
}

.side {
  margin-left: 4%;
}
@media (min-width: 700px) {
  .side {
    clear: both;
    float: right;
    width: 20em;
    margin-left: 2em;
  }
  .side p {
    padding-left: 0;
  }
}

/** general */
h1.page-heading {
  margin-top: 0;
}

section > h1 {
  font-size: 2rem;
  line-height: 3.11rem;
  font-weight: normal;
}

hr {
  border-width: 0;
  border-top: 1px solid #93a1a1;
}

mark {
  background-color: #073642;
  color: rgb(253.34, 247.53, 231.76);
  padding: 0 2px;
  margin: 0 1px;
}

code {
  font-size: 0.9em;
  padding: 0.3em 0.3em 0.1em;
}

pre {
  padding: 0.5rem;
  font-size: 0.9rem;
  line-height: 1em;
  border-bottom: 1px solid #ccc;
  border-top: 1pt solid #ccc;
  overflow: auto;
}
pre code {
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.6rem;
  line-height: 3ex;
}
pre code.language-asciiart {
  line-height: 1em;
}

aside {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

aside p:not(:last-child) {
  margin-bottom: 1.6rem;
}

aside ol:last-child,
aside ul:last-child {
  margin-bottom: 0;
}

aside.series,
aside.note,
aside.details {
  --color: #073642;
  --radius: 0.8rem;
  color: #073642;
  border-radius: var(--radius);
  border: 2pt solid var(--color);
  margin-block: 1.6rem;
  padding: var(--radius);
  margin-inline: -var(--radius);
}

aside.series {
  --color: #b58900;
  font-size: 0.8rem;
}

aside.note {
  --color: #6c71c4;
  font-size: 0.8rem;
}

/** footer */
.footer {
  color: #657b83;
}
.footer a:link, .footer a:visited {
  color: rgb(86.8806451613, 160.4219804951, 212.1193548387);
}
.footer a:hover {
  color: rgb(119.5161290323, 184.6774193548, 230.4838709677);
}

#footer {
  border-top: 0.3em solid rgb(155.7291666667, 186.875, 8.125);
}

/** Title link colors */
#section-back {
  color: #073642;
  border-bottom-color: transparent;
}

#posts .post .title {
  margin-top: 1.5em;
}

#posts .post:first-child .title {
  margin-top: 0;
}

#posts header .title a {
  border-bottom-color: transparent;
  color: rgb(50.4, 136.8372093023, 197.6);
}

#section-back:hover, #posts header .title a:hover {
  color: rgb(76.3306451613, 162.2620967742, 222.6693548387);
}

.posts__to-archive {
  font-size: 2em;
  font-weight: bold;
}

/** post */
#posts header .time {
  margin-top: 0;
  color: #839496;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.6rem;
}

#posts article,
#wiki article {
  margin-bottom: 4rem;
}

#posts article:last-child {
  margin-bottom: 0;
}

article .gist {
  font-size: 60%;
  line-height: 1.2;
  padding: 0;
}

article figure img {
  max-height: 60vh;
}
article figure video {
  max-width: 100%;
}

figcaption {
  font-style: normal;
}

article figure.teaser {
  display: block;
  grid-column: main-content;
  margin: 0;
  padding: 0;
}

article figure.post-figure--grid {
  display: grid;
  grid-template-columns: [figure-start] 1fr [figure-end];
  column-gap: 0;
  row-gap: 0;
}
@media (min-width: 700px) {
  article figure.post-figure--grid {
    grid-template-columns: [figure-start] 1fr 1fr [figure-end];
    column-gap: 1rem;
    row-gap: 0;
  }
}
article figure.post-figure--grid figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
article figure.post-figure--grid > figcaption {
  grid-column: figure;
}

article img {
  border-width: 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 700px) {
  article img {
    border: 1px solid #d4d4d4;
    padding: 0.25em;
    background: #fff;
  }
}

article img.noborder {
  border-width: 0;
  background: transparent;
  padding: 0;
}

img.appstore {
  width: 120px;
  height: 40px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/** special post links */
a.citation,
a.footnote {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: bold;
  color: #666;
  padding: 0 0.4em;
  border-radius: 1em;
  background: rgb(240.65, 225.1961538462, 183.25);
  text-decoration: none;
  /* replacing <sup> */
  vertical-align: baseline;
  font-size: smaller;
  position: relative;
  top: -0.4em;
  line-height: 0;
}

a.footnote {
  padding-right: 0.2em;
  /* 0.2em + letter-spacing on the right */
  letter-spacing: 0.2em;
}

/** post index */
article .footnotes {
  font-size: 0.8rem;
  line-height: 1.6rem;
}
article .footnotes ol {
  padding: 0 20px;
}

.post__meta,
.wiki__meta {
  margin-left: 0;
  margin-top: 0;
  padding: 0;
  display: inline-block;
}
.post__meta li,
.wiki__meta li {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  display: inline;
}

#posts nav.pagination {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}
#posts nav.pagination ul li {
  font-weight: bold;
  margin-top: 0;
  list-style: none;
}

#posts nav.pagination ul li {
  display: inline-block;
  width: 49%;
}

#posts nav.pagination li.newer {
  text-align: left;
}

#posts nav.pagination li.newer a::before {
  content: "←";
  display: inline-block;
  width: 1.2em;
}

#posts nav.pagination li.older {
  text-align: right;
}

#posts nav.pagination li.older a::after {
  content: "→";
  display: inline-block;
  width: 1.2em;
}

#posts #backlinks ul, #posts #backlinks ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#posts #backlinks li {
  margin: 0;
  padding: 0;
}
#posts #backlinks table {
  display: none;
}
#posts #backlinks figure {
  display: none;
}
#posts #backlinks .entries {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  justify-content: flex-start;
}
#posts #backlinks .entry {
  box-sizing: border-box;
  display: block;
  flex-grow: 1;
  border-left: 1px solid #2aa198;
  padding-left: 1rem;
  flex-basis: calc((30rem - 100%) * 999);
}
#posts #backlinks .entry:nth-last-child(n+3), #posts #backlinks .entry:nth-last-child(n+3) ~ * {
  flex-basis: 100%;
}
#posts #backlinks .entry .title, #posts #backlinks .entry .summary, #posts #backlinks .entry p {
  font-size: 0.8rem;
}

.post--link .title a::after {
  content: "→";
}

.post-moved {
  font-style: italic;
  background: #eee8d5;
  padding-top: 1em;
  padding-bottom: 1em;
}

details {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
details.toc summary {
  font-weight: bold;
}

.toc__list {
  font-size: 80%;
}

.tags {
  display: inline;
  margin-left: 0;
}
.tags li {
  display: inline;
  list-style: none;
  padding-right: 0;
}
.tags li a::before {
  content: "#";
  display: inline-flex;
}

#intro {
  position: relative;
}
#intro .intro__text {
  font-style: italic;
}
#intro .nav {
  z-index: 1000;
  position: relative;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}
#intro .avatar {
  width: 4em;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 0;
}

@media (min-width: 700px) {
  #intro .avatar {
    width: 8em;
    margin-right: 4em;
  }
}
.feature {
  float: right;
  width: 30%;
  margin-top: 1rem;
}
.feature img {
  max-width: 98%;
}
.feature a {
  text-decoration: none;
}

.leave::before {
  content: "→";
  display: inline-block;
  width: 1.2em;
}
@media (min-width: 700px) {
  .leave::before {
    margin-left: -1.2em;
  }
}

@media (min-width: 700px) {
  /* hide "tel:..." links (have to be activated in mobile devices' css) */
  footer .callme {
    display: none;
  }
}
.photo .body div.image a,
a.image {
  border: 0;
}

#posts article img.vgwort {
  border: 0;
  padding: 0;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/** post archive */
.archive-year {
  overflow: hidden;
  text-align: center;
  padding-left: 2rem;
  padding-right: 2rem;
  position: sticky;
  top: 0;
  background: rgb(253.34, 247.53, 231.76);
}

.text-over-line:before,
.text-over-line:after {
  background-color: #93a1a1;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.text-over-line:before {
  right: 0.5em;
  margin-left: -50%;
}

.text-over-line:after {
  left: 0.5em;
  margin-right: -50%;
}

.archive-year-list,
.archive-post-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.archive-month {
  font-size: 1rem;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  margin: 0;
}

.archive-post {
  display: flex;
  flex-direction: column;
}

#posts article.archive-post {
  margin-bottom: 0;
}

.archive-post {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

.archive-post__title {
  margin: 0;
}

.archive-post__desc {
  font-size: 0.8rem;
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .archive-post {
    gap: 1rem;
    flex-direction: row;
  }
  .archive-post__day {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10ch;
  }
}
@media (min-width: 700px) and (min-width: 700px) {
  .archive-post__detail {
    flex-grow: 99;
    flex-basis: 0;
  }
}
/** tag list */
.alltags {
  list-style-type: none;
}
.alltags .tag_char {
  clear: both;
}
.alltags .tag_char .char {
  font-weight: bold;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}
.alltags .tag,
.alltags .tag_char {
  display: inline-block;
  float: left;
  width: 50%;
}
@media (min-width: 700px) {
  .alltags .tag,
  .alltags .tag_char {
    font-size: 0.8rem;
    width: 25%;
    padding: 0.3em 0;
  }
}

/** blockquotes http://html5doctor.com/blockquote-q-cite/#styling */
q {
  quotes: "“" "”" "‘" "’";
}

:lang(de) q {
  quotes: "»" "«" "›" "‹";
}

/* Guillemets */
q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

q.hang {
  margin-left: -0.54em;
}

/** Tables */
th, td {
  padding: 0.2rem 0.6rem;
}

thead {
  background-color: rgba(0, 0, 60, 0.1);
}

tr.numerical td {
  text-align: right;
}

tbody td.total {
  font-weight: bold;
}

.gist table.lines {
  margin: 0;
}

.calltoaction--sole {
  font-weight: bold;
}

/** Software page */
.software.product {
  clear: both;
  margin-bottom: 2em;
}

.app__icon-box {
  max-width: 300px;
  padding: 0 10%;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .app__icon-box {
    max-width: 20%;
    padding: 0;
    margin-right: 1em;
    margin-bottom: 2em;
    float: left;
  }
}

.app__icon-link:link, .app__icon-link:visited {
  text-decoration: none;
}

.app__icon {
  width: 100%;
}

.app__text {
  margin-top: 0;
}

/** Ads/Promotion */
.promotion {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  background: #fff;
  margin-bottom: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.8rem;
  line-height: 1.6rem;
}
@media (min-width: 700px) {
  .promotion {
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    zoom: 1;
  }
}

.promotion__image {
  display: block;
}
@media (min-width: 700px) {
  .promotion__image {
    display: inline;
  }
}

.promotion__title {
  margin-top: 0;
}

.promotion__details {
  display: none;
}
@media (min-width: 700px) {
  .promotion__details {
    display: inline;
  }
}

.tagline {
  font-size: 1.4em;
  font-weight: 200;
  color: #586e75;
  text-align: center;
  line-height: 1.2em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}
@media (min-width: 700px) {
  .tagline {
    font-size: 1.8em;
  }
}

/** Books and products content */
.product {
  margin-top: 1em;
  margin-bottom: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}
@media (min-width: 700px) {
  .product {
    overflow: hidden;
    zoom: 1;
  }
}

.product__title {
  font-size: 118%;
  margin-bottom: 1em;
  margin-top: 1.3em;
}
@media (min-width: 700px) {
  .product__title {
    margin-top: 0;
  }
}

.product__shot {
  border: 1px solid #555;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
@media (min-width: 700px) {
  .product__shot {
    max-width: 30%;
    max-height: 14em;
    margin-right: 2em;
    float: left;
    margin-bottom: 1.5em;
  }
}

.product__details {
  font-size: 80%;
}

.product__text {
  margin-top: 0;
}

.product__content {
  overflow: hidden;
}

/** Contact page */
.contact__picture-box {
  width: 50%;
  max-width: 12em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}
@media (min-width: 700px) {
  .contact__picture-box {
    float: right;
    max-width: 30%;
    margin-left: 2em;
  }
}

.contact__picture {
  max-width: 100%;
}

.card {
  position: relative;
}

.card a::before {
  content: "";
  position: absolute;
  inset: 0;
}

/** Clearfix: contain floats */
/*
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

.landingpage h1 {
  text-align: left;
}

#introduction {
  margin-top: 0em;
  margin-bottom: 0em;
}

#clean-coding h1 {
  color: #dc322f;
}

.clean-coding__actions li {
  list-style-type: none;
}

/*
 * Great-looking library pages:
 * - https://daverupert.com/bookshelf/
 */
.library {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  display: flex;
  flex-direction: column;
}

.library .archive-year {
  display: flex;
}

.library .book-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  line-height: 1.2rem;
}
@media (min-width: 700px) {
  .library .book-list {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}

.library .book {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 1rem;
  position: relative;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0.3rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1490196078);
}
@media (min-width: 700px) {
  .library .book {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

.library .book__link::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.library .book * {
  padding: 0;
  margin: 0;
}

.library .book header {
  font-size: 0.8rem;
}
.library .book .book__title {
  font-size: 0.8rem;
}
.library .book .book__cover {
  display: block;
  margin-inline: auto;
  padding: 0;
  border: none;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2980392157);
}
@media (min-width: 700px) {
  .library .book .book__cover {
    height: 12rem;
  }
}
.library .book .book__read {
  color: #839496;
}

pre, pre > code {
  background: #f8f8f8;
}

pre .hll {
  background-color: #ffffcc;
}

code .c {
  color: #408080;
  font-style: italic;
} /* Comment */
code .err {
  border: 1px solid #FF0000;
} /* Error */
code .k {
  color: #008000;
  font-weight: 600;
} /* Keyword */
code .o {
  color: #666666;
} /* Operator */
code .ch {
  color: #408080;
  font-style: italic;
} /* Comment.Hashbang */
code .cm {
  color: #408080;
  font-style: italic;
} /* Comment.Multiline */
code .cp {
  color: #BC7A00;
} /* Comment.Preproc */
code .cpf {
  color: #408080;
  font-style: italic;
} /* Comment.PreprocFile */
code .c1 {
  color: #408080;
  font-style: italic;
} /* Comment.Single */
code .cs {
  color: #408080;
  font-style: italic;
} /* Comment.Special */
code .gd {
  color: #A00000;
} /* Generic.Deleted */
code .ge {
  font-style: italic;
} /* Generic.Emph */
code .gr {
  color: #FF0000;
} /* Generic.Error */
code .gh {
  color: #000080;
  font-weight: 600;
} /* Generic.Heading */
code .gi {
  color: #00A000;
} /* Generic.Inserted */
code .go {
  color: #888888;
} /* Generic.Output */
code .gp {
  color: #000080;
  font-weight: 600;
} /* Generic.Prompt */
code .gs {
  font-weight: 600;
} /* Generic.Strong */
code .gu {
  color: #800080;
  font-weight: 600;
} /* Generic.Subheading */
code .gt {
  color: #0044DD;
} /* Generic.Traceback */
code .kc {
  color: #008000;
  font-weight: 600;
} /* Keyword.Constant */
code .kd {
  color: #008000;
  font-weight: 600;
} /* Keyword.Declaration */
code .kn {
  color: #008000;
  font-weight: 600;
} /* Keyword.Namespace */
code .kp {
  color: #008000;
} /* Keyword.Pseudo */
code .kr {
  color: #008000;
  font-weight: 600;
} /* Keyword.Reserved */
code .kt {
  color: #B00040;
} /* Keyword.Type */
code .m {
  color: #666666;
} /* Literal.Number */
code .s {
  color: #BA2121;
} /* Literal.String */
code .na {
  color: #7D9029;
} /* Name.Attribute */
code .nb {
  color: #008000;
} /* Name.Builtin */
code .nc {
  color: #0000FF;
  font-weight: 600;
} /* Name.Class */
code .no {
  color: #880000;
} /* Name.Constant */
code .nd {
  color: #AA22FF;
} /* Name.Decorator */
code .ni {
  color: #999999;
  font-weight: 600;
} /* Name.Entity */
code .ne {
  color: #D2413A;
  font-weight: 600;
} /* Name.Exception */
code .nf {
  color: #0000FF;
} /* Name.Function */
code .nl {
  color: #A0A000;
} /* Name.Label */
code .nn {
  color: #0000FF;
  font-weight: 600;
} /* Name.Namespace */
code .nt {
  color: #008000;
  font-weight: 600;
} /* Name.Tag */
code .nv {
  color: #19177C;
} /* Name.Variable */
code .ow {
  color: #AA22FF;
  font-weight: 600;
} /* Operator.Word */
code .w {
  color: #bbbbbb;
} /* Text.Whitespace */
code .mb {
  color: #666666;
} /* Literal.Number.Bin */
code .mf {
  color: #666666;
} /* Literal.Number.Float */
code .mh {
  color: #666666;
} /* Literal.Number.Hex */
code .mi {
  color: #666666;
} /* Literal.Number.Integer */
code .mo {
  color: #666666;
} /* Literal.Number.Oct */
code .sa {
  color: #BA2121;
} /* Literal.String.Affix */
code .sb {
  color: #BA2121;
} /* Literal.String.Backtick */
code .sc {
  color: #BA2121;
} /* Literal.String.Char */
code .dl {
  color: #BA2121;
} /* Literal.String.Delimiter */
code .sd {
  color: #BA2121;
  font-style: italic;
} /* Literal.String.Doc */
code .s2 {
  color: #BA2121;
} /* Literal.String.Double */
code .se {
  color: #BB6622;
  font-weight: 600;
} /* Literal.String.Escape */
code .sh {
  color: #BA2121;
} /* Literal.String.Heredoc */
code .si {
  color: #BB6688;
  font-weight: 600;
} /* Literal.String.Interpol */
code .sx {
  color: #008000;
} /* Literal.String.Other */
code .sr {
  color: #BB6688;
} /* Literal.String.Regex */
code .s1 {
  color: #BA2121;
} /* Literal.String.Single */
code .ss {
  color: #19177C;
} /* Literal.String.Symbol */
code .bp {
  color: #008000;
} /* Name.Builtin.Pseudo */
code .fm {
  color: #0000FF;
} /* Name.Function.Magic */
code .vc {
  color: #19177C;
} /* Name.Variable.Class */
code .vg {
  color: #19177C;
} /* Name.Variable.Global */
code .vi {
  color: #19177C;
} /* Name.Variable.Instance */
code .vm {
  color: #19177C;
} /* Name.Variable.Magic */
code .il {
  color: #666666;
} /* Literal.Number.Integer.Long */
/* Comment.Hashbang */
code .cm {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
} /* Comment.Multiline */
/* Comment.Preproc */
/* Comment.PreprocFile */
code .c1 {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
} /* Comment.Single */
/* Comment.Special */
/** Newsletter */
.news__label,
.newsletter label,
.news__checkbox__label,
.news__button,
.news__input {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}

.news__label {
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: bold;
  width: auto;
  text-align: right;
}

.news__input {
  border: 2px solid;
  border-color: #A3A658;
  background: white;
  padding: 0.5em 1em;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.news__input--email,
.news__input--name {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.news__input--button {
  display: block;
  width: 100%;
  margin-top: 1.5333em;
  font-variant: small-caps;
  text-transform: lowercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(163, 166, 88, 0.8);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  outline: none;
}
.asterisk {
  color: red;
}

.indicates-required {
  font-size: 80%;
  font-style: italic;
}

.news__group {
  margin-top: 0;
  padding-left: 0;
}
.news__group li {
  list-style: none;
}

.news__group input[type=checkbox],
.gdpr__checkbox {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-top: 0;
  margin-right: 0.5em;
  vertical-align: 0;
}

/** GDPR / Marketing consent */
.gdpr__wrapper {
  padding-left: 2em;
  margin-bottom: 1rem;
}

.gdpr__checkbox {
  float: left;
  height: 1.7em;
  margin-left: -2em;
}

/** Individual book page */
.hero {
  overflow: hidden;
  display: flex;
  gap: 1rem;
  flex-flow: row wrap;
}
.hero > * {
  flex-basis: 100%;
}

/* hero cover image (left) */
.hero__cover {
  text-align: center;
  max-height: 30vh;
}
@media (min-width: 700px) {
  .hero__cover {
    flex-basis: 40%;
  }
}
.hero__cover .hero__image {
  border: 1px solid black;
  max-width: 100%;
  max-height: 100%;
}

/* right hand side */
@media (min-width: 700px) {
  .hero__detail {
    flex-basis: 55%;
    flex-basis: calc(60% - 1rem);
  }
}

.hero__heading {
  margin-top: 0;
  font-weight: normal;
}
@media (min-width: 700px) {
  .hero__heading {
    grid-column: 2/3;
  }
}

.hero__text {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: 200;
}
@media (min-width: 700px) {
  .hero__text {
    grid-column: 2/3;
  }
}

@media (min-width: 700px) {
  .hero actions {
    grid-column: 2/3;
  }
}

/** ---- */
.hero__rule {
  grid-column: 1/3;
  border-top: 4px solid #6c71c4;
  margin-bottom: 2em;
  margin-top: 2em;
}

.teaser {
  clear: both;
  font-size: 0.8em;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: 200;
}
.teaser strong, .teaser b {
  font-weight: 400;
}

.tagline {
  font-size: 1.4em;
  font-weight: 200;
  color: #586e75;
  text-align: center;
  line-height: 1.2em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}
@media (min-width: 700px) {
  .tagline {
    font-size: 1.8em;
  }
}

/** Actions */
.actions {
  text-align: center;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  clear: both;
  vertical-align: top;
}
.actions ul, .actions ol {
  margin: 0;
}

.actions.actions--small {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .actions__misc {
    display: inline-block;
  }
}

.actions__buying,
.actions__misc {
  padding: 0;
  vertical-align: top;
}

.actions__buying__item {
  list-style-type: none;
}

.action {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 1em;
  padding: 1em 2em;
  display: block;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border-radius: 0.4em;
}
@media (min-width: 700px) {
  .action {
    margin-left: 0;
    margin-right: 0;
  }
}

.actions__buying .cta {
  font-weight: bold;
}
@media (min-width: 700px) {
  .actions__buying .action {
    margin-left: 10%;
    margin-right: 10%;
  }
}

.action.action--small {
  margin-top: 1em;
  padding: 0.5em 1em;
}
@media (min-width: 700px) {
  .action.action--small {
    display: inline-block;
    margin-top: 1em;
    margin-left: 0%;
    margin-right: 0%;
  }
}

.action--download:link, .action--download:visited {
  border-width: 2px;
  border-style: solid;
  border-color: #4ecb19;
  color: #4ecb19;
}
@media (min-width: 700px) {
  .action--download:link, .action--download:visited {
    margin-left: 1em;
  }
}
.action--download:hover {
  border-color: rgb(60.5526315789, 157.5921052632, 19.4078947368);
  color: rgb(60.5526315789, 157.5921052632, 19.4078947368);
}

.action.action--aux {
  display: inline;
  padding: 0;
  border-radius: 0;
  line-height: 1.4em;
}

.action--shop:link, .action--shop:visited,
.action--generic:link,
.action--generic:visited {
  color: white;
  background: #268bd2;
}
.action--shop:hover,
.action--generic:hover {
  color: white;
  background: rgb(34.0927419355, 124.7076612903, 188.4072580645);
}

.action--contact:link, .action--contact:visited {
  color: white;
  background: #5B6FDC;
}
.action--contact:hover {
  color: white;
  background: rgb(69.9849246231, 92.5477386935, 215.5150753769);
}

.action--buy-on-appstore:link, .action--buy-on-appstore:visited, .action--buy-on-appstore:hover {
  border-bottom-color: transparent;
}

.action--buy:link, .action--buy:visited {
  color: white;
  background: #0000ff;
}
.action--buy:hover {
  color: white;
  background: rgb(0, 0, 229.5);
}
.action--buy del {
  color: #E1E1E1;
}
.action--buy ins {
  font-weight: bold;
}

.action--details:link, .action--details:visited {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
}

.twitter-tweet {
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
}

.smallprint {
  clear: both;
  font-size: 0.8rem;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-weight: 200;
}
.smallprint strong, .smallprint b {
  font-weight: 400;
}
.smallprint ul, .smallprint ol {
  margin-left: 2em;
  margin-bottom: 0;
}

@media only screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
  }
}