@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;
  }
}

:root {
  --flow-space: 1rem;
}

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;
}
@media (min-width: 700px) {
  h1 {
    font-size: 218%;
  }
}
h1 {
  color: #002b36;
}

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

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;
}

/**
 * Flow utility
 * Adds consistent spacing between child elements
 */
.flow {
  display: flex;
  flex-direction: column;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
  margin-block-end: 0;
  margin-bottom: 0 !important; /* quick fix to override general styles */
}

/** 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;
}
@media (min-width: 700px) {
  .container > p, .container > ul, .container > ol, .container > aside, .container > blockquote {
    grid-column-end: span 3;
  }
}
.container > ul:has(> li > p), .container > ol:has(> li > p) {
  margin-left: 0;
  padding-left: 0;
}
.container > ul:not(:has(> li > p)) {
  margin-left: 1.5em;
  padding-left: 0;
}
.container > ul:not(:has(> li > p)) > li {
  list-style-type: "–  ";
}
.container > ol:not(:has(> li > p)) {
  margin-left: 1.5em;
  padding-left: 0;
}
.container > aside {
  min-width: 0;
}

article.container.post > * {
  margin-block: 0;
  margin-top: 0;
  margin-bottom: 0;
}

article.container.post > :not(header) + * {
  margin-block-start: var(--flow-space, 1.6rem);
  margin-top: var(--flow-space, 1.6rem);
}

article.container.post > h2 {
  --flow-space: 3.2rem;
}

article.container.post > h3 {
  --flow-space: calc(1.6rem * 1.5);
}

article.container.post > figure.code-figure {
  --flow-space: calc(1.6rem * 1.5);
}

article.container.post > figure.code-figure[data-lang] {
  --flow-space: 1.6rem;
}

article.container.post > footer {
  --flow-space: 3.2rem;
}

.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;
}

figure.code-figure {
  margin: 0;
}
figure.code-figure pre {
  padding: 0.75rem 1rem;
  border-top: none;
  border-bottom: none;
  border-left: 2px solid #93a1a1;
}

figure.code-figure[data-lang]::before {
  content: attr(data-lang);
  display: block;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #839496;
  margin-bottom: 0.25rem;
  user-select: none;
}

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,
aside.tip,
aside.important,
aside.warning,
aside.caution,
aside.danger {
  --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;
  --label: "✦  Note";
}

aside.important {
  --color: #d33682;
  --label: "◆  Important";
}

aside.tip {
  --color: #2aa198;
  --label: "→  Tip";
}

aside.warning {
  --color: #b58900;
  --label: "△  Warning";
}

aside.caution,
aside.danger {
  --color: #dc322f;
  --label: "⊘  Caution";
}

aside.note,
aside.tip,
aside.important,
aside.warning,
aside.caution,
aside.danger {
  --bracket-width: 2.5px;
  --bracket-arm: 0.65rem;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  --bracket-gap: 0.8rem;
  --bracket-hang: clamp(0rem, 100vw - 40rem, calc(var(--bracket-arm) + var(--bracket-width) + var(--bracket-gap)));
  --bracket-inset: calc(var(--bracket-arm) + var(--bracket-width));
  padding: 0.5rem 0;
  padding-left: max(var(--bracket-inset), var(--bracket-hang) - var(--bracket-width));
  padding-right: max(var(--bracket-inset), var(--bracket-hang));
  margin-inline: calc(-1 * var(--bracket-hang));
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 0.95rem;
  line-height: 1.65;
  --bracket-color: color-mix(in srgb, var(--color) 50%, transparent);
  border: none;
  border-left: var(--bracket-width) solid var(--bracket-color);
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color));
  background-size: var(--bracket-arm) var(--bracket-width);
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}
aside.note::before,
aside.tip::before,
aside.important::before,
aside.warning::before,
aside.caution::before,
aside.danger::before {
  content: var(--label);
  display: block;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color);
  opacity: 0.75;
  margin-bottom: 0.25rem;
  user-select: none;
}
aside.note::after,
aside.tip::after,
aside.important::after,
aside.warning::after,
aside.caution::after,
aside.danger::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--bracket-arm);
  border-right: var(--bracket-width) solid var(--bracket-color);
  border-top: var(--bracket-width) solid var(--bracket-color);
  border-bottom: var(--bracket-width) solid var(--bracket-color);
  border-radius: 0 3px 3px 0;
}

aside :last-child {
  margin-bottom: 0;
}

/** 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;
}

.post__footer {
  border-top: 1px solid #93a1a1;
  padding-top: 1.6rem;
}

.post__footer__newsletter {
  margin-bottom: 1.6rem;
}

.post__subscribe {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
}

.post__subscribe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  row-gap: 0.5rem;
}

.post__subscribe__prompt {
  font-style: italic;
  color: #657b83;
  font-size: 0.95rem;
}

.post__subscribe__email {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  border: none;
  border-bottom: 1.5px solid color-mix(in srgb, #2aa198 55%, transparent);
  background: transparent;
  color: #073642;
  outline: none;
  width: 13rem;
  transition: border-color 0.15s;
}
.post__subscribe__email:focus {
  border-color: #2aa198;
}
.post__subscribe__email::placeholder {
  color: #93a1a1;
}

.post__subscribe__button {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: #2aa198;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #2aa198 35%, transparent);
  text-underline-offset: 3px;
  transition: opacity 0.15s;
}
.post__subscribe__button:hover {
  opacity: 0.7;
}

.post__footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.8rem;
  color: #657b83;
}

.post__footer__links a {
  color: #657b83;
  text-decoration: none;
}
.post__footer__links a:hover {
  color: #268bd2;
}

#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;
}

:not(.archive-post-list) > .archive-post + .archive-post {
  margin-block-start: 0.8rem;
}

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

/** 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;
}

/**
 * Contrast Box Component
 * High-contrast boxes for emphasis and calls to action
 */
.contrastbox {
  --box-color-bg: var(--color-accent, black);
  --box-color-fg: var(--color-bg, white);
  border: 0.1rem solid var(--box-color-bg, black);
  border-radius: 0.1rem;
  padding-block-end: 1rem;
  margin-block: 1.6rem;
}
.contrastbox > * {
  padding-inline: 1rem;
}
.contrastbox > *:first-child,
.contrastbox > h2:first-child ~ *:nth-child(2) { /* ... when it is, also remove first block margin from the actual content.  */
  margin-block-start: 0;
}
.contrastbox .inverted {
  background: var(--box-color-bg, black);
  color: var(--box-color-fg, white);
  padding: 0.5rem 1rem;
}
.contrastbox .inverted * {
  color: var(--box-color-fg, white);
}

.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;
}

.portfolio-timeline {
  margin: 2em 0;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
}
.portfolio-timeline .contrastbox {
  --box-color-bg: var(--color-s-base1);
}
.portfolio-timeline .contrastbox.active {
  --box-color-bg: var(--color-accent);
}

.portfolio-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5rem 1rem;
}
.portfolio-card__header.inverted {
  padding: 0.5rem 1rem;
}

.portfolio-card__title {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
  color: inherit;
  flex: 1 1 auto;
  min-width: 200px;
}
.portfolio-card__title a {
  text-decoration: none !important;
  color: inherit !important;
}
.portfolio-card__title a:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.portfolio-card__year {
  color: inherit; /* Inherit color from parent, will be white when inverted */
  font-size: 0.9em;
  font-weight: normal;
  white-space: nowrap;
  opacity: 0.9; /* Slightly dimmer than title */
}

.portfolio-card__meta {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 0.75em;
}

.portfolio-card__role {
  font-weight: 500;
}

.portfolio-card__client {
  color: #888;
}

.portfolio-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.75em;
}

.portfolio-card__tech-item {
  display: inline-block;
  padding: 0.15em 0.5em;
  background: #657b83;
  border-radius: 3px;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fdf6e3;
  border: 1px solid #657b83;
}

.portfolio-card__duration {
  font-size: 0.85em;
  color: #888;
  font-style: italic;
}

.portfolio-collaborators__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.portfolio-card__collaborator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25em;
}

.portfolio-card__external-icon {
  font-size: 1.2em;
  color: #007acc;
  font-weight: normal;
}

.portfolio-card__url {
  font-size: 0.85em;
  color: #007acc;
  margin-top: 0.5em;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}

@media (prefers-color-scheme: dark) {
  .portfolio-card {
    background: #1a1a1a;
    border-color: #333;
  }
  .portfolio-card:hover {
    border-color: #666;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  }
  .portfolio-card--current {
    border-left-color: #4fc3f7;
  }
  .portfolio-card__title {
    color: #e0e0e0;
  }
  .portfolio-card__year,
  .portfolio-card__meta,
  .portfolio-card__client {
    color: #999;
  }
  .portfolio-card__tech-item {
    background: #fdf6e3;
    border-color: #fdf6e3;
    color: #657b83;
  }
  .portfolio-card__duration {
    color: #777;
  }
  .portfolio-card__external-icon {
    color: #4fc3f7;
  }
  .portfolio-card__url {
    color: #4fc3f7;
  }
}
@media (max-width: 600px) {
  .portfolio-card__content {
    padding: 1em;
  }
  .portfolio-card__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .portfolio-card__title {
    font-size: 1.1em;
    min-width: unset;
  }
  .portfolio-card__year {
    font-size: 0.85em;
  }
}
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 */
.newsletter--page {
  --bracket-width: 2.5px;
  --bracket-arm: 0.65rem;
  --bracket-color: color-mix(in srgb, #2aa198 40%, transparent);
  --accent: #2aa198;
  --flow: 1.6rem;
  position: relative;
  margin-block: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-left: var(--bracket-width) solid var(--bracket-color);
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color));
  background-size: var(--bracket-arm) var(--bracket-width);
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}
.newsletter--page::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--bracket-arm);
  border-right: var(--bracket-width) solid var(--bracket-color);
  border-top: var(--bracket-width) solid var(--bracket-color);
  border-bottom: var(--bracket-width) solid var(--bracket-color);
  border-radius: 0 3px 3px 0;
}
.newsletter--page > * {
  margin-block: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.newsletter--page > * + * {
  margin-block-start: var(--flow);
  margin-top: var(--flow);
}
.newsletter--page fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.newsletter--page .news__hero-label + fieldset {
  margin-block-start: 0.4rem;
  margin-top: 0.4rem;
}
.newsletter--page .g-recaptcha {
  margin-block-start: var(--flow);
  margin-top: var(--flow);
}
.newsletter--page fieldset.clear {
  margin-block-start: var(--flow);
  margin-top: var(--flow);
}
.newsletter--page p {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #073642;
  margin: 0;
}

.news__hero-label {
  display: block;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #2aa198);
  opacity: 0.75;
  margin-bottom: 0.35rem;
  user-select: none;
}

.news__label {
  display: block;
  padding-top: 0;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant: normal;
  color: #839496;
  margin-bottom: 0.25rem;
  text-align: left;
}

.news__row {
  display: flex;
  gap: 0.6rem;
}
@media (max-width: 699px) {
  .news__row {
    flex-direction: column;
    gap: 0.7rem;
  }
}

.news__field {
  flex: 1;
}

.news__field--email {
  flex: 1.5;
}

.news__checkbox__label {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.78rem;
  color: #073642;
  cursor: pointer;
}

.news__input {
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 0.88rem;
  border: 1.5px solid color-mix(in srgb, #93a1a1 60%, transparent);
  background: #fff;
  padding: 0.5rem 0.7rem;
  margin: 0;
  border-radius: 3px;
  color: #073642;
  transition: border-color 0.15s ease;
}
.news__input:focus {
  outline: none;
  border-color: #2aa198;
}
.news__input::placeholder {
  color: #93a1a1;
}

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

.news__input--button {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 0.55rem 1rem;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #2aa198;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: none;
  transition: opacity 0.15s ease;
}
.news__input--button:hover {
  opacity: 0.85;
}
.news__input--button:active {
  opacity: 0.75;
}

.asterisk {
  color: #dc322f;
}

.indicates-required {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: #839496;
  margin-top: 0.3rem;
}

.news__group {
  margin: 0.4rem 0 0;
  padding-left: 0;
}
.news__group li {
  list-style: none;
  margin-bottom: 0.5rem;
}

.news__card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid color-mix(in srgb, #93a1a1 50%, transparent);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.news__card:hover {
  border-color: #93a1a1;
  background-color: color-mix(in srgb, #eee8d5 30%, transparent);
}
.news__card input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: #2aa198;
  cursor: pointer;
}
.news__card:has(input:checked) {
  border-color: #2aa198;
  background-color: color-mix(in srgb, #2aa198 5%, transparent);
}

.news__card__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.news__card__text strong {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #073642;
}
.news__card__text small {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 0.7rem;
  color: #839496;
  font-style: normal;
}

.news__divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, #93a1a1 35%, transparent);
  margin: 1.2rem 0;
}

.gdpr__checkbox {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #2aa198;
  cursor: pointer;
}

.news__consent {
  margin-block-start: 0;
}

.gdpr__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
  margin-bottom: 0;
}
.gdpr__wrapper > input[type=checkbox] {
  float: none;
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: #2aa198;
  cursor: pointer;
}
.gdpr__wrapper > label {
  padding-top: 0;
}

.gdpr__label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #657b83;
}
.gdpr__label a {
  color: #2aa198;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #2aa198 35%, transparent);
  text-underline-offset: 2px;
}

/** 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;
  }
}

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

/** 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;
}
@media (min-width: 700px) {
  .action {
    margin-left: 0;
    margin-right: 0;
  }
}
.action {
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border-radius: 0.4em;
}

.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;
  }
}