@font-face {
  font-family: Amiri;
  font-weight: 400;
  font-style: normal;
  src: url(font/amiri.woff2)format("woff2")
}

@font-face {
  font-family: Amiri;
  font-weight: 700;
  font-style: normal;
  src: url(font/amiri-700.woff2)format("woff2")
}

@font-face {
  font-family: Amiri;
  font-weight: 400;
  font-style: italic;
  src: url(font/amiri-italic.woff2)format("woff2")
}

@font-face {
  font-family: Amiri;
  font-weight: 700;
  font-style: italic;
  src: url(font/amiri-700-italic.woff2)format("woff2")
}

@font-face {
  font-family: Chivo;
  font-weight: 400;
  font-style: normal;
  src: url(font/chivo.woff2)format("woff2")
}

:root {
  --font-body-family: Amiri, serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-heading-family: Chivo, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-body-scale: 1.0;
  --font-heading-scale: 1.0;
  --color-base-text: 28, 26, 26;
  --color-base-background-1: 239, 236, 236;
  --color-base-background-2: 193, 188, 174;
  --color-base-solid-button-labels: 239, 236, 236;
  --color-base-outline-button-labels: 123, 131, 130;
  --color-base-accent-1: 42, 51, 47;
  --color-base-accent-2: 71, 97, 84;
  --payment-terms-background-color: #EFECEC;
  --gradient-base-background-1: #EFECEC;
  --gradient-base-background-2: #C1BCAE;
  --gradient-base-accent-1: #2A332F;
  --gradient-base-accent-2: #476154;
  --page-width: 120rem;
  --page-width-margin: 0rem
}

*,
*::before,
*::after {
  box-sizing: inherit
}

html {
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale)*62.5%);
  height: 100%
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8/var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight)
}

@media screen and (min-width:750px) {
  body {
    font-size: 1.6rem
  }
}
