:root {
  /* Primary colors */
  --black: #303030;
  --orange-60: #ff996e;
  --lila-40: #ead6ff;
  --lila-20: #f3e9ff;
  --creme: #fef9f5;

  /* Element sizes */
  --main-header-height-large: 968px;
  --main-header-height-medium: 888px;
  --main-header-height-small: 703px;

  /* Font sizes */
  --h1-large: 6.25rem;
  --h2-large: 4rem;
  --h1-small: 4.5rem;
  --h2-small: 3rem;
  --p: 2rem;
}

body,
html {
  overflow-x: hidden;
}

body {
  color: var(--black);
  font-family: "Karla", sans-serif;
  line-height: 1.2;
  letter-spacing: inherit;
}

/* https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

h1 {
  line-height: 100%;
}

h2 {
  line-height: 120%;
}

h1,
h2,
h3,
h4,
h4,
h5,
h6 {
  font-family: "Caveat Brush", sans-serif;
  font-weight: 400;
}

p,
address {
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--h1-small);
    letter-spacing: calc(var(--h1-small) * -2 / 100);
  }

  h2 {
    font-size: var(--h2-small);
    letter-spacing: calc(var(--h2-small) * -5 / 100);
  }

  body {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--h1-large);
    letter-spacing: calc(var(--h1-large) * -2 / 100);
  }

  h2 {
    font-size: var(--h2-large);
    letter-spacing: calc(var(--h2-large) * -5 / 100);
  }

  body {
    font-size: var(--p);
    letter-spacing: calc(var(--p) * -2 / 100);
  }
}