Added size span class set into data.js file

css/style.css

@@ -92,6 +92,18 @@ body {
 	font-size: 1.4em;
 }
 
+.small {
+	font-size: 0.6em;
+}
+
+.medium {
+	font-size: 0.8em;
+}
+
+.large {
+	font-size: 1.0em;
+}
+
 .win {
 	color: #ffffff !important;
    	background-color: red;

js/data.js

@@ -4,29 +4,29 @@ var headerText = "Bingo";
 var footerText = "<a href='https://github.com/jeffehobbs/HTML5-bingo/' target='_blank'>Code available on github</a>";
 
 var JSONBingo = {"squares": [
-        {"square": "one"},
+        {"square": "<span class='large'>one</span>"},
-        {"square": "two"},
+        {"square": "<span class='large'>two</span>"},
-        {"square": "three"},
+        {"square": "<span class='large'>three</span>"},
-        {"square": "four"},
+        {"square": "<span class='large'>four</span>"},
-        {"square": "five"},
+        {"square": "<span class='large'>five</span>"},
-        {"square": "six"},
+        {"square": "<span class='large'>six</span>"},
-        {"square": "seven"},
+        {"square": "<span class='large'>seven</span>"},
-        {"square": "eight"},
+        {"square": "<span class='large'>eight</span>"},
-        {"square": "nine"},
+        {"square": "<span class='large'>nine</span>"},
-        {"square": "ten"},
+        {"square": "<span class='large'>ten</span>"},
-        {"square": "eleven"},
+        {"square": "<span class='large'>eleven</span>"},
-        {"square": "twelve"},
+        {"square": "<span class='large'>twelve</span>"},
-        {"square": "thirteen"},
+        {"square": "<span class='large'>thirteen</span>"},
-        {"square": "fourteen"},
+        {"square": "<span class='large'>fourteen</span>"},
-        {"square": "fifteen"},
+        {"square": "<span class='large'>fifteen</span>"},
-        {"square": "sixteen"},
+        {"square": "<span class='large'>sixteen</span>"},
-        {"square": "seventeen"},
+        {"square": "<span class='large'>seventeen</span>"},
-        {"square": "eighteen"},
+        {"square": "<span class='large'>eighteen</span>"},
-        {"square": "nineteen"},
+        {"square": "<span class='large'>nineteen</span>"},
-        {"square": "twenty"},
+        {"square": "<span class='large'>twenty</span>"},
-        {"square": "twenty one"},
+        {"square": "<span class='large'>twenty one</span>"},
-        {"square": "twenty two"},
+        {"square": "<span class='large'>twenty two</span>"},
-        {"square": "twenty three"},
+        {"square": "<span class='large'>twenty three</span>"},
-        {"square": "twenty four"}    	
+        {"square": "<span class='large'>twenty four</span>"}    	
     ]
 };