smiling

css/style.css

@@ -84,6 +84,14 @@ textarea {
    Author's custom styles
    ========================================================================== */
 
+   @font-face {
+    font-family: 'Frank Knows';
+    src: url('../fonts/FrankKnows.woff2') format('woff2'),
+        url('../fonts/FrankKnows.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
 
 .smile {
   position: fixed;
@@ -93,33 +101,36 @@ textarea {
   right: 0;
   width: 100%;
   height: 100%;
-  background: url(../img/smilers.gif) no-repeat center center fixed; 
+  background: url(../img/smilers_final_def.gif) no-repeat center center fixed; 
   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain;
+  z-index: 1000;
+
 }
 
 .countdown {
   position: fixed;
-  left: 0;
-  bottom: 44px;
-  right: 0;
-  width: 100%;
+  left: 50%;
+  top:50%;
+  transform: translate(-50%,-50%);
   text-align: center;
-  font-family: 'Times New Roman', Times, serif;
-  font-size: 24px;
+  font-family: 'Frank Knows';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 13vw;
   letter-spacing: 1px;;
-  z-index: 1000;
-  display: none;
+  z-index: 500;
 }
 
+.tnr {
+  font-family: 'Times New Roman', Times, serif;
+}
 
 @media only screen and (max-width: 500px) {
 
   .countdown {
-    bottom: 22px;
-    font-size: 17px;
   }
 
 

index.html

@@ -16,6 +16,7 @@
   <link rel="icon" href="/favicon.ico" sizes="any">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="icon.png">
+  <link rel="preload" href="fonts/FrankKnows.woff2" as="font" type="font/woff2">
 
   <link rel="manifest" href="site.webmanifest">
   <meta name="theme-color" content="#fafafa">