<h1 class="ice-cream-sammy">Ice Cream<br>Sandwich</h1>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Luckiest+Guy);
@import "compass/css3/text-shadow";

$chocolate:#6B4B09;
$vanilla:#F3E282;
$strawberry:#F3E282;

@function makeicecream($color1, $color2, $color3) {
  $val: 0px 0px #{lighten($color3, 30%)};
  $val: #{$val}, 1px 1px #{lighten($color3, 30%)};
  
  @for $i from 2 through 7 {
    $val: #{$val}, #{$i}px #{$i}px #{darken($color3, 10%)};
  }
  @for $i from 8 through 20 {
    $val: #{$val}, #{$i}px #{$i}px #{$color1};
  }
  @for $i from 21 through 33 {
    $val: #{$val}, #{$i}px #{$i}px #{$color2};
  }
  @for $i from 34 through 46 {
    $val: #{$val}, #{$i}px #{$i}px #{$color3};
  }
  @for $i from 47 through 51 {
    $val: #{$val}, #{$i}px #{$i}px #{darken($color3, 10%)};
  }
  @return $val;
}

@mixin icecreamlayers($color1, $color2, $color3) {
  text-shadow: makeicecream($color1, $color2, $color3);
}

 $iceCreamLayer:.1em;

html, 
body {
  height:100%;
  position:relative;
  background: #D7CDAD;
}
.ice-cream-sammy {
  
  @include icecreamlayers(#F388CF, #F3E282, #6B4B09);  

  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform: translate3d(0, -50%, 0);
  
  color:darken($chocolate, 10%);
  font-family: 'Luckiest Guy', cursive;
  //text-transform:uppercase;
  text-align:center;
  margin-top:0;
  font-size:4rem;
  line-height:0.85;
  @media screen and (min-width:500px) {
    
  font-size:6rem;
  }
}