$red:#D44D3B;
@import url(http://fonts.googleapis.com/css?family=Rammetto+One);
@mixin cast($type,$color,$size){
	$shadow:'';
	@if $type=="box"{
	@for $i from 1 through $size{
		$gradation:100/$size;
		$shadow: $shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation)+",";
		@if $i==$size{
			$shadow: $shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation);
		}
	}
	box-shadow: #{$shadow};
	}
	@if $type=="text"{
	@for $i from 1 through $size{
		$gradation:100/$size;
		$shadow: $shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation)+",";
		@if $i==$size{
			$shadow: $shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation);
		}
	}
	text-shadow: #{$shadow};
	}
}
html{
	background: #111;
	font-family: "Rammetto One";
}
.contain{
	width: 200px;
	height:200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background:$red;
	//box-shadow: inset 0px -10px 20px mix(black,$red,30);
	margin: -100px 0px 0px -100px;
	border-radius: 50%;
	text-align:center;
	cursor: pointer;
	overflow:hidden;
	line-height: 200px;
	@include transition(all 0.5s);
	&:hover{
		background:teal;
	}
}
.icon{
	color:#dbdbdb;
	font-size: 75px;
	letter-spacing: -15px;
	margin-left: -18px;
	@include transform(rotate(45deg));
	@include cast(text,teal,80);
	@include transition(all 0.5s);
	&:hover{
		@include cast(text,mix(black,$red,50),80);
	}
}