@import url(http://fonts.lug.ustc.edu.cn/css?family=Luckiest+Guy);
@import "compass/css3/text-shadow";

//
// COLOR VARIABLES
//
// - Cool
// - Warm
// - Gray Scale
//

// Cool

$aqua:  #7FDBFF;
$blue:  #0074D9;
$navy:  #001F3F;
$teal:  #39CCCC;
$green: #2ECC40;
$olive: #3D9970;
$lime:  #01FF70;

// Warm

$yellow:  #FFDC00;
$orange:  #FF851B;
$red:     #FF4136;
$fuchsia: #F012BE;
$purple:  #B10DC9;
$maroon:  #85144B;

// Gray Scale

$white:  #fff;
$silver: #ddd;
$gray:   #aaa;
$black:  #111;


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