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

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-bottom: 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 { font-size: calc(9 * var(--step)); }
h2 { font-size: calc(6 * var(--step)); }
h3 { font-size: calc(5 * var(--step)); }
h4 { font-size: calc(4.5 * var(--step)); }
h5 { font-size: calc(4 * var(--step)); }
h6 { font-size: calc(3.5 * var(--step)); }

h1 {
  line-height: 1;
  margin-block-start: 0;
  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; */
  background-color: var(--color-inactive);
  padding: calc(0.5 * var(--step)) calc(1 * var(--step));
}

/* Lists */

ul {
  list-style: square;
}

/* Tables */

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

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

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