diff --git a/page/css/BebasNeue Regular.ttf b/page/css/BebasNeue Regular.ttf
new file mode 100755
index 0000000..2fff54c
Binary files /dev/null and b/page/css/BebasNeue Regular.ttf differ
diff --git a/page/css/clock.css b/page/css/clock.css
index 076fe1d..b00b746 100644
--- a/page/css/clock.css
+++ b/page/css/clock.css
@@ -1,70 +1,67 @@
 /* If you want you can use font-face */
 @font-face {
-    font-family: 'BebasNeueRegular';
-    src: url('BebasNeue-webfont.eot');
-    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
-         url('BebasNeue-webfont.woff') format('woff'),
-         url('BebasNeue-webfont.ttf') format('truetype'),
-         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'BebasNeueRegular';
+  src: url('BebasNeue\ Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
 }
 
-body, html {
+body,
+html {
   height: 100vh;
   width: 100vw;
   user-select: none;
 }
 
 .clock {
-    width: 800px;
-    margin: 0 auto;
-    padding: 30px;
-    color: #fff;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    overflow: hidden;
-    z-index: 10;
-    opacity: 0;
-    animation-name: show;
-    animation-duration: 3s;
-    animation-fill-mode: forwards;
-    pointer-events: none;
+  width: 800px;
+  margin: 0 auto;
+  padding: 30px;
+  color: #fff;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  z-index: 10;
+  opacity: 0;
+  animation-name: show;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+  pointer-events: none;
 }
 
 #date {
-    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
-    font-size: 36px;
-    text-align: center;
-    text-shadow: 0 0 5px #00c6ff;
+  font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+  font-size: 36px;
+  text-align: center;
+  text-shadow: 0 0 5px #00c6ff;
 
 }
 
 ul {
-    width: 800px;
-    margin: 0 auto;
-    padding: 0px;
-    list-style: none;
-    text-align: center;
+  width: 800px;
+  margin: 0 auto;
+  padding: 0px;
+  list-style: none;
+  text-align: center;
 }
 
 ul li {
-    display: inline;
-    font-size: 10em;
-    text-align: center;
-    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
-    text-shadow: 0 0 5px #00c6ff;
+  display: inline;
+  font-size: 10em;
+  text-align: center;
+  font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
+  text-shadow: 0 0 5px #00c6ff;
 }
 
 .point {
-    position: relative;
-    padding-left: 10px;
-    padding-right: 10px;
-    animation: flash 1s ease infinite;
-    top: -11px;
-    opacity: 0;
+  position: relative;
+  padding-left: 10px;
+  padding-right: 10px;
+  animation: flash 1s ease infinite;
+  top: -11px;
+  opacity: 0;
 }
 
 @keyframes flash {
@@ -72,10 +69,12 @@ ul li {
     opacity: 0;
     text-shadow: none;
   }
+
   50% {
     opacity: 1.0;
     text-shadow: 0 0 20px #00c6ff;
   }
+
   100% {
     opacity: 0;
     text-shadow: none;
@@ -86,6 +85,7 @@ ul li {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }