:where(html) {
  --minor-second: 1.067;
  --major-second: 1.125;
  --minor-third: 1.2;
  --major-third: 1.25;
  --perfect-fourth: 1.333;
  --aug-fourth: 1.414;
  --perfect-fifth: 1.5;
  --golden-ratio: 1.618;
}

:where(html, [scheme]) {
  --bold-calc: var(--_bold-calc, 300);
}

:where([scheme]) {
  /* Scheme Variables */
  --font-ratio: var(--_font-ratio, 1.25);
  --root-size: var(--_root-size, 16);
  --fluid-size: var(--_fluid-size, 2vw);
  --rel-size: calc(var(--font-ratio) - 1);
  --body-family: var(--_body-family, "Work Sans");
  --body-weight: var(--_body-weight, 400);
  --body-lh: var(--_body-lh, 1.5);
  --heading-family: var(--_heading-family, "Work Sans");
  --heading-weight: var(--_heading-weight, 600);
  --heading-lh: var(--_heading-lh, 1.25);

  --body-size: calc(var(--root-size) / 16);
  /* convert px to rem */


  /* Inspired by https://modern-fluid-typography.vercel.app/ */
  --body-clamp: clamp(
    var(--body-size) * 1rem / var(--font-ratio),
    var(--body-size) * 1rem * var(--rel-size) + var(--fluid-size),
    var(--body-size) * 1rem * var(--font-ratio)
  );

  /* Inspired by https://type-scale.com/ */
  --body-size-static: calc(var(--body-size) * 1rem);
  --h5-size-static: calc(var(--body-size-static));
  --h4-size-static: calc(var(--h5-size-static) * var(--font-ratio));
  --h3-size-static: calc(var(--h4-size-static) * var(--font-ratio));
  --h2-size-static: calc(var(--h3-size-static) * var(--font-ratio));
  --h1-size-static: calc(var(--h2-size-static) * var(--font-ratio));
  --note-size-static: calc(var(--body-size-fluid) * .875);
  --small-size-static: calc(var(--note-size-static) / var(--font-ratio));

  --body-size-fluid: calc(var(--body-clamp));
  --h5-size-fluid: calc(var(--body-size-fluid));
  --h4-size-fluid: calc(var(--h5-size-fluid) * var(--font-ratio));
  --h3-size-fluid: calc(var(--h4-size-fluid) * var(--font-ratio));
  --h2-size-fluid: calc(var(--h3-size-fluid) * var(--font-ratio));
  --h1-size-fluid: calc(var(--h2-size-fluid) * var(--font-ratio) * var(--font-ratio) * 0.75);
  --note-size-fluid: calc(var(--body-size-fluid) * .875);
  --small-size-fluid: calc(var(--note-size-fluid) / var(--font-ratio));

  --transition: all 0.5s cubic-bezier(0.25, 0, 0.3, 1);
}

.slice-typography {
  font-family: var(--body-family);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  font-size: var(--body-size-fluid);
}

.slice-typography p {
  margin-top: 0;
  margin-bottom: calc(var(--body-size-fluid) * var(--font-ratio) * 0.5);
  transition: var(--transition);
}

.slice-typography small,
.slice-typography .note,
.slice-typography h4 {
  font-size: var(--note-size-fluid);
  font-weight: var(--body-weight);
  margin-top: 0;
  margin-bottom: calc(var(--body-size-fluid) * var(--font-ratio) * 0.5);
  transition: var(--transition);
}

.slice-typography p > b,
.slice-typography p > strong,
.slice-typography p > .b,
.slice-typography small > b,
.slice-typography .note > b,
.slice-typography small > strong,
.slice-typography .note > strong,
.slice-typography small > .b,
.slice-typography .note > .b,
.slice-typography h4 > b,
.slice-typography h4 > strong,
.slice-typography h4 > .b, {
  font-weight: calc(var(--body-weight) + var(--bold-calc));
}

.slice-typography h1,
.slice-typography h2,
.slice-typography h3 {
  margin-top: calc(var(--body-size-fluid) * 2);
  margin-bottom: calc(var(--body-size-fluid) / 2);
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  transition: var(--transition);
}

.slice-typography h1>b,
.slice-typography h1>strong,
.slice-typography h1>.b,
.slice-typography h2>b,
.slice-typography h2>strong,
.slice-typography h2>.b,
.slice-typography h3>b,
.slice-typography h3>strong,
.slice-typography h3>.b {
  font-weight: calc(var(--heading-weight) + var(--bold-calc));
}

.slice-typography h1 {
  font-size: var(--h1-size-fluid);
}

.slice-typography h2 {
  font-size: var(--h2-size-fluid);
}

.slice-typography h3 {
  font-size: var(--h3-size-fluid);
}

.slice-typography .jb-ql-private-note {
  display: none;
}

.slice-typography blockquote {
  font-weight: var(--body-weight);
  font-size: var(--body-size-fluid);
  font-style: italic;
  border-left-width: 0.25rem;
  border-left-style: solid;
  display: table;
  margin: auto;
  margin-top: var(--body-size-fluid);
  margin-bottom: var(--body-size-fluid);
  padding-left: var(--body-size-fluid);
  transition: var(--transition);
}

.slice-typography ul,
ol {
  text-align: left;
  font-size: var(--body-size-fluid);
  margin-top: 0;
  margin-bottom: var(--body-size-fluid);
  transition: var(--transition);
}

/* Util Classes */
.fs-note {
  font-size: var(--small-size-fluid);
}

.fs-body {
  font-size: var(--body-size-fluid);
}

.fs-h1 {
  font-size: var(--h1-size-fluid);
}

.fs-h2 {
  font-size: var(--h2-size-fluid);
}

.fs-h3 {
  font-size: var(--h3-size-fluid);
}

.fs-h4 {
  font-size: var(--h4-size-fluid);
}

.fs-h5 {
  font-size: var(--h5-size-fluid);
}

.lh-body {
  line-height: var(--body-lh);
}

.lh-heading {
  line-height: var(--heading-lh);
}

.fw-body {
  font-weight: var(--body-weight);
}

.fw-heading {
  font-weight: var(--heading-weight);
}

.fw-body.b {
  font-weight: calc(var(--body-weight) + var(--bold-calc));
}

.fw-heading.b {
  font-weight: calc(var(--heading-weight) + var(--bold-calc));
}

.font-body {
  font-family: var(--body-family);
}

.font-heading {
  font-family: var(--heading-family);
}

button:not(.sans-serif),
input:not(.sans-serif),
select:not(.sans-serif),
textarea:not(.sans-serif) {
  font-family: var(--body-family);
}