//Customize your colors
$bkg:teal;
$shadow-color:mix(black,red,20);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
//Long-Shadow generator mixin. $type paramater takes either "normal" which is a fade to black, or "invert" which is a fade to white.
@mixin cast($color,$length,$type:"normal"){
	$shadow:'';
	@for $i from 1 through $length{
		@if $type=="normal"{
		$gradation:100/$length;
		$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation)+",";
		@if $i==$length{
			$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation);
		}
		@else{
			$gradation:100/$length;
		$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation)+",";
		@if $i==$length{
			$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(black,$color,$i*$gradation);
			}
		}
	}
		@if $type=="invert"{
		$gradation:100/$length;
		$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(white,$color,$i*$gradation)+",";
		@if $i==$length{
			$shadow:$shadow+$i+"px "+$i+"px 0px "+mix(white,$color,$i*$gradation);
		}
		}
	}
	text-shadow:#{$shadow};
}
html,body{
	margin: 0;
	padding:0;
	color:#eaeaea;
	overflow:hidden;
	background:$bkg;
	font-family:"Oswald";
}
.clock{
	position: absolute;
	right: 60px;
	text-align:center;
	@include cast($shadow-color,125);
}
.hour{
	font-size: 200px;
	font-weight:700;
	margin-bottom: -80px;
}
.minutes{
	font-size:110px;
	letter-spacing:2px;
	font-weight:400;
	margin-left:80px;
	margin-bottom: -35px;
}
.seconds{
	font-weight: 400;
	font-size:55px;
	letter-spacing:2px;
	margin-left: 100px;
}
.week{
	position: absolute;
	top: 0;
	right:0;	
	width: 100vw;
	padding: 5px 10px;
	font-size: 16px;
	background:mix(black,$bkg,5);
	font-weight: 300;
	letter-spacing: 10px;
	text-align:center;
	text-transform: uppercase;
	color: rgba(white,0.3);
	border-bottom: 1px solid mix(white,$bkg,5);
	& div{
		display: inline-block;
	}
	& .day{
		font-size: 12px;
		color: rgba(black,0.5);
		letter-spacing: 5px;
	}
}