.clock
  .face
  .hour.hand
  .minute.hand
  .cover
  .second-bulb
  .second.hand
  .number 12
  .number 3
a.contrib(href="https://dribbble.com/shots/1059440-Clock" target="_blank") Based on design by Paco
a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO

$a: #F0EEEd;
$b: #C9C3BC;
$c: #928779;
$d: #685D52;
$e: #917465;
$f: #C15C48;
$g: #E4E2E2;
$h: #776D63;

$sans: 'Open Sans', sans-serif;

html{
  font-size: 1vw;
  @media screen and (min-width: 700px){
    font-size: 7px;
  }
  @media screen and (max-width: 400px){
    font-size: 4px;
  }
}

body{
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, $a, $g);
  font-family: $sans;
  filter: hue-rotate(5deg) saturate(130%) blur(0.3px);
}

.clock{
  position: absolute;
  top: 40%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  border-radius: 40rem;
  transform: translate3d(-50%,-50%,0);
  background: $a;
              //body main
  box-shadow: 1.5rem 3rem 2rem rgba($c, 0.15),
              //body close
              0.5rem 1rem 1.5rem rgba($d, 0.8),
              //body rim
              inset 0 0 0.4rem rgba($d, 0.2),
              //body rim bottom
              inset -0.2rem -0.1rem 0.4rem rgba($c, 0.4),
              //body long
              2rem 6rem 7rem rgba($c, 0.3);
}

.face{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35rem;
  height: 35rem;
  border-radius: 50rem;
  transform: translateX(-50%) translateY(-50%);
  background: $a;
              // inner rim
  box-shadow: 0 0 0.4rem rgba($d, 0.5),
              //inner rim bottom
              inset 0.2rem 0.1rem 0.4rem rgba($c, 0.4),
              //inner long
              inset 0.5rem 1rem 2rem rgba($c, 0.2),
              //inner main
              inset 0.25rem 0.5rem 1rem rgba($d, 0.4);  
}

.hand{
  position: absolute;
  left: calc(50% - 1rem);
  width: 2rem;
  border-radius: 50rem;
  background: $d;
  filter: blur(0.4px);
}

@keyframes big-tick{
  0%{
    transform: rotate(0deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(darken($d,10%), 0.5),
            //light from top
            inset 0.2rem 0.2rem 0.2rem rgba(lighten($d,20%), 1),
            //out long
            0.3rem 0.5rem 0.5rem rgba($d, 0.4);
  }
  25%{
    transform: rotate(90deg);
    box-shadow: inset -0.2rem 0.2rem 0.2rem rgba(darken($d,10%), 0.5),
            //light from top
            inset 0.2rem -0.2rem 0.2rem rgba(lighten($d,20%), 1),
            //out long
            0.3rem -0.5rem 0.5rem rgba($d, 0.4);
  }
  50%{
    transform: rotate(180deg);
    box-shadow: inset 0.2rem 0.2rem 0.2rem rgba(darken($d,10%), 0.5),
            //light from top
            inset -0.2rem -0.2rem 0.2rem rgba(lighten($d,20%), 1),
            //out long
            -0.3rem -0.5rem 0.5rem rgba($d, 0.4);
  }
  75%{
    transform: rotate(270deg);
    box-shadow: inset 0.2rem -0.2rem 0.2rem rgba(darken($d,10%), 0.5),
            //light from top
            inset -0.2rem 0.2rem 0.2rem rgba(lighten($d,20%), 1),
            //out long
            -0.3rem 0.5rem 0.5rem rgba($d, 0.4);
  }
  100%{
    transform: rotate(360deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(darken($d,10%), 0.5),
            //light from top
            inset 0.2rem 0.2rem 0.2rem rgba(lighten($d,20%), 1),
            //out long
            0.3rem 0.5rem 0.5rem rgba($d, 0.4);
  }
}

.hour{
  height: 11rem;
  transform-origin: 50% 10rem;
  top: calc(50% - 10rem);  
  animation: big-tick 43200s infinite linear;
  animation-delay: -36873s;
}

.minute{
  height: 14rem;
  transform-origin: 50% 13rem;
  top: calc(50% - 13rem);
  animation: big-tick 3600s infinite linear;
  animation-delay: -873s;
}

.cover{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0 );
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50rem;
  background: $d;
              // light from top
  box-shadow: inset 0.4rem 0.8rem 1rem rgba(lighten($d,15%), 0.6),
              //dark on bottom
              inset -0.4rem -0.8rem 1rem rgba(darken($d,10%), 0.6),
              //out main
              0.2rem 0.2rem 0.2rem rgba(darken($d,10%), 0.8);
  &:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    //out long
    transform: rotate(-25deg) scaleX(0.6);
    box-shadow: -0.5rem 1rem 2.5rem rgba($d, 0.8);
  }
  filter: blur(0.4px);
}
.second-bulb{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0 );
  width: 1rem;
  height: 1rem;
  border-radius: 50rem;
  background: $f;
              //out main
  box-shadow: 0.1rem 0.15rem 0.2rem rgba(darken($d,12%), 1);
  filter: blur(0.6px);
}

@keyframes little-tick{
  0%{
    transform: rotate(0deg);
    box-shadow: 0.5rem 1rem 0.7rem rgba($d, 0.4);
  }
  25%{
    transform: rotate(90deg);
    box-shadow: 1rem -0.5rem 0.7rem rgba($d, 0.4);
  }
  50%{
    transform: rotate(180deg);
    box-shadow: -0.5rem -1rem 0.7rem rgba($d, 0.4);
  }
  75%{
    transform: rotate(270deg);
    box-shadow: -1rem 0.5rem 0.7rem rgba($d, 0.4);
  }
  100%{
    transform: rotate(360deg);
    box-shadow: 0.5rem 1rem 0.7rem rgba($d, 0.4);
  }
}

.second{
  height: 17rem;
  transform-origin: 0.15rem 14rem;
  top: calc(50% - 14rem);
  transform: rotate(90deg);
  background: $f;
  width: 0.3rem;
  left: calc(50% - 0.15rem);
  border-radius: 0.2rem;
  //out main
  box-shadow: 1rem -0.5rem 0.7rem rgba($d, 0.4);
  
  animation: little-tick 60s infinite steps(15);
  animation-delay: -33s;
}

.number{
  position: absolute;
  left: 50%;
  top: calc(50% - 14.5rem);
  font-size: 3rem;
  font-weight: 500;
  font-family: Arial;
  transform: translate3d(-50%,-50%,0 );
  color: darken($e, 15%);
  filter: blur(0.4px);
  &:last-child{
    top: 50%;
    left: calc(50% + 15rem);
  }
}

.contrib{
  position: fixed;
  bottom: 5%;
  left: 50%;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(0,0,0,0.4);
  letter-spacing: 2px;
  transform: translateX(-50%);
  text-decoration: underline;
}

.sig{
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(0,0,0,0.4);
  letter-spacing: 2px;
}