diff --git a/index.html b/index.html
index 8edda4d..7e9f896 100644
--- a/index.html
+++ b/index.html
@@ -100,6 +100,10 @@ $(document).ready(function(){
 		todayFormatted = today.toString();
 	
 		$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>"; 
+		
+		 $(this).text(function(i, text){
+          return text === "Blackout!" ? "Un-Blackout!" : "Blackout!";
+      })
 	}); // compose 
 	
 	// reset everything back 
@@ -157,15 +161,17 @@ $(document).ready(function(){
 	<p>Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!</p>
 </header>
 
-<nav>
-	<button class="helpbtn btn btn-mn">Help</button> - <button id="lock" class="btn btn-mn">Lock</button> - <button id="compose" class="btn btn-mn">Blackout!</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="screen" class="btn btn-mn">Save as image</button>
-</nav>
-
 <div id="poem_header">
 	<h2>Invaders from the Dark</h2>
 	<h3>Greye La Spina</h3>
 </div>
 
+<nav>
+	<button class="helpbtn btn btn-mn">Help</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="compose" class="btn btn-mn">Blackout!</button> - <button id="screen" class="btn btn-mn">Save as image</button>
+</nav>
+
+
+
 <main id="poem">
 
 	<div id="spina" class="unlock">
diff --git a/style.css b/style.css
index eb22ad0..14b6ce0 100644
--- a/style.css
+++ b/style.css
@@ -13,20 +13,25 @@ Written by Jacob Haddon https://jacobhaddon.com
 @font-face {
 font-family: "lora";
 src: local("Lora"),
-		url("fonts/Lora/Lora-VariableFont_wght.ttf");
+		url("fonts/Lora/webfonts/Lora-Regular.woff2")   format('woff2'),
+		url("fonts/Lora/variable/Lora-VariableFont_wght.ttf")  format('truetype');
+		font-style: normal;
+		font-weight: normal;
 }
 
 @font-face {
 font-family: "brygada";
 src: local("Brygada1918"),
-		url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf");
+		url("fonts/Brygada_1918/Brygada1918-VariableFont_wght.ttf")  format('truetype');
 }
 
 @font-face {
 font-family: "lora";
 src: local("Lora"),
-		url("fonts/Lora/Lora-VariableFont_wght.ttf");
+		url("fonts/Lora/webfonts/Lora-Italic.woff2")   format('woff2'),
+		url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf");
 font-weight: normal;
+font-style: italic;
 }
 
 body {
@@ -96,6 +101,8 @@ a:hover {
 
 .click {
 	background-color: Plum;
+		/*background-color: RebeccaPurple;*/
+	/*color: #ffffff;*/
 }
 
 /* Styles for the buttons */
@@ -113,8 +120,10 @@ a:hover {
 	color: #ffffff;
 }
 .btn-mn:hover {
-	background-color: Plum;
-	color: #000000;
+/*	background-color: Plum;
+	color: #000000;*/
+background-color: black;
+color: white;
 }
 
 .btn-hlp-bx {
@@ -137,7 +146,9 @@ a:hover {
 
 .clickDone {
 	background-color: white;
+	
 	padding: 2px;
+	color: black;
 }
 
 .done {