:root {
  --header-height: 64px;
  --dora-black: rgb(34, 30, 39);
  --dora-warm-white: rgb(240, 238, 234);
  --dora-sky-blue: rgb(73, 160, 236);
  --dora-vermillion: rgb(245, 90, 36);
  --dora-spotlight-yellow: rgb(240, 225, 90);
  --dora-mauve: rgb(184, 175, 254);
  --dora-deep-plum: rgb(114, 2, 92);
  --dora-prussian-blue: rgb(11, 57, 84);
  --dora-primary-dark: var(--dora-black);
  --dora-primary-light: var(--dora-warm-white);
  --dora-highlight: var(--dora-spotlight-yellow);
  --dora-secondary-a: var(--dora-vermillion);
  --dora-secondary-b: var(--dora-sky-blue);
  --dora-secondary-c: var(--dora-mauve);
  --dora-tertiary-a: var(--dora-deep-plum);
  --dora-tertiary-b: var(--dora-prussian-blue);
  --background: white;
  --grey-10: color-mix(in srgb, var(--dora-black), var(--background) 90%);
  --grey-15: color-mix(in srgb, var(--dora-black), var(--background) 85%);
  --grey-20: color-mix(in srgb, var(--dora-black), var(--background) 80%);
  --grey-30: color-mix(in srgb, var(--dora-black), var(--background) 70%);
  --grey-40: color-mix(in srgb, var(--dora-black), var(--background) 60%);
  --grey-50: color-mix(in srgb, var(--dora-black), var(--background) 50%);
  --grey-60: color-mix(in srgb, var(--dora-black), var(--background) 40%);
  --grey-70: color-mix(in srgb, var(--dora-black), var(--background) 30%);
  --grey-80: color-mix(in srgb, var(--dora-black), var(--background) 20%);
  --grey-90: color-mix(in srgb, var(--dora-black), var(--background) 10%);
  --dora-secondary-b-30: color-mix(in srgb, var(--dora-secondary-b), var(--background) 70%);
  --dora-secondary-c-30: color-mix(in srgb, var(--dora-secondary-c), var(--background) 70%); }

:root {
  --header-height: 64px;
  --dora-black: rgb(34, 30, 39);
  --dora-warm-white: rgb(240, 238, 234);
  --dora-sky-blue: rgb(73, 160, 236);
  --dora-vermillion: rgb(245, 90, 36);
  --dora-spotlight-yellow: rgb(240, 225, 90);
  --dora-mauve: rgb(184, 175, 254);
  --dora-deep-plum: rgb(114, 2, 92);
  --dora-prussian-blue: rgb(11, 57, 84);
  --dora-primary-dark: var(--dora-black);
  --dora-primary-light: var(--dora-warm-white);
  --dora-highlight: var(--dora-spotlight-yellow);
  --dora-secondary-a: var(--dora-vermillion);
  --dora-secondary-b: var(--dora-sky-blue);
  --dora-secondary-c: var(--dora-mauve);
  --dora-tertiary-a: var(--dora-deep-plum);
  --dora-tertiary-b: var(--dora-prussian-blue);
  --background: white;
  --grey-10: color-mix(in srgb, var(--dora-black), var(--background) 90%);
  --grey-15: color-mix(in srgb, var(--dora-black), var(--background) 85%);
  --grey-20: color-mix(in srgb, var(--dora-black), var(--background) 80%);
  --grey-30: color-mix(in srgb, var(--dora-black), var(--background) 70%);
  --grey-40: color-mix(in srgb, var(--dora-black), var(--background) 60%);
  --grey-50: color-mix(in srgb, var(--dora-black), var(--background) 50%);
  --grey-60: color-mix(in srgb, var(--dora-black), var(--background) 40%);
  --grey-70: color-mix(in srgb, var(--dora-black), var(--background) 30%);
  --grey-80: color-mix(in srgb, var(--dora-black), var(--background) 20%);
  --grey-90: color-mix(in srgb, var(--dora-black), var(--background) 10%);
  --dora-secondary-b-30: color-mix(in srgb, var(--dora-secondary-b), var(--background) 70%);
  --dora-secondary-c-30: color-mix(in srgb, var(--dora-secondary-c), var(--background) 70%); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin-bottom: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
  line-height: 120%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-wrap: balance; }

h1 {
  font-size: 2.75rem; }

h2 {
  font-size: 2rem; }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0; }

h5 {
  font-size: 11px;
  letter-spacing: 1.25px;
  color: #777;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0; }

hr {
  border: none;
  border-top: 1px solid #aeb0b7;
  margin: 2em 0; }

a.author {
  display: inline-block;
  font-weight: 200;
  border: 1px solid var(--grey-15);
  padding: 0 0.4rem;
  text-decoration: none;
  border-radius: 0.4rem;
  margin-right: 0.5em; }

@media (max-width: 800px) {
  h1 {
    font-size: 24px; }
  h2 {
    font-size: 20.4px; }
  h3 {
    font-size: 16.8px; }
  h4 {
    font-size: 15.6px; }
  h5 {
    font-size: 10.08px; } }

body main {
  max-width: 1200px; }

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: pretty; }