/*Layout styles*/
.content{
  min-height:95vh;
}

.footer{
  min-height:5vh;
}

//----------------------------------------------
//COSMETIC STYLES
// 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 * 1rem;
    $h2-max: $mod_2*$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.  
    $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.5625;//9
    $h2-margin-max:0.9375;// 15

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

    $h2-lineheight-min: 2.0625;//33px
    $h2-lineheight-max: 3.28125;//52.5
  
  // 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;
		}
	}


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);
	}

	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
	}

body{
  text-align:center;
  font-family:/*ios*/ "HelveticaNeue", /*android*/ "Roboto", /*fallbacks*/ Arial, Verdana, "Trebuchet MS", sans-serif;
  color:#584d4d;
  filter: hue-rotate(240deg);
}

.content{
  background-color:#fffaf8;
  padding:3em 1em 1em 1em;
  box-sizing:border-box;
}

.footer{
  padding:0 1em;
  box-sizing:border-box;
  background-image:linear-gradient(to right, #ff885d 0%,#ff5062 100%);
  color:#FFF;
}

h1{
  font-family: 'Great Vibes', Arial, Helvetica, sans-serif;
  background-image:linear-gradient(to right, #ff885d 0%,#ff5062 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);  
  color:#2f2f2f;
}

h2{
   margin:(9/20.25)+em 0;
   letter-spacing: 3px;
   text-transform: uppercase;
}

p{ 
  line-height:1.5;
  margin: 0.75em auto;
}

.footer p{
  margin:0;
  padding:0.5em 0;
  box-sizing:border-box;
}

a{
  color: #FFF;
  background-image:linear-gradient(to right, #ff7644 0%, #f94456 100%);
  text-decoration:none;
  padding:0 0.25em;
  opacity:0.85;
  transition:0.5s opacity;
  display:inline-block;
  margin:0.5em auto 0;
  
  &:hover, &:focus, &:active{
    opacity:1;
  }
}

hr{
  width:5em;
  margin:3em auto;
}