* {
  margin: 0;
  padding: 0;
  font: inherit;
}
*,
::after,
::before,
legend {
  box-sizing: border-box;
}
html {
  hanging-punctuation: first last;
  -webkit-text-size-adjust: 100%;
}
hr {
  box-sizing: content-box;
  height: 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
img,
picture,
video {
  width: 100%;
  max-width: 100%;
  display: block;
  border-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
  }
}

:root {
  /* Neutrals */
  --neutral-50: #f1f1f2;
  --neutral-100: #e1e1e3;
  --neutral-200: #d6d6da;
  --neutral-300: #b1b1b9;
  --neutral-400: #93939f;
  --neutral-500: #787887;
  --neutral-600: #62626a;
  --neutral-700: #4b4b4e;
  --neutral-800: #383838;
  --neutral-900: #202020;

  /* Reds */
  --red-50: #f9f1f0;
  --red-100: #f1dddc;
  --red-200: #ecc3c0;
  --red-300: #e9928c;
  --red-400: #e37169;
  --red-500: #d8352a;
  --red-600: #b81f14;
  --red-700: #990a00;
  --red-800: #660700;
  --red-900: #3d0400;

  /* Indigos */
  --indigo-50: #f1f2f8;
  --indigo-100: #e0e2f0;
  --indigo-200: #bcc0e1;
  --indigo-300: #8f9bd6;
  --indigo-400: #6d76c5;
  --indigo-500: #505aaf;
  --indigo-600: #29339b;
  --indigo-700: #202879;
  --indigo-800: #07125b;
  --indigo-900: #0b1132;

  /* Blues */
  --blue-50: #e0f1f5;
  --blue-100: #d7eef4;
  --blue-200: #aedeea;
  --blue-300: #87cdde;
  --blue-400: #5ebed4;
  --blue-500: #33a8cc;
  --blue-600: #148cb8;
  --blue-700: #085d91;
  --blue-800: #003562;
  --blue-900: #002447;

  /* Greens */
  --green-50: #e7fef8;
  --green-100: #cefdef;
  --green-200: #a3f5db;
  --green-300: #8ce4c8;
  --green-400: #66ccaa;
  --green-500: #40bf95;
  --green-600: #29a37a;
  --green-700: #1f7a5c;
  --green-800: #0a5c41;
  --green-900: #052e20;

  /* Yellows */
  --yellow-50: #fffae5;
  --yellow-100: #fff5cc;
  --yellow-200: #ffeda3;
  --yellow-300: #ffdb75;
  --yellow-400: #ffc338;
  --yellow-500: #feaa01;
  --yellow-600: #cc7a00;
  --yellow-700: #995c00;
  --yellow-800: #663d00;
  --yellow-900: #331f00;

  /* White and black */
  --white: #ffffff;
  --black: #000000;

  /* Widths */
  --clamp-base: clamp(500px, 90vw, 600px);
  --clamp-large: clamp(600px, 90vw, 700px);
  --clamp-image-base: clamp(600px, 90vw, 800px);
  --clamp-image-large: clamp(600px, 90vw, 1200px);

  /* Spacing */
  --space--x-small: 0.25rem;
  --space--small: 0.5rem;
  --space--medsmall: 0.7rem;
  --space--base: 1rem;
  --space--smallmed: 1.125rem;
  --space--medium: 1.5rem;
  --space--large: 3rem;

  /* Fonts */
  --font-family--base: "Montserrat", "Helvetica Neue", "Helvetica", sans-serif;
  --font-family--body: "Libre Baskerville", serif;
  --font-size--xs2: 0.5rem;
  --font-size--x-small: 0.75rem;
  --font-size--small: 0.875rem;
  --font-size--base: 1rem;
  --font-size--medium: 1.125rem;
  --font-size--large: 1.25rem;
  --font-size--xl: 1.5rem;
  --font-size--xl2: 1.875rem;
  --font-size--xl3: 2.25rem;
  --font-size--xl4: 3rem;
  --font-size--xl5: 3.75rem;
  --font-size--xl6: 4.5rem;
  --font-weight--regular: 400;
  --font-weight--bold: 700;
  --line-height--tight: 1;
  --line-height--base: 1.6;
  --line-height--wide: 1.2;
  --line-height--xwide: 2.5rem;

  /* Borders and shadows */
  --border-width--base: 1px;
  --border-width--thick: 3px;
  --border-radius--circle: 100%;
  --border-radius--pill: 0.3rem;
  --transition--base: 0.25s;
  --shadow-base: 5px 5px 15px rgba(0, 0, 0, 0.2);
  --shadow-large: 9px 11px 39px -9px rgba(0, 0, 0, 0.75);
}

body {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-family--body), serif;
}

h1,
h2,
p {
  margin: 0 auto;
  width: 100%;
  margin-bottom: var(--space--smallmed);
}

h1 {
  text-align: center;
  font-size: var(--font-size--xl3);
  line-height: var(--line-height--wide);
}

h2 {
  font-size: var(--font-size--xl);
  font-weight: 700;
  line-height: var(--line-height--wide);
  margin-top: var(--space--medium);
}

p {
  line-height: var(--line-height--base);
  font-size: var(--font-size--medium);
}

p a,
i a,
span a {
  word-wrap: break-word;
  color: var(--neutral-700);
  text-decoration: underline;
  cursor: pointer;
}

p a:hover,
i a:hover,
span a:hover {
  color: var(--indigo-700);
}

i {
  font-style: italic;
}

.quote {
  font-style: italic;
  color: var(--neutral-700);
  margin-left: var(--space--base);
  padding-left: var(--space--base);
  border-left: 8px solid var(--neutral-200);
  width: calc(100% - var(--space--base));
}

/* -------- Media queries ------- */

@media only screen and (max-width: 599px) {
  p {
    font-size: var(--font-size--base);
  }

  h1,
  h2,
  h3,
  p {
    width: 100%;
  }
}