diff --git a/web/fonts/Bradley Gratis.ttf b/web/fonts/Bradley Gratis.ttf
new file mode 100644
index 0000000..93fe6db
Binary files /dev/null and b/web/fonts/Bradley Gratis.ttf differ
diff --git a/web/index.html b/web/index.html
index 709a23b..541bc36 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,20 +1,10 @@
+<!DOCTYPE html>
+<html>
 <head>
-  <style>
-    body{
-      	font-family: Times;
-    	  text-align:center;
-        /* background-color: #000; */
-        /* color: #ccc; */
-        max-width: 30rem;
-        margin: 2rem auto;
-        line-height: 1.3;
-        letter-spacing: 0.1px;
-    }
-    ::selection{
-      background-color: #53018e;
-      color: #ccc;
-    }
-  </style>
+<meta name="viewport" content= "width=device-width, initial-scale=1.0">
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="style.css">
+<title>Console</title>
 </head>
 <body>
   <p>XPUB & PNF present: </p>
@@ -40,6 +30,8 @@ Are you ready to play? </p>
 
   <!-- <a href="./spin-wheel/">Wheel of Fortune</a>
   <a>Oracolotto</a> -->
+    
+<!------------- HI FRIENDS CARA IS TRYING TO ADD FOG --------->
 
     <div id="foglayer_01" class="fog">
   <div class="image01"></div>
diff --git a/web/style.css b/web/style.css
index 91cefdd..b65d2d9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,22 +1,23 @@
 ::root{
-    
+     
 }
 body
-    font-family: Times;
+    font-family: Bradley Gratis;
+    src: url(web/fonts/'Bradley Gratis.ttf') format('ttf');
     text-align:center;
-    /* background-color: #000; */
-    /* color: #ccc; */
+    background-color: #000;
+    color: #ccc
     max-width: 30rem;
     margin: 2rem auto;
     line-height: 1.3;
     letter-spacing: 0.1px;
-    color: #53018e
+    /*color: #53018e*/
 }
 img{
     max-width: 100%;
 }
 ::selection{
-background-color: #53018e;
+background-color: #000;
 color: #ccc;
 }
 
