@font-face {
  font-family: 'Exo2';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/Exo2-BlackItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/Raleway-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  src: url('/fonts/SourceSans3VF-Upright.otf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  src: url('/fonts/SourceSans3VF-Italic.otf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  src: url('/fonts/SourceSerif4Variable-Roman.otf.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  src: url('/fonts/SourceSerif4Variable-Italic.otf.woff2') format('woff2');
}

:root {
  --font-family-body: 'Source Serif 4';
  --font-size-body: 1.2rem;
  --font-weight-body: 350;
  --line-height-body: 1.25;

  --font-family-headings: 'Source Sans 3';
  --font-size-headings: 1.2rem;
  --font-weight-headings: 750;
}

h1,
h2,
h3,
p,
dl,
ol,
ul {
  margin: 0;
}

html {
  padding-bottom: 10rem;
  --color-text: #202020;
}

body {
  background-color: #ffffff;
  color: var(--color-text);
  font-family: var(--font-family-body), sans-serif;
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  max-width: 8.5in;
  margin: auto;
  padding: 0 1rem;
}

h1 {
  font-family: var(--font-family-headings);
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 1.5em;
}

h2 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-headings);
  font-weight: var(--font-weight-headings);
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

dl {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: 0fr 1fr;
}

dt {
  grid-column: 1;
  font-family: var(--font-family-headings);
  font-size: var(--font-size-headings);
  font-weight: var(--font-weight-headings);
  text-transform: uppercase;
}

dd {
  grid-column: 2;
  margin-left: 0;
}

ul,
ol {
  padding-left: 0;
}

strong {
  font-weight: 500;
}

article>*+* {
  margin-top: 2em;
}

dl>dd~dd,
dl>dt~dt {
  margin-top: 0.5em;
}

.header {
  font-family: 'Exo2';
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 0;
  position: relative;
  background: linear-gradient(90deg, #f00, #ff0 40%, #2e2 55%, #4cd 70%, #6ab 80%, #c8c 90%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: default;
}

.header::after {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  content: "/////////////////////////////";
}

p+p {
  margin-top: 1em;
}

summary {
  cursor: pointer;
}

.settings {
  color: gray;
}

.settings>div {
  display: flex;
  font-size: 0.8em;
}

.settings fieldset {
  display: flex;
  flex-direction: column;
}

#scale {
  width: 3em;
}

.missing-renderer {
  background-color: lightsalmon !important;
}

.banner {
  padding: 1rem 0;
}