adds digital time and event name

css/style.css

@@ -1,7 +1,7 @@
 
 @font-face{
     font-family: courier;
-    src: url('CourierPrimeBold.ttf');
+    src: url('CourierPrimeSansRegular.ttf');
 }
 
 @font-face{
@@ -10,7 +10,7 @@
 }
 
 .Roboto{
-    font-family: courier;
+    font-family: fabiolo;
 }
 
 html, body {
@@ -18,7 +18,7 @@ html, body {
     height: 100%;
     margin: 0;
     overflow-y: hidden;
-    font-family: "fabiolo";
+    font-family: "courier";
     
 }
 
@@ -60,16 +60,8 @@ hour&minutes
   
 }
 
-#rec-time {
-  position: relative;
-  display: inline-block;
-  top: 50%;
-  left: 50%;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-#str-hours {
+#str-just-hours {
+	text-transform: full-width;
     font-size: 600%;
     font-style: bold;
     letter-spacing: -2px;
@@ -79,27 +71,63 @@ hour&minutes
     text-align: right;
 }
 
-#str-console {
-    font-size: 650%;
+#rec-time {
+  position: relative;
+  display: inline-block;
+  top: 40%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+#str-hours {
+    font-size: 450%;
     font-style: bold;
+    letter-spacing: -10px;
+    float: left;
+    color: white;
+    width: 80px;
+    text-align: right;
+    transform: translate(-5px, 0);
+}
+
+#str-console {
+    font-size: 250%;
     float: left;
     color: white;
     visibility: hidden;
-    transform: translate(0, -10px);
+    transform: translate(-6px, 8px);
 }
 
 #str-minutes {
-    font-size: 600%;
-    letter-spacing: -2px;
-    font-style: bold;
+    font-size: 450%;
+    letter-spacing: -10px;
     float: left;
     color: white;
-    width: 90px;
+    width: 70px;
     text-align: left;
+    transform: translate(-15px, 0);
+    
 }
 
 #str-ampm {
     font-size: 280%;
     color: white;
     padding-top: 20%;
+}
+
+#str-event {
+position: absolute;
+  display: inline-block;
+  top:60%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  font-size: 200%;
+  color: white;
+  text-align: center;
+  z-index: 2;
+}
+	
 }