body {
  background-color: #444;
  background-image: linear-gradient(#666, #222);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // Hmm, this could be the graal :
  height: calc(100vh - 1rem) ;
  
  //overflow: hidden;
}

$color-front: #000;
$color-back: #FFF;

$color-mix: mix($color-front, $color-back);


div[type="clock"] {
  @media screen and (orientation:portrait) {
    font-size: 9vw;
	}
	@media screen and (orientation:landscape) {
	  font-size: 9vh;
  }
}

// frame:
div[type="clock"] {
  z-index: 200;
  display: block;
  position: absolute;
  padding: 0;
  width: 10em;
  height: 10em;
  left: 50%;
  top: 50%;
  margin-left: -5em;
  margin-top: -5em;
  border-radius: 50%;
  border-style: solid;
  border-width: .1em;
  text-align: center;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  overflow: hidden;
  $color-main: #3D6B99;

  $color-gradient: darken(adjust-hue($color-main, +20deg), 5%);
  $color-gradient2: lighten(adjust-hue($color-main, -20deg), 5%);
  
  background-image: linear-gradient(to bottom right,  $color-gradient 30%, $color-gradient2 70%);
  // Title :
  h2 {

    z-index: 300;

    //font-size: 1em;
    font-family: times;
    margin: 0;
    line-height: 4.75em;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    transform-origin: 50% 50%;
    border-radius: 50%;
    overflow: hidden;
    color: transparentize($color-front, 0.75);
    text-shadow: 0.02em 0.02em 0.01em rgba(255,255,255, 0.125),
                -0.02em -0.02em 0.01em rgba(0,0,0, 0.125);
/*    
    transition-duration: 200ms;
    transition-property: color, text-shadow;
    transition-timing-function: ease;
    &:hover {
      color: transparentize($color-front, 0.2);
      text-shadow: 0.02em 0.02em 0.01em rgba(255,255,255, 0.25),
                  -0.02em -0.02em 0.01em rgba(0,0,0, 0.25);
    }
*/
    background-image: radial-gradient( circle at 50% 50%,  black 0.3em, transparent 0.3125em);
    
    &:before,
    &:after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      border-radius: 50%;
    }

    // Points :
    &:before {
      z-index: 301;
      box-shadow: inset 0 0 0 0.025em black;
      background-repeat: no-repeat;

      $color: $color-front;
      

      $dot-big-min: 44%;
      $dot-big-max: 45%;
      $dot-little-min: 24%;
      $dot-little-max: 25%;
      
      background-image: radial-gradient( circle at 50% 50%,  $color $dot-big-min, transparent $dot-big-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-big-min, transparent $dot-big-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-big-min, transparent $dot-big-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-big-min, transparent $dot-big-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max),
                        radial-gradient( circle at 50% 50%,  $color $dot-little-min, transparent $dot-little-max);

      
      $background-size: 1.85em;
      background-size: $background-size $background-size;

      $posSmall: 9.25% ;      
      $posLarge: 34.75% ;      
      background-position:
        50% -#{$background-size / 2},
        calc(#{100% - $posLarge} + #{$background-size / 2}) calc( #{$posSmall} - #{$background-size / 2}),
        calc(#{100% - $posSmall} + #{$background-size / 2}) calc( #{$posLarge} - #{$background-size / 2}),
        calc(100% + #{$background-size / 2}) 50%,
        calc(#{100% - $posSmall} + #{$background-size / 2}) calc( #{100% - $posLarge} + #{$background-size / 2}),
        calc(#{100% - $posLarge} + #{$background-size / 2}) calc( #{100% - $posSmall} + #{$background-size / 2}),
        50% calc(100% + #{$background-size / 2}),
        calc( #{$posLarge} - #{$background-size / 2} ) calc( #{100% - $posSmall} + #{$background-size / 2}),
        calc( #{$posSmall} - #{$background-size / 2} ) calc( #{100% - $posLarge} + #{$background-size / 2}),
        -#{$background-size / 2} 50%,
        calc(#{$posLarge} - #{$background-size / 2} ) calc( #{$posSmall} - #{$background-size / 2}),
        calc(#{$posSmall} - #{$background-size / 2} ) calc( #{$posLarge} - #{$background-size / 2});

    }

    // Glass :
    &:after {
      z-index: 350;
      background-image:  radial-gradient( circle at 25% 25%,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.4) 8%,rgba(255,255,255,0) 75%),
                         radial-gradient( circle at 47% 47%,  rgba(255,255,255,0.1) 52.5%,  rgba(255,255,255,0.1) 57.5%, rgba(255,255,255,0) 57.6%);
      box-shadow: inset -0.03em -0.03em rgba(0,0,0,0.5), inset 0.03em 0.03em rgba(255,255,255,0.5);  
    }

  }
  
  
  &[value]:before,
  &[value]:after {
    content: "";
  }

  &:before,
  &:after {
    color: inherit;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 0;
  }

  // minutes :
  &:before {
    z-index: 202;
    
    border-width: .15em 0 .15em 4em;
    border-radius: .15em;
    transform-origin: .15em 50%;
    height: 0.3em;

    margin-top: -.15em;
    margin-left: -.15em;
    margin-bottom: -.15em;
  }
  &:after {
    z-index: 201;
    border-width: .175em 0 .175em 3.2em;
    border-radius: .175em;
    transform-origin: .175em 50%;
    height: 0.35em;

    margin-top: -.175em;
    margin-left: -.175em;
    margin-bottom: -.175em;

  }

  $hourAngle: 360 / 12;
  $minuteAngle: 360 / 60;
  $shiftAngle: 360 / 60 / 12;
  
  @for $hour from 0 to 24 {
      $deg: #{ -90 + ( $hourAngle * $hour ) }deg ;
      $strHour: $hour;
      @if( str-length( #{$hour} ) == 1 ){
        $strHour: 0#{$hour};
      }
      &[value^="#{$strHour}:"]:after { transform: rotate( $deg ); }
  }

  @for $minute from 0 to 60 {
      $hourDeg: ( $shiftAngle * $minute ) ;
      $minuteDeg: ( $minuteAngle * $minute ) ;
      $strMinute: $minute;
      @if( str-length( #{$minute} ) == 1 ){
        $strMinute: 0#{$minute};
      }
      &[value$=":#{$strMinute}"] {
        transform: rotate( #{$hourDeg}deg );
        &:before { transform: rotate( #{ $minuteDeg - 90 + ( $hourDeg * -1 ) }deg ); }        
        > * { transform: rotate( #{  $hourDeg * -1 }deg ); }        
      }

  }
  
}