// @mixin font-families {
// 	@if $font-family-name == $font-family-name-headers {
// 		@import url(https://fonts.googleapis.com/css?family=#{$font-family-name}&display=swap);
// 	} @else {
// 		@import url(https://fonts.googleapis.com/css?family=#{$font-family-name}|#{$font-family-name-headers}&display=swap);
// 	}
// }
//
// @include font-families;

a {
  text-decoration: none;
}

html{
  line-height: $line-height;
	font-weight: $font-weight;
	font-size: 12px;

  @media #{$medium-and-up} {
    font-size: 14px;
  }

  @media #{$large-and-up} {
    font-size: 16px;
  }

  font-family: $font-stack;
  font-weight: normal;
  color: $off-black;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: $font-weight-headers;
	line-height: $line-height-headers;
	text-transform: $text-transform-headers;
}

// Header Styles
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: $h1-fontsize; margin: ($h1-fontsize / 1.5) 0 ($h1-fontsize / 2.5) 0;}
h2 { font-size: $h2-fontsize; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;}
h3 { font-size: $h3-fontsize; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;}
h4 { font-size: $h4-fontsize; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;}
h5 { font-size: $h5-fontsize; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;}
h6 { font-size: $h6-fontsize; margin: ($h6-fontsize / 1.5) 0 ($h6-fontsize / 2.5) 0;}

// Text Styles
em { font-style: italic; }
strong { font-weight: 500; }
small { font-size: 75%; }
.light { font-weight: 300; }
.thin { font-weight: 200; }


.flow-text{
  $i: 0;
  @while $i <= $intervals {
    @media only screen and (min-width : 360 + ($i * $interval-size)) {
      font-size: 1.2rem * (1 + (.02 * $i));
    }
    $i: $i + 1;
  }

  // Handle below 360px screen
  @media only screen and (max-width: 360px) {
    font-size: 1.2rem;
  }
}