:root {
  --content-width: 98rem;
  --body-padding: 6.4rem;
  --navbar-padding: 5.8rem;
}

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

[hidden] { display: none !important; }

html,
body {
  margin: 0;
}

html {
  background: var(--color-bg--main);
  color: var(--color-txt);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.4;

  -webkit-text-size-adjust: 100%;

  scroll-padding-top: var(--navbar-padding);
  scroll-padding-bottom: 7rem;
}

body {
  font-size: var(--font-size-medium);
  padding: var(--navbar-padding) 0 var(--body-padding);
  margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  &.display--standalone { padding-top: 0; }
}

main:focus,
summary:focus { outline: none; }

hr {
  display: flex;
  height: 1rem;
  margin: 1rem 0;
  background: url("/assets/line-black-d5c341fe.svg") repeat-x;
  background-size: auto 0.5rem;
  border: 0;
  overflow: visible;

  [data-color-scheme="dark"] & { background-image: url("/assets/line-white-bd2fd6c1.svg"); }

  @supports(mix-blend-mode: lighten) {
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      mix-blend-mode: screen;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 80%);
    }

    [data-color-scheme="dark"] & {
      &::after { mix-blend-mode: darken; }
    }
  }
}

.hr--thin {
  height: 1px;
}

.hr--subtle {
  background: var(--color-border);
}

.hr--plain::after {
  display: none;
}

a { -webkit-tap-highlight-color: transparent; }

figure {
  display: inherit;
  margin: 0;
}

kbd {
  color: var(--color-txt--reversed);
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 0.15em 0.3em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--font-family--mono);
}

mark {
  background-color: var(--color-primary);
  color: var(--color-almost-black);
  display: inline-block;
  padding: 0 0.125em;
  border-radius: 0.2em;
}

button {
  margin: 0;
  border: 0;
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-size: inherit;
}