h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 700;
}

html {font-size: 100%;} /* 16px */

h1 {font-size: 4.210rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}

a:link {
  color: var(--primary);
}

a:visited {
  color: var(--secondary);
}

@media (any-hover: hover) {
  a:visited:hover,
  a:link:hover {
    color: var(--accent);
  }
}

::selection {
  background: var(--primary);
  color: var(--primary-complementary);
}

kbd > kbd, code {
  background: var(--background-lighter);
  font-size: .8em;
  padding: .1em .4em;
  border: 1px solid white;
  border-radius: .5em;
  font-family: var(--mono-font);
  letter-spacing: .1em;
}

input {
  background: var(--background-lighter);
  color: var(--text);
}

@media (any-hover: hover) {
  p:hover,
  *:hover::before {
    filter: brightness(1.35);
  }
}

*:focus {
  outline: double var(--primary);
  border: 2px solid #0000;
}