more styling on the page

README.txt

@@ -15,6 +15,7 @@ this takes a "page" from a book and let's you make a blackout poem which you can
 ## Perl 
 
 * File::Slurp - https://metacpan.org/pod/File::Slurp (Perl)
+* JSON - https://metacpan.org/pod/JSON (Perl)
 
 ## Font
 
@@ -23,3 +24,10 @@ The font is Lora - https://github.com/cyrealtype/Lora-Cyrillic (OFL)
 ## Texts
 
 texts are public domain from Project Gutenberg - https://www.gutenberg.org/
+
+* Wuthering Heights - https://www.gutenberg.org/ebooks/768
+* Jane Eyre - https://www.gutenberg.org/ebooks/1260
+* Agnes Grey - https://www.gutenberg.org/ebooks/767
+* Northanger Abbey - https://www.gutenberg.org/ebooks/121
+
+

index.html

@@ -107,6 +107,7 @@ $(document).ready(function(){
 		$("#spina").removeClass("done");
 		$( "#spina p span.click" ).removeClass("click");
 		$("#byline").html("");
+		$("#poem_list").html("");
 		$("#spina").addClass("unlock");
 	}); // clear 
 // 	$("help").hide();
@@ -157,7 +158,7 @@ $(document).ready(function(){
 </header>
 
 <nav>
-	<button class="helpbtn">Help</button> - <button id="lock">Lock</button> - <button id="compose">Blackout!</button> - <button id="clear">Start Over</button> - <button id="screen">Save as image</button>
+	<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">
@@ -192,27 +193,31 @@ $(document).ready(function(){
 </main>
 
 <section>
-	<h1>Copy Your Words</h1>
+	<h1>Copy Your <span class="purple">Words</span></h1>
 	<p>Copy the words you found here for alt-text, editing and archive! (Remember we don’t keep anything, so once you close this page, this poem is gone!)</P>
-	<button id="copy_text">Copy</button>
-	<button id="copy_text_meta">Copy with meta</button>
+		
+	<div id="copy_buttons">
+		<button id="copy_text" class="btn btn-mn">Copy</button>
+		<button id="copy_text_meta" class="btn btn-mn">Copy with meta</button>
+	</div>
 	<div id="poem_list"></div>
 </section>
 
-<hr>
+
 	
 <footer>
 	<p>This site made with <a href="https://jquery.com/">jQuery</a>, PHP and <a href="https://www.barebones.com/products/bbedit/">BBEdit</a> with help from <a href="https://espressoapp.com/">Espresso</a>.</p>
 	<p><a href="https://code.jacobhaddon.com/jake/smhn">Code</a> by Jacob Haddon - license <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3.0</a> - <a href="https://Apokrupha.com/BlackOut">Apokrupha.com/Blackout</a></p>
 </footer>
 
-<hr>
 
-<div class="helpbox help">
-	<button class="helpbtn">Close</button>
-</div>
+
+
 
 <div id="help" class="help">
+<div class="help btn-hlp-bx">
+	<button class="btn btn-hlp helpbtn">Close</button>
+</div>
 
 	<div class="helpwords">
 

style.css

@@ -65,13 +65,6 @@ a:hover {
 	color: white;
 }
 
-.helpbox {
-	position: fixed;
-	top: 20px;
-	right: 20px;
-	z-index: 10;
-}
-
 .helpwords {
 	margin: 40px auto;
 	max-width: 650px;
@@ -92,10 +85,54 @@ a:hover {
 	padding: 0 25px 25px 25px;
 }
 
+#poem_list {
+	border: 2px solid RebeccaPurple;
+	min-height: 75px;
+	padding: 50px 5% 5%;
+}
+#copy_buttons {
+	float: right;
+}
+
 .click {
 	background-color: Plum;
 }
 
+/* Styles for the buttons */
+
+/* all buttons have this */
+.btn {
+	font: 18px lora, Baskerville, TimesNewRoman, Times New Roman, Times, Georgia, serif;
+	padding: 8px;
+	border-style: none;
+	-webkit-appearance: none;
+}
+
+.btn-mn {
+	background-color: RebeccaPurple;
+	color: #ffffff;
+}
+.btn-mn:hover {
+	background-color: Plum;
+	color: #000000;
+}
+
+.btn-hlp-bx {
+	position: fixed;
+	top: 40px;
+	right: 10%;
+	z-index: 10;
+	float: right;
+}
+
+.btn-hlp {
+	background-color: white;
+}
+
+.btn-hlp:hover {
+	background-color: silver;
+}
+
 /* Styles for the blacked-out page */
 
 .clickDone {