fix buttons overlapping inserted text in reader in bottom mode

reader.html

@@ -50,7 +50,6 @@ button
     position: fixed;
     right: 5px;
     height: 2em;
-    bottom: calc( 10px + 2em );
 }
 #button_delete
 {
@@ -58,14 +57,21 @@ button
     position: fixed;
     right: 5px;
     height: 2em;
-    bottom: 5px;
 }
 </style>
-<style id=new_color_style>
+<style id=new_style>
 body > p:nth-of-type(1)
 {
     color: #CCCCCC;
 }
+#button_delete
+{
+    bottom: 5px;
+}
+#button_pause
+{
+    bottom: calc( 10px + 2em );
+}
 </style>
 <script src="include/browser-polyfill.min.js" charset="UTF-8"></script>
 <script src="reader.js" charset="UTF-8"></script>

reader.js

@@ -31,12 +31,27 @@ function update_styles()
     target.marginLeft = reader_settings.reader_margin;
     target.marginRight = reader_settings.reader_margin;
     target.fontFamily = reader_settings.reader_font;
-    let target2 = document.querySelector("#new_color_style");
+    let target2 = document.querySelector("#new_style");
     let elements = document.body.getElementsByTagName("p");
     let which = String(reader_settings.reader_reverse ? elements.length : 1);
+    let delete_css = "bottom: 5px";
+    let pause_css = "bottom: calc( 10px + 2em )";
+    if(reader_settings.reader_reverse)
+    {
+        delete_css = "top: 5px";
+        pause_css = "top: calc( 10px + 2em )";
+    }
     target2.textContent = `body > p:nth-of-type(${which})
 {
     color: ${reader_settings.reader_fg};
+}
+#button_delete
+{
+    ${delete_css};
+}
+#button_pause
+{
+    ${pause_css};
 }`;
     console.log("attempted to update styles");
     console.log(target2.textContent);