// SCSS mixin and variables:
	// Define Modular Scales
	  $mod_1: 1.125;
	  $mod_2: 1.414;

	// Calculate Modular Scale
    $h1-min: $mod_1*$mod_1*$mod_1*$mod_1*$mod_1 * 1rem;
    $h1-max: $mod_2*$mod_2*$mod_2*$mod_2*$mod_2 * 1rem;

    $h2-min: $mod_1*$mod_1*$mod_1*$mod_1 * 1rem;
    $h2-max: $mod_2*$mod_2*$mod_2*$mod_2 * 1rem;

    $h3-min: $mod_1*$mod_1*$mod_1 * 1rem;
    $h3-max: $mod_2*$mod_2*$mod_2 * 1rem;

    $h4-min: $mod_1*$mod_1 * 1rem;
    $h4-max: $mod_2*$mod_2 * 1rem;

    $h5-min: $mod_1* 1rem;
    $h5-max: $mod_2 * 1rem;

  // Adding variables for h6 and p, using the base font-sizes. These could be re-written since three of these are 1rem, however to make it easy to make changes I've kept them as separate values.
    $h6-min: 1rem;
    $h6-max: 1rem;
  
    $p-min: 1rem;
	  $p-max: 1.25rem;

  // Handpicked margins and line-heights to keep consistency to the base line-height
    $h1-margin-min:0.75; //12
    $h1-margin-max: 1.875; //30;

    $h2-margin-min:0.65625; //10.5
    $h2-margin-max:1.875; //30

    $h3-margin-min:0.75; //12
    $h3-margin-max:1.875; // 30

    $h4-margin-min:0.5625;//9
    $h4-margin-max:0.9375;// 15

	  $h5-margin-min:0.375;//6
    $h5-margin-max:0.9375;// 15

    //Line-height:
    $h1-lineheight-min:2.625; //42
    $h1-lineheight-max:7.03125;//112.5

    $h2-lineheight-min:2.4375; //39
    $h2-lineheight-max:5.625; //90

    $h3-lineheight-min:2.25;  //36
    $h3-lineheight-max:4.21875; //67.5

    $h4-lineheight-min: 2.0625;//33px
    $h4-lineheight-max: 3.28125;//52.5

    $h5-lineheight-min:1.875;
    $h5-lineheight-max: 2.34375;
  
  // Helper function
    @function strip-unit($value) {
      @return $value / ($value * 0 + 1);
    }

  // Fluid Type Mixin
	@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size, $min-margin, $max-margin, $min-lineheight, $max-lineheight) {
		$u1: unit($min-vw);
		$u2: unit($max-vw);
		$u3: unit($min-font-size);
    $u4: unit($max-font-size);

		//to be able to use ems in mediaqueries instead of rem, decides when to switch between modular scales
		$fny-min-vw: #{strip-unit($min-vw)}em;
		$fny-max-vw: #{strip-unit($max-vw)}em;

		@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
			& {
				//Adding px fallback that is the same as $min-font-size for better browser support, see https://caniuse.com/#search=rem
				font-size: #{strip-unit($min-font-size*16)}px;
				font-size: $min-font-size;

        //Using the min-margin value recalculated as an em relative to the min-font-size used
        //margin: #{($min-margin / #{strip-unit($min-font-size)})}em auto; //this line seems not to work on codepen, where the division is never done in scss, but output. If you can compile it to a single number, that is preferred for better browser support https://caniuse.com/#search=calc.
        margin: calc(#{($min-margin / #{strip-unit($min-font-size)})} * 1em) auto; //I've therefore used a calc() expression.
        
        //Using the min-lineheight recalculated to the min-font-sized used
        //line-height: #{($min-lineheight / #{strip-unit($min-font-size)})};//this line seems not to work on codepen, where the division is never done in scss, but output. If you can compile it to a single number, that is preferred for better browser support https://caniuse.com/#search=calc.
        line-height: calc(#{($min-lineheight / #{strip-unit($min-font-size)})}); //I've therefore used a calc() expression.
    
				//Switching $min-vw for $fny-min-vw to get em units in the mediaquery
				@media screen and (min-width: $fny-min-vw) {
					//Adding a px fallback that is the average of min and max font sizes for better browser support, see https://caniuse.com/#search=rem
					font-size: #{strip-unit(($min-font-size + $max-font-size)*8)}px;
					font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
          
          //Browsers that can't handle the calc() expression will fallback to the margin and line-height declared for small screens
          margin: calc((#{$min-margin} * 1rem) + (#{$max-margin} - #{$min-margin}) * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})) auto;
          line-height:calc((#{$min-lineheight} * 1rem) + (#{$max-lineheight} - #{$min-lineheight}) * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
				}

        //Switching $max-vw for $fny-min-vw to get em units in the mediaquery
				@media screen and (min-width: $fny-max-vw) {
					//Adding px fallback that is the same as $max-font-size
					font-size: #{strip-unit($max-font-size*16)}px;
					font-size: $max-font-size;
          
          //Using the max-margin value recalculated as an em relative to the max-font-size used
          //margin: #{($max-margin / #{strip-unit($max-font-size)})}em auto;//this line seems not to work on codepen, where the division is never done in scss, but output. If you can compile it to a single number, that is preferred for better browser support https://caniuse.com/#search=calc.
          margin: calc(#{($max-margin / #{strip-unit($max-font-size)})} * 1em) auto;

          //Using the max-lineheight recalculated to the max-font-sized used
          //line-height: #{($max-lineheight / #{strip-unit($max-font-size)})};//this line seems not to work on codepen, where the division is never done in scss, but output. If you can compile it to a single number, that is preferred for better browser support https://caniuse.com/#search=calc.
          line-height: calc(#{($max-lineheight / #{strip-unit($max-font-size)})});
				}
			}
		} @else {
			@error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;
		}
	}

//-----------------------------------------------------------------------------------------------------
//CSS styles
.wrapper-1680{
  max-width:105em;
  margin: 0 auto;
  display:block;
  padding:0 1.5em;
}

//Striped background
body{
    font-family:/*ios*/ "HelveticaNeue", /*android*/ "Roboto", /*fallbacks*/ Arial, Verdana, "Trebuchet MS", sans-serif;
		font-weight: 400;
  
  	//The first rgba color sets the line color
    background: linear-gradient(0, #d7ded8 1px, rgba(0, 0, 0, 0) 1px),
                linear-gradient(0, #9ec6f5 1px, rgba(0, 0, 0, 0) 1px);
		//The second px value sets the height between lines
		background-size: 1px 1.5em, 1px 0.75em;
}

@media only screen and (min-width:30em) {
  body{
    background: linear-gradient(0, #d7ded8 1px, rgba(0, 0, 0, 0) 1px),
                linear-gradient(0, #ffc8fd 1px, rgba(0, 0, 0, 0) 1px);
    
    //Scaling the background size as the screen size changes. 1.5 is for the base line-height, and it's multiplied with the calculation for p font-size when the font-size is responsive
    background-size:1px calc(1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
}

//CHROME ONLY: There is a bug or possibly rounding error that makes the lines jump. This adjust for this.
@media only screen and (min-width:42.5em) { //680
  body{
    background-size:1px calc((1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))) - 1px), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
  
  p{
    column-count:2;
  }
}

@media only screen and (min-width:55em) { //880
  body{
    background-size:1px calc(1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
}

@media only screen and (min-width:67.5em) { //1080
  body{
    background-size:1px calc((1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))) - 1px), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
}

@media only screen and (min-width:80em) { //1280
  body{
    background-size:1px calc(1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
  
  p{
    column-count:3;
  }
}

@media only screen and (min-width:92.5em) { //1480
  body{
    background-size:1px calc((1.5 * (1rem + 0.25 * ((100vw - 30rem) / 75))) - 1px), 1px calc(0.75 * (1rem + 0.25 * ((100vw - 30rem) / 75)));
  }
}

@media only screen and (min-width:105em) {
  body{
    background: linear-gradient(0, #d7ded8 1px, rgba(0, 0, 0, 0) 1px),
                linear-gradient(0, #97d09e 1px, rgba(0, 0, 0, 0) 1px);
    //Adjusting for max-font-size for p
    background-size:1px 1.875em, 1px 0.9375em;
  }
}

//Type styles
h1,h2,h3,h4,h5,h6 {
		padding: 0;
	}

	h1{ 
     @include fluid-type(30rem, 105rem, $h1-min, $h1-max, $h1-margin-min, $h1-margin-max, $h1-lineheight-min, $h1-lineheight-max);
	}
	
	h2{ 
		@include fluid-type(30rem, 105rem, $h2-min, $h2-max, $h2-margin-min, $h2-margin-max, $h2-lineheight-min, $h2-lineheight-max);
	}
	
	h3{ 
		@include fluid-type(30rem, 105rem, $h3-min, $h3-max, $h3-margin-min, $h3-margin-max, $h3-lineheight-min, $h3-lineheight-max);
	}
	
	h4{ 
		@include fluid-type(30rem, 105rem, $h4-min, $h4-max, $h4-margin-min, $h4-margin-max, $h4-lineheight-min, $h4-lineheight-max);
	}
	
	h5{ 
		@include fluid-type(30rem, 105rem, $h5-min, $h5-max, $h5-margin-min, $h5-margin-max, $h5-lineheight-min, $h5-lineheight-max);
	}
	
	h6{	
		@include fluid-type(30rem, 105rem, $h6-min, $h6-max, 0, 0, 1.5, 1.875);
	}

	p{ 
		@include fluid-type(30rem, 105rem, 1rem, 1.25rem, 0.75, 0.75, 1.5, 1.875); //text scales between 480 and 1680px. At 1680px or larger the text is 20px
	}

	h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{
		margin-top: 0;
	}