* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  body {
    margin: 0;
    padding: 4rem calc(var(--bfo-spacing-base-m) + 2vw);
    font-family: var(--bfo-font-family-base);
    color: var(--bfo-font-family-baseColor);
    font-weight: var(--bfo-font-weight-light);
    line-height: var(--bfo-font-line-height-base);
    background-color: var(--bfo-color-brand-base-background);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bfo-color-brand-heading);
  line-height: 1.1;
  margin-top: 0;
}
h1 {
  font-size: calc(18px + 2vw);
  font-weight: var(--bfo-font-weight-extra-light);
}
h2 {
  font-size: calc(var(--bfo-spacing-base-m) + 1vw);
  font-weight: var(--bfo-font-weight-extra-light);
}
h3 {
  font-size: calc(16px + 1vw);
  font-weight: var(--bfo-font-weight-extra-light);
}
h4 {
  font-size: calc(14px + 0.3vw);
  font-weight: var(--bfo-font-weight-light);
}
h5 {
  font-size: calc(12px + 0.2vw);
  font-weight: var(--bfo-font-weight-normal);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
h6 {
  font-size: calc(10px + 0.1vw);
  font-weight: var(--bfo-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
p {
  font-size: var(--bfo-font-size-base);
  margin-top: var(--bfo-spacing-margin-text);
}
ul {
  padding: 0;
}