:root {
  /** System Font stacks from modernfontstacks.com */
  --font-sans: system-ui, sans-serif;
  --font-sans2:
    Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium',
    'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --font-serif:
    Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small',
    serif;
  --font-mono:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;

  /** Font sizes based on Golden Section */
  --font-size: 16px;
  --font-size-small: 10px;
  --font-size-1: 110px;
  --font-size-2: 68px;
  --font-size-3: 42px;
  --font-size-4: 26px;
}

html {
  /** Disable text size adjustment */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size);
}

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

h1 {
  font-size: var(--font-size-1);
}
h2 {
  font-size: var(--font-size-2);
}
h3 {
  font-size: var(--font-size-3);
}
h4,
h5,
h6 {
  font-size: var(--font-size-4);
}

p {
  line-height: 1.618;
}

small,
sub {
  font-size: var(--font-size-small);
}

code {
  font-family: var(--font-mono);
}

/** Form elements */

button,
input,
input[type='submit'],
input[type='reset'],
select,
textarea {
  font-size: var(--font-size);
}

input,
textarea {
  font-family: var(--font-sans);
}

button,
input[type='submit'],
input[type='reset'],
label {
  font-family: var(--font-sans2);
}