/*
 * Your global styles here
 */
html,
body {
  height: 100%;
}

html {
  background: transparent;
}

body {
  margin: 0;
}

h1 {
  font-family: var(--dxp-s-text-heading-extra-large-font-family);
  color: var(--dxp-s-text-heading-extra-large-color);
  font-size: var(--dxp-s-text-heading-extra-large-font-size);
  font-style: var(--dxp-s-text-heading-extra-large-font-style);
  font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
  line-height: var(--dxp-s-text-heading-extra-large-line-height);
  text-transform: var(--dxp-s-text-heading-extra-large-text-transform);
  letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing);
}

h2 {
  font-family: var(--dxp-s-text-heading-large-font-family);
  color: var(--dxp-s-text-heading-large-color);
  font-size: var(--dxp-s-text-heading-large-font-size);
  font-style: var(--dxp-s-text-heading-large-font-style);
  font-weight: var(--dxp-s-text-heading-large-font-weight);
  line-height: var(--dxp-s-text-heading-large-line-height);
  text-transform: var(--dxp-s-text-heading-large-text-transform);
  letter-spacing: var(--dxp-s-text-heading-large-letter-spacing);
}

h3 {
  font-family: var(--dxp-s-text-heading-medium-font-family);
  color: var(--dxp-s-text-heading-medium-color);
  font-size: var(--dxp-s-text-heading-medium-font-size);
  font-style: var(--dxp-s-text-heading-medium-font-style);
  font-weight: var(--dxp-s-text-heading-medium-font-weight);
  line-height: var(--dxp-s-text-heading-medium-line-height);
  text-transform: var(--dxp-s-text-heading-medium-text-transform);
  letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing);
}

h4 {
  font-family: var(--dxp-s-text-heading-small-font-family);
  color: var(--dxp-s-text-heading-small-color);
  font-size: var(--dxp-s-text-heading-small-font-size);
  font-style: var(--dxp-s-text-heading-small-font-style);
  font-weight: var(--dxp-s-text-heading-small-font-weight);
  line-height: var(--dxp-s-text-heading-small-line-height);
  text-transform: var(--dxp-s-text-heading-small-text-transform);
  letter-spacing: var(--dxp-s-text-heading-small-letter-spacing);
}

p {
  color: var(--dxp-s-body-text-color);
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: var(--dxp-s-text-heading-extra-large-font-size-mobile);
  }

  h2 {
    font-size: var(--dxp-s-text-heading-medium-font-size);
  }

  h3 {
    font-size: var(--dxp-s-text-heading-medium-font-size-mobile);
  }

  h4 {
    font-size: var(--dxp-s-text-heading-small-font-size-mobile);
  }

  p,
  a {
    font-size: 16px;
  }
}