@font-face {
  font-family: 'charter';
  src: url('fonts/charter_regular-webfont.eot');
  src: url('fonts/charter_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'charter';
  src: url('fonts/charter_italic-webfont.eot');
  src: url('fonts/charter_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

/* === Reset === */

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* === Base === */

html {
  height: 100%;
  font-size: 20px;
}

body {
  font-family: 'charter', Georgia, serif;
  margin: 0;
  padding: 0 0.5em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1000px;
  min-height: 100%;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

body>* {
  font-size: 100%;
}

p,
li {
  margin-bottom: 1em;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  text-shadow:
    0.03em 0 #fffff8, -0.03em 0 #fffff8,
    0 0.03em #fffff8, 0 -0.03em #fffff8,
    0.06em 0 #fffff8, -0.06em 0 #fffff8,
    0.09em 0 #fffff8, -0.09em 0 #fffff8,
    0.12em 0 #fffff8, -0.12em 0 #fffff8,
    0.15em 0 #fffff8, -0.15em 0 #fffff8;
  background-position: 0% 93%, 100% 93%, 0% 93%;
}

sup a {
  background: 0;
}

sup a:hover {
  color: #8e2300;
}

a code {
  text-shadow: none;
}

img,
video {
  width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

/* === Header / Nav === */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0 0.8em;
  border-bottom: 3px solid black;
}

header .site-name {
  font-size: 130%;
  font-style: italic;
  font-weight: 500;
  background: none;
  text-shadow: none;
}

header nav {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

header nav a {
  font-size: 90%;
  background: none;
  text-shadow: none;
}

header nav a.active {
  font-size: 130%;
}

.nav-icons {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.nav-icons a.icon-link {
  display: flex;
  align-items: center;
  opacity: 0.5;
  background: none;
  text-shadow: none;
}

.nav-icons a.icon-link:hover {
  opacity: 1;
}

.nav-icons .nav-icon-link {
  display: flex;
}

.date {
  font-style: italic;
  margin: 0.3em 0;
}

/* === Content === */

.content {
  display: block;
  hyphens: auto;
  text-align: justify;
  padding-top: 2em;
}

.content h1 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 0.8em;
}

.content h2 {
  font-size: 125%;
  font-weight: 500;
  padding: 0.5em 0;
}

.content h3 {
  font-size: 110%;
  font-weight: 500;
  padding: 0.5em 0;
}

.content h4 {
  font-size: 100%;
  font-weight: 500;
  padding: 0.5em 0;
}

.content hr {
  margin: 1.5em 0;
}

.footer {
  padding-top: 1em;
  border-top: 1px solid black;
  font-size: 90%;
}

/* === Code === */

code {
  font-size: 0.85em;
  font-family: 'Menlo', 'Consolas', monospace;
  background: #e8ecf0;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

pre {
  margin-bottom: 1em;
  padding: 5px;
  background: #d9e4ea;
  overflow-x: auto;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 90%;
  hyphens: none;
}

/* === Lists === */

ul li {
  margin-left: 0.5em;
  border-left: 2px solid;
  padding-left: 0.5em;
  list-style: none;
}

ol li {
  margin-left: 1em;
  border-left: 2px solid;
  padding-left: 0.5em;
}

/* === Tables === */

table {
  margin-bottom: 1.5em;
  border-collapse: collapse;
  width: 95%;
  font-size: 80%;
}

table tr+tr {
  border: 1px solid #ccc;
  border-top: 2px solid #ccc;
}

table td {
  border: 1px solid #ccc;
  padding: 0.4em;
  hyphens: none;
}

table th {
  font-weight: normal;
  padding: 0.3rem 0.5rem;
  line-height: 1.05;
  border: 1px solid #ccc;
  border-bottom: 2px solid #999;
}

/* === Figures === */

figcaption,
.figure-label {
  text-align: center;
  font-size: 80%;
  margin-bottom: 1.5em;
}

table+.figure-label {
  margin-top: -1.2em;
}

/* === Blog index === */

.blog-index {
  text-align: left;
}

.blog-index h1 {
  font-weight: 500;
  font-size: 30px;
}

.blog-index ul {
  list-style-type: none;
}

.blog-index li {
  padding-bottom: 0.2em;
  border-left: none;
  margin-left: 0;
}

.blog-index a {
  color: #222;
}

.blog-index a:hover {
  border-bottom: 2px solid #d6dde3;
}

.bottom a {
  border-bottom: 2px solid #d6dde3;
}

/* === Projects index === */

.projects-index {
  text-align: left;
}

.projects-index h1 {
  font-weight: 500;
  font-size: 30px;
}

.project-card {
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  background: none;
  text-shadow: none;
  color: inherit;
  margin: 1.2em 0;
}

.project-card img {
  width: 240px;
  flex-shrink: 0;
  border-radius: 4px;
}

.project-card-body {
  line-height: 1.45;
}

.project-card-body strong {
  font-size: 110%;
}

.project-card-body em {
  font-size: 90%;
  color: #555;
}

.project-card:hover img {
  opacity: 0.9;
}

.project-status {
  display: inline-block;
  font-size: 60%;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #d9e4ea;
  padding: 0.15em 0.5em;
  margin-left: 0.3em;
  vertical-align: middle;
  border-radius: 2px;
  text-shadow: none;
}

/* === Video embed === */

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 1.5em;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* === Landing page === */

.index {
  text-align: left;
}

/* === Venue badges === */

a.venue-a,
span.venue-a {
  display: inline-block;
  font-size: 65%;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #d9e4ea;
  padding: 0.15em 0.5em;
  margin-left: 0.3em;
  vertical-align: middle;
  border-radius: 2px;
  text-shadow: none;
  color: inherit;
}

/* === Pages (imprint, gdpr) === */

.page {
  text-align: left;
}

.page h1 {
  font-weight: 500;
  font-size: 30px;
}

.page a {
  color: #222;
  text-decoration: none;
}

.page hr {
  margin: 1em 0;
}

/* === Responsive === */

@media (max-width: 880px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 700px) {
  html {
    font-size: 17px;
  }

  body {
    max-width: 100%;
  }

  header .site-name {
    font-size: 110%;
  }

  header nav a {
    font-size: 80%;
  }

  header nav a.active {
    font-size: 100%;
  }


  header nav {
    gap: 0.7em;
  }

  .content h1 {
    font-size: 24px;
  }

  .content h2 {
    padding-left: 0;
  }

  .content h3 {
    padding-left: 0;
  }

  .content h4 {
    padding-left: 0;
  }

  pre {
    font-size: 80%;
    padding: 0.5em;
  }

  table {
    font-size: 70%;
    width: 100%;
    display: block;
    overflow-x: auto;
  }

  .footer {
    margin: 0;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  .project-card {
    flex-direction: column;
  }

  .project-card img {
    width: 100%;
  }
}

/* === Syntax highlighting (Tokyonight) === */

.codehilite {
  background: #1a1b26;
  color: #a9b1d6;
  font-size: 90%;
  border-radius: 4px;
  padding: 0.8em;
  margin-bottom: 1em;
  overflow-x: auto;
}

.codehilite pre {
  font-size: inherit;
  background: inherit;
  margin-bottom: 0;
  padding: 0;
  color: inherit;
}

.codehilite code {
  color: inherit;
}

.codehilite .hll {
  background-color: #2e3c64
}

.codehilite .c {
  color: #565f89;
  font-style: italic
}

.codehilite .err {
  color: #db4b4b
}

.codehilite .k {
  color: #9d7cd8
}

.codehilite .o {
  color: #89ddff
}

.codehilite .ch {
  color: #565f89;
  font-style: italic
}

.codehilite .cm {
  color: #565f89;
  font-style: italic
}

.codehilite .cp {
  color: #565f89
}

.codehilite .cpf {
  color: #565f89;
  font-style: italic
}

.codehilite .c1 {
  color: #565f89;
  font-style: italic
}

.codehilite .cs {
  color: #565f89;
  font-style: italic
}

.codehilite .gd {
  color: #db4b4b
}

.codehilite .ge {
  font-style: italic
}

.codehilite .gh {
  color: #7aa2f7;
  font-weight: bold
}

.codehilite .gi {
  color: #9ece6a
}

.codehilite .go {
  color: #565f89
}

.codehilite .gp {
  color: #7aa2f7;
  font-weight: bold
}

.codehilite .gs {
  font-weight: bold
}

.codehilite .gu {
  color: #2ac3de;
  font-weight: bold
}

.codehilite .gt {
  color: #db4b4b
}

.codehilite .kc {
  color: #ff9e64
}

.codehilite .kd {
  color: #9d7cd8
}

.codehilite .kn {
  color: #9d7cd8
}

.codehilite .kp {
  color: #9d7cd8
}

.codehilite .kr {
  color: #9d7cd8
}

.codehilite .kt {
  color: #2ac3de
}

.codehilite .m {
  color: #ff9e64
}

.codehilite .s {
  color: #9ece6a
}

.codehilite .na {
  color: #73daca
}

.codehilite .nb {
  color: #e0af68
}

.codehilite .nc {
  color: #2ac3de
}

.codehilite .no {
  color: #ff9e64
}

.codehilite .nd {
  color: #e0af68
}

.codehilite .ni {
  color: #c0caf5
}

.codehilite .ne {
  color: #f7768e
}

.codehilite .nf {
  color: #7aa2f7
}

.codehilite .nl {
  color: #73daca
}

.codehilite .nn {
  color: #2ac3de
}

.codehilite .nt {
  color: #f7768e
}

.codehilite .nv {
  color: #c0caf5
}

.codehilite .ow {
  color: #9d7cd8
}

.codehilite .w {
  color: #a9b1d6
}

.codehilite .mb {
  color: #ff9e64
}

.codehilite .mf {
  color: #ff9e64
}

.codehilite .mh {
  color: #ff9e64
}

.codehilite .mi {
  color: #ff9e64
}

.codehilite .mo {
  color: #ff9e64
}

.codehilite .sa {
  color: #9ece6a
}

.codehilite .sb {
  color: #9ece6a
}

.codehilite .sc {
  color: #9ece6a
}

.codehilite .dl {
  color: #9ece6a
}

.codehilite .sd {
  color: #9ece6a;
  font-style: italic
}

.codehilite .s2 {
  color: #9ece6a
}

.codehilite .se {
  color: #ff9e64
}

.codehilite .sh {
  color: #9ece6a
}

.codehilite .si {
  color: #2ac3de
}

.codehilite .sx {
  color: #9ece6a
}

.codehilite .sr {
  color: #b4f9f8
}

.codehilite .s1 {
  color: #9ece6a
}

.codehilite .ss {
  color: #ff9e64
}

.codehilite .bp {
  color: #e0af68
}

.codehilite .fm {
  color: #7aa2f7
}

.codehilite .vc {
  color: #c0caf5
}

.codehilite .vg {
  color: #c0caf5
}

.codehilite .vi {
  color: #c0caf5
}

.codehilite .vm {
  color: #c0caf5
}

.codehilite .il {
  color: #ff9e64
}