html, body {
  font-family: Play, sans-sefif;
  min-height: 100%;
  scroll-behavior: smooth;

  color: var(--color-fg);
  background-color: var(--color-bg);
}

body {
  overflow-y: scroll;
  font-size: 20px;
  line-height: 1.6;
}

/* */

*::selection {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

*:focus-visible {
  outline: calc(0.5 * var(--step)) solid var(--color-fg);
  outline-offset: calc(0.5 * var(--step));
}

/* Links */

a {
  color: inherit;
  text-decoration: none;
  border-block-end: calc(0.5 * var(--step)) solid;
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
  font-family: Xecut, Play, sans-serif;
  font-weight: normal;
  line-height: 1.3;
  scroll-margin: calc(4 * var(--step));
}
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    scroll-margin: calc(10 * var(--step));
  }
}
h1:target:after,
h2:target:after,
h3:target:after,
h4:target:after,
h5:target:after,
h6:target:after {
  content: "|";
  color: var(--color-inactive);
}

h1 { font-size: calc(9 * var(--step)); }
h2 { font-size: calc(5 * var(--step)); }
h3 { font-size: calc(4.5 * var(--step)); }
h4 { font-size: calc(4 * var(--step)); }
h5 { font-size: calc(3.5 * var(--step)); }
h6 { font-size: calc(3 * var(--step)); }

h1 {
  line-height: 1;
  margin-block-start: 0;
  margin-block-end: calc(8 * var(--step));
}
@media (max-width: 768px) {
  h1 {
    font-size: calc(7 * var(--step));
    margin-block-end: calc(3 * var(--step));
  }
}
h2 { margin-block: calc(4 * var(--step)); }
h3 { margin-block: calc(4 * var(--step)); }
h4 { margin-block: calc(4 * var(--step)); }
h5 { margin-block: calc(3 * var(--step)); }
h6 { margin-block: calc(3 * var(--step)); }

/* Code and quotes*/

pre, blockquote {
  border-inline-start: calc(0.75 * var(--step)) solid;
  border-color: var(--color-fg);
  margin-inline-start: 0;
  padding-inline-start: calc(2 * var(--step));
}

pre {
  background-color: var(--color-inactive);
  padding-block: calc(1 * var(--step));
  padding-inline: calc(2 * var(--step));
  overflow-x: auto;
}

pre > code {
  background-color: unset;
  padding: 0;
}

code {
  /* font-family: "Fira Code", monospace; */
  font-family: monospace;
  background-color: var(--color-inactive);
  padding: calc(0.5 * var(--step)) calc(1 * var(--step));
}

/* Lists */

ul {
  list-style: square;
}

/* Tables */

.table-wrapper {
  overflow-x: auto;
}

table {
  margin: 0;
  margin-block-end: calc(4 * var(--step));
  padding: 0;
  border-collapse: collapse;
  width: 100%;
}

thead {
  border-block-end: calc(0.5 * var(--step)) solid var(--color-fg);
}

th, td {
  text-align: start;
  border-block-end: calc(0.25 * var(--step)) solid;
  border-color: var(--color-inactive);
  padding-inline: calc(2 * var(--step));
  padding-block-start: calc(2 * var(--step));
  padding-block-end: calc(1.75 * var(--step));
}

/* Black and White Images */

img.black-on-white {}
@media (prefers-color-scheme: dark) {
  img.black-on-white {
    filter: invert(1);
  }
}
/* Fix for light browser theme and enabled DarkReader extension */
[data-darkreader-scheme="dark"] img.black-on-white {
  filter: invert(1);
}
/* Fix for printed version with enabled DarkReader extension */
@media print {
  img.black-on-white {
    filter: none !important;
  }
}

/* Separators */

hr {
  border-width: calc(0.25 * var(--step));
  border-color: var(--color-inactive);
  border-style: solid;
  margin-block: calc(5 * var(--step));
}

/* Semantic Tags */

address {
  font-style: normal;
  text-wrap: balance;
  margin-block: 1em;
}

/* External Elements */

.osm-iframe {
  display: block;
  box-sizing: border-box;
  border: calc(0.5 * var(--step)) solid var(--color-fg);
  filter: grayscale(1);
}