:root {
  --content-width: 77.5rem;
  --padding: 1rem;
  --border-radius: .25rem;
}

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

html {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-style: var(--font-style);
  font-variation-settings: "opsz" 12;
  color: var(--on-app);
  background: var(--app);
}

body {
  padding: 0;
}

main {
  width: min(var(--content-width), 100vw - var(--padding) * 4);
  margin-inline: auto;
}

code {
  font-family: monospace;
  background: var(--surface);
  padding-inline: 0.25em;
}

cite {
  font: italic 400 1rem "HelveticaNowItalic", "Helvetica", "Arial", sans-serif;
  font-variation-settings: "opsz" 12;
}

blockquote {
  margin: 0;
  padding-inline-start: 0.5em;
  border-inline-start: 2px solid var(--border);
}

ul,
ol {
  padding-left: 1.2em;
}

ul ::marker {
  color: var(--primary);
}

menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
menu a {
  text-decoration-color: transparent;
}

abbr {
  text-decoration-style: dotted;
  text-underline-offset: 0.25em;
  cursor: help;
}

em {
  font: italic 400 1rem "HelveticaNowItalic", "Helvetica", "Arial", sans-serif;
}

strong {
  font: normal 400 1rem "HelveticaNowRoman", "Helvetica", "Arial", sans-serif;
  font-weight: bold;
}

mark {
  background-color: var(--highlight-color);
  padding-inline: 0.25em;
}

img {
  width: 100%;
}

[type=search] {
  -webkit-appearance: searchfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

:where(a, a:visited) {
  color: var(--on-app);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

:where(a:hover) {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}

/* utilities */
.-noScroll {
  height: 100vh;
  width: 100vw;
  overflow: clip;
}
