// Base font size.
$font-size-base: 28px;

@mixin poly-fluid-sizing($property, $map) {
  // Get the number of provided breakpoints
  $length: length(map-keys($map));
  
  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "poly-fluid-sizing() $map requires at least values"
  }

  // Sort the map by viewport width (key)
  $map: map-sort($map);
  $keys: map-keys($map);

  // Minimum size
  #{$property}: map-get($map, nth($keys,1));
  
  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width:nth($keys,$i)) {
      #{$property}: linear-interpolation((nth($keys,$i): map-get($map, nth($keys,$i)), nth($keys,($i+1)): map-get($map, nth($keys,($i + 1)))));
    }
  }
  
  // Maxmimum size
  @media (min-width:nth($keys,$length)) {
    #{$property}: map-get($map, nth($keys,$length));
  }
}

@function linear-interpolation($map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error "linear-interpolation() $map must be exactly 2 values";
  }
  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));
  
  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);
  
  // Determine if the sign should be positive or negative
  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }
  
  @return calc(#{$m*100}vw #{$sign} #{$b});
}

@function list-sort($list) {
  $sortedlist: ();
  @while length($list) > 0 {
    $value: nth($list,1);
    @each $item in $list {
      @if $item < $value {
        $value: $item;
      }
    }
    $sortedlist: append($sortedlist, $value, 'space');
    $list: list-remove($list, index($list, $value));
  }
  @return $sortedlist;
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function map-sort($map) {
  $keys: list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}

@function list-remove($list, $index) {
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list,$i), 'space');
    }
  }
  @return $newList;
}

%font-size-h1 {
	$size-base: 2.6; // ~36px
	$lg: floor(($font-size-base * $size-base));
	$md: floor(($font-size-base * ($size-base - .45)));
	$sm: floor(($font-size-base * ($size-base - .75)));
	$map: (576px: $sm, 768px: $md, 992px: $lg);
	@include poly-fluid-sizing('font-size', $map);
}
%font-size-h2 {
	$size-base: 2.15; // ~30px
	$lg: floor(($font-size-base * $size-base));
	$md: floor(($font-size-base * ($size-base - .4)));
	$sm: floor(($font-size-base * ($size-base - .7)));
	$map: (576px: $sm, 768px: $md, 992px: $lg);
	@include poly-fluid-sizing('font-size', $map);
}            
%font-size-h3 {
	$size-base: 1.7; // ~24px
	$lg: floor(($font-size-base * $size-base));
	$md: floor(($font-size-base * ($size-base - .35)));
	$sm: floor(($font-size-base * ($size-base - .65)));
	$map: (576px: $sm, 768px: $md, 992px: $lg);
	@include poly-fluid-sizing('font-size', $map);
}
%font-size-h4 {
	$size-base: 1.25; // ~18px
	$lg: floor(($font-size-base * $size-base));
	$md: floor(($font-size-base * ($size-base - .3)));
	$sm: floor(($font-size-base * ($size-base - .6)));
	$map: (576px: $sm, 768px: $md, 992px: $lg);
	@include poly-fluid-sizing('font-size', $map);
}
%font-size-h5 {
	$size-base: 1;
	$md: floor(($font-size-base * ($size-base - .25)));
	$sm: floor(($font-size-base * ($size-base - .55)));
	$map: (576px: $sm, 768px: $md, 992px: $font-size-base);
	@include poly-fluid-sizing('font-size', $map);
}
%font-size-h6 {
	$size-base: .85; // ~12px
	$lg: floor(($font-size-base * $size-base));
	$md: floor(($font-size-base * ($size-base - .2)));
	$sm: floor(($font-size-base * ($size-base - .5)));
	$map: (576px: $sm, 768px: $md, 992px: $lg);
	@include poly-fluid-sizing('font-size', $map);
}

@mixin headings($from: 1, $to: 6){
	@for $i from $from through $to {
		h#{$i}, .h#{$i} {
			@extend %font-size-h#{$i} !optional;
			@content;
		}
	}
}

body {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	background-color: #EEE;
	@include headings() {
		font-weight: 300;
		word-wrap: break-word;
		margin: .25em 0;
	}
}
body,html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}