updated css with b fabiolo font

css/style.css

@@ -1,11 +1,16 @@
 
 @font-face{
-    font-family: roboto;
+    font-family: courier;
-    src: url('JetBrainsMono-Bold.ttf');
+    src: url('CourierPrimeBold.ttf');
+}
+
+@font-face{
+	font-family: fabiolo;
+	src: url('fabiolo-smallcap-regular.ttf')
 }
 
 .Roboto{
-    font-family: roboto;
+    font-family: courier;
 }
 
 html, body {
@@ -13,7 +18,7 @@ html, body {
     height: 100%;
     margin: 0;
     overflow-y: hidden;
-    font-family: "roboto";
+    font-family: "fabiolo";
     
 }
 
@@ -22,7 +27,7 @@ html, body {
     display: -webkit-flex;
     -webkit-align-items: center;
     width: 100%;
-    height: 100%
+    height: 100%;
 }
 
 #canvas-layout {
@@ -45,7 +50,6 @@ hour&minutes
 */
 #digital-body {
     position: absolute;
-    width: 70%;
     width: 360px;
     height: 360px;
     top: 0px;
@@ -53,11 +57,12 @@ hour&minutes
     background-size: 100%;
     background-repeat: no-repeat;
     overflow: hidden;
+  
 }
 
 #rec-time {
-  margin: 0;
+  position: relative;
-  position: absolute;
+  display: inline-block;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
@@ -65,25 +70,32 @@ hour&minutes
 }
 
 #str-hours {
-    font-size: 370%;
+    font-size: 600%;
     font-style: bold;
+    letter-spacing: -2px;
     float: left;
     color: white;
+    width: 90px;
+    text-align: right;
 }
 
 #str-console {
-    font-size: 370%;
+    font-size: 650%;
     font-style: bold;
     float: left;
     color: white;
     visibility: hidden;
+    transform: translate(0, -10px);
 }
 
 #str-minutes {
-    font-size: 370%;
+    font-size: 600%;
+    letter-spacing: -2px;
     font-style: bold;
     float: left;
     color: white;
+    width: 90px;
+    text-align: left;
 }
 
 #str-ampm {

js/app.js

@@ -433,8 +433,8 @@ var flagDigital = true;
 			sunColor = "#C0C0C0"
 		}
     	
-    	sunDistance = document.body.clientWidth / 2 - 30;
+    	sunDistance = document.body.clientWidth / 2 - 40;
-        renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 10, sunColor);    	
+        renderCircle(ctxContent, polToCart(sunDistance, hourToAngle(hour + minute / 60)), 12, sunColor);    	
     }
     
     function renderEarth(date, minute, second) {