/* Theme for Kirby 3 by Till Cremer: https://tillcremer.de */
:root {
  /* Background color */
  --background-color: #f8f8f8;
  /* Font color */
  --font-color: #282828;
  /** Font sizes */
  --tiny: 12pt;
  --small: 14pt;
  --medium: 16pt;
  --large: 18pt;
  /* Line height, top and bottom margin */
  --vertical-margin: 1.25rem;
  /* Left and right margin */
  --horizontal-margin: 2rem;
}

/* Typography */
@font-face {
  font-family: 'Keroine-DouxExtreme';
  src: url('../fonts/Keroine-DouxExtreme.eot');
  src: url('../fonts/Keroine-DouxExtreme.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Keroine-DouxExtreme.woff2') format('woff2'),
    url('../fonts/Keroine-DouxExtreme.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Keroine-IntenseLegere';
  src: url('../fonts/Keroine-IntenseLegere.eot');
  src: url('../fonts/Keroine-IntenseLegere.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Keroine-IntenseLegere.woff2') format('woff2'),
    url('../fonts/Keroine-IntenseLegere.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

* {
  font-family: 'Keroine-DouxExtreme', serif;
  font-size: var(--large);
  line-height: var(--vertical-margin);
  color: var(--font-color);
  font-weight: normal;
}

em,
i {
  font-family: 'Keroine-IntenseLegere', serif;
}

@media only screen and (max-width: 768px) {
  * {
    /** Font size */
    font-size: var(--medium);
    /* Line height, top and bottom margin */
    line-height: var(--vertical-margin);
  }
}

@media only screen and (max-width: 640px) {
  * {
    /** Font sizes */
    font-size: var(--small);
    /* Line height, top and bottom margin */
    line-height: var(--vertical-margin);
  }
}

@media only screen and (max-width: 414px) {
  * {
    /** Font sizes */
    font-size: var(--tiny);
    /* Line height, top and bottom margin */
    line-height: var(--vertical-margin);
  }

  :root {
    /* Left and right margin */
    --horizontal-margin: 1rem;
  }
}

h1, p {
  margin: 0 0 var(--vertical-margin);
}

h2, h4, h5, h6, ul, blockquote, pre, code {
  margin: 0 0 var(--vertical-margin) 1rem;
}

h2 {
  display: none;
}

h3 {
  margin: calc(2 * var(--vertical-margin)) 0 var(--vertical-margin) 1rem;
}

ul {
  list-style: none;
  padding: 0;
}

/* Typography end */
body {
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: var(--vertical-margin);
  left: var(--horizontal-margin);
  z-index: +2;
}

main {
  position: relative;
}

/* Navigation */
nav:first-child {
  position: fixed;
  top: var(--vertical-margin);
  right: var(--horizontal-margin);
  z-index: +1;
}

nav:first-child li {
  display: inline-block;
  margin-left: 0.25rem;
}

/* Navigation end */
/* Content */
article {
  position: inherit;
  margin: calc(4 * var(--vertical-margin)) 0;
}

section {
  margin: 0 var(--horizontal-margin) calc(4 * var(--vertical-margin));
  max-width: 768px;
}

table {
  margin-bottom: calc(2 * var(--vertical-margin));
}

table,
th,
td {
  border: none;
  border-collapse: collapse;
}

th,
td {
  vertical-align: top;
  text-align: left;
}

td:first-child {
	white-space: nowrap;
}

th {
  padding: calc(2 * var(--vertical-margin)) 0 var(--vertical-margin) 1rem;
}

/** Times */
/*

td:nth-child(2) {
  padding-left: calc(1rem + 0.5rem);
  width: 100%;
}

td:nth-child(2)::before {
  content: '— ';
  margin-left: calc(-1rem - 0.25rem);
}

/** Times end */
/** Keroine */
td:nth-child(2) {
  padding-left: calc(0.88rem + 0.5rem);
  width: 100%;
}

td:nth-child(2)::before {
  content: '— ';
  margin-left: calc(-0.88rem - 0.25rem);
}

/** Keroine end */
figure {
  margin: var(--vertical-margin) auto;
}

img {
  display: block;
  border: none;
  position: relative;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: calc(768px + 2 * var(--horizontal-margin));
  margin: 0 auto;
}

img.portrait {
  width: calc(768px + 2 * var(--horizontal-margin));
  max-height: none;
}

video {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--horizontal-margin));
  max-height: 768px;
  margin: 0 auto;
}

video.portrait {
  width: 768px;
  max-height: none;
}

audio {
  display: block;
  width: 768px;
  height: auto;
  max-width: calc(100% - 2 * var(--horizontal-margin));
  margin: 0 auto;
}

figcaption {
  margin: var(--vertical-margin) var(--horizontal-margin) calc(2 * var(--vertical-margin));
  max-width: 768px;
}

/* Content end */
/* Index */
nav:nth-child(2) ul:first-child {
  min-height: calc(100vh - calc(12 * var(--vertical-margin)));
}

/* Index end */