/* Mobile First type size using calc and custom properties to adjust via media queires */
/* font sizes (Mobile 12 - 16pt, tablet 15 - 19pt and desktop 16 - 20pt */
:root {
    --base-size: 13px;
    --type-scale: 1.1;
    --newBodyText: calc(var(--base-size) * var(--type-scale));
    --h5: calc(var(--base-size) * var(--type-scale));
    --h4: calc(var(--h5) * var(--type-scale));
    --h3: calc(var(--h5) * var(--type-scale)); /*adjusted */
    --h2: calc(var(--h3) * var(--type-scale));
    --h1: calc(var(--h2) * var(--type-scale));
  }
h1, h2, h3, h4, h5 {
  font-family: serif;
  line-height: 2rem;
}
  h1 {
    font-size: var(--h1);
  }
  
  h2 {
    font-size: var(--h2);
  }
  
  h3 {
    font-size: var(--h3);
  }
  
  h4 {
    font-size: var(--h4);
  }
  
  h5 {
    font-size: var(--h5);
  }
  
  p, li,  input::placeholder, textarea::placeholder {
    font-size: var(--newBodyText);
    line-height: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
  }
  input::placeholder, textarea::placeholder {
    opacity: 0.8;
  }

  small {
    font-size: 12px;
  }
  @media (min-width: 515px) {
    :root {
      --type-scale: 1.13;
    }
  }
  @media only screen and (min-width: 800px) {
    :root {
      --type-scale: 1.2;
    }
  }
  @media only screen and (min-width: 1020px) {
    :root {
      --type-scale: 1.3;
    }
  }