.clock
  .hour
  .minutes
  .seconds
.week
  .day
  .month
  .year

@import "compass/css3";

//Customize your colors
$bkg:teal;
$shadow-color:mix(black,red,20);
@import url(https://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;
  }
}

$(document).ready(function(){
  setInterval(function(){
  var hour=new Date().getHours();
    if(hour<10){
      $(".hour").html("0"+hour);
    }
    else if(hour>12){
      hour=hour-12;
      if(hour<10){
        $(".hour").html("0"+hour);
      }
      else{
        $(".hour").html(hour);
      }
    }
    else{
    $(".hour").html(hour);
    }
  },1000)
  setInterval(function(){
    var minutes=new Date().getMinutes();
    if(minutes < 10){
      $(".minutes").html("0"+minutes);
    }
    else{
    $(".minutes").html(minutes);
    }
  })
  setInterval(function(){
    var seconds=new Date().getSeconds();
    if(seconds<10){
      $(".seconds").html("0"+seconds);
    }
    else{
    $(".seconds").html(seconds);
    }
  },1000);
  
  var weekday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var month=["January","February","March","April","May","June","July","August","September","October","November","December"];
  setInterval(function(){
    var d=new Date();
    var dow=weekday[d.getDay()];
    var mo=month[d.getMonth()];
    var num=d.getDate();
    var date=mo+" "+num
    var yr=d.getFullYear();
    $(".day").html(dow);
    $(".month").html(date);
    $(".year").html(yr);
  },1000)
})