Simplify css to minimum for the example.

web/phonagen.css

@@ -1,9 +1,9 @@
 body {
   margin-left: 1.5%;
   margin-right: 1.5%;
-
-  color: hsla(230, 10%, 15%, 1.0);
-  border-color: hsla(230, 10%, 15%, 1.0);
+  background-color: hsl(230, 10%, 50%);
+  color: hsl(230, 10%, 10%);
+  border-color: hsl(230, 10%, 15%);
 }
 
 h1 {
@@ -42,7 +42,7 @@ hr {
 }
 
 header {
-  background-color: hsla(230, 10%, 90%, 0.60);
+  background-color: hsla(230, 10%, 90%);
 
   border-style: solid;
   border-width: thin;
@@ -54,7 +54,7 @@ header {
 }
 
 footer {
-  background-color: hsla(230, 10%, 90%, 0.60);
+  background-color: hsla(230, 10%, 90%);
 
   border-style: solid;
   border-width: thin;
@@ -66,7 +66,7 @@ footer {
 }
 
 article {
-  background-color: hsla(230, 10%, 90%, 0.60);
+  background-color: hsla(230, 10%, 90%);
   border-style: solid;
   border-width: thin;
   border-radius: 5px;
@@ -74,75 +74,10 @@ article {
   padding: 10px;
 }
 
-nav {
-  background-color: hsla(230, 10%, 90%, 0.60);
-  border-style: solid;
-  border-width: thin;
-  border-radius: 5px;
-  margin: 2px;
-  padding: 3px;
-}
-
-section {
-  margin-left: 5px;
-}
-
 p {
   margin-left: 7px;
 }
 
-.nav-item {
-  display: inline-block;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.author-date {
-  text-align: right;
-  font-style: italic;
-}
-
-.author {
-  font-variant: small-caps;
-}
-
-.banner {
-  text-align: center;
-  opacity: 1.0;
-}
-
-a:link {
-  color: hsla(230, 90%, 35%, 1.0);
-  text-decoration: none;
-}
-a:visited {
-  color: hsla(280, 90%, 35%, 1.0);
-  text-decoration: none;
-}
-a:hover {
-  color: hsla(230, 90%, 90%, 1.0);
-  text-shadow: 1px 0px 2px hsla(230, 90%, 15%, 1.0), -1px 0px 2px hsla(230, 90%, 15%, 1.0), 0px 1px 2px hsla(230, 90%, 15%, 1.0), 0px -1px 2px hsla(230, 90%, 15%, 1.0), 0px 0px 0.2em hsla(230, 90%, 25%, 1.0)
-}
-
-table {
-  border-style: solid;
-  border-width: thin;
-  border-collapse: collapse;
-}
-
-th {
-  background-color: hsla(230, 10%, 90%, 1.0);
-  border-style: solid;
-  border-width: thin;
-  border-collapse: collapse;
-  padding: 5px;
-  text-align: center;
-}
-
-td {
-  border-style: solid;
-  border-width: thin;
-  border-collapse: collapse;
-  padding: 5px;
-  text-align: center;
+.main-transcription {
+  font-size: 200%;
 }

web/phonagen.js

@@ -129,7 +129,7 @@ phonagen.formatWord = function (phonemes, phonology) {
   }
   // Construct what should be displayed
   var text = "<p>"
-  text += "<strong>" + wordTranscriptions.get(phonology.mainTranscription) + "</strong><br/>"
+  text += "<span class=\"main-transcription\">" + wordTranscriptions.get(phonology.mainTranscription) + "</span><br/>"
   text += "Pronounciation: /" + wordTranscriptions.get("phoneme") +"/<br/>"
   for (var [writing, value] of wordTranscriptions) {
     if (   (writing !== "phoneme")