
@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_bold.woff2');
  font-weight: bold;
}
@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_italic.woff2');
  font-style: italic;
}
@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_bold_italic.woff2');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Charter";
  src: url('/static/fonts/charter_regular.woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Charis';
}
/*@font-face {*/
  /*font-family: "Comfortaa";*/
  /*src: url('/static/fonts/Comfortaa-VariableFont_wght.ttf');*/
/*}*/
/*@font-face {*/
  /*font-family: "Montserrat";*/
  /*font-style: normal;*/
  /*src: url('/static/fonts/Montserrat-VariableFont_wght.ttf');*/
/*}*/
:root {
  @utopia typeScale({
    minWidth: 320,
    maxWidth: 1240,
    minFontSize: 16,
    maxFontSize: 20,
    minTypeScale: 1.2,
    maxTypeScale: 1.25,
    positiveSteps: 5,
    negativeSteps: 2,
    prefix: "step",
  });
}

:root {
  --text-color: tkn('colors.dark');
  --heading-color: tkn('colors.dark');
  --link-color: tkn('colors.dark');
  --link-color-visited: tkn('colors.dark');
  --link-color-hover: tkn('colors.blue');
}

html {
  font-family: 'Charter', serif;
  font-style: normal;
  font-size: var(--step-0);
  color: var(--text-color);
  line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6, header, .hero-text {
  color: var(--heading-color);
  font-weight: bold;
  line-height: initial;
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

/*From css-tricks: https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/*/
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub {
  top: 0.4em;
}

.emphasis {
  font-style: italic;
}
