diff --git a/docs/index.html b/docs/index.html
index d9ec359..c2520cb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -74,7 +74,7 @@
   </head>
 
   <body>
-    <h1>Water.css</h1>
+    <h1 id="h1-water-css">Water.css</h1>
 
     <p>
       Water.css is a drop-in collection of CSS styles to make simple websites like this just a
@@ -356,7 +356,7 @@ <h5>Heading 5</h5>
     <h6>Heading 6</h6>
 
     <footer>
-      <a href="#">Back to top ⬆</a>
+      <a id="back-to-top" href="#">Back to top ⬆</a>
     </footer>
     <script src="script.js" defer></script>
   </body>
diff --git a/docs/style.css b/docs/style.css
index a0c3fc9..63bcf59 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -10,6 +10,18 @@ html {
   margin: 1rem 2.5rem 1rem 0;
 }
 
+#h1-water-css {
+  background: rgba( 255, 255, 255, 0.25 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 4px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+  margin-bottom: 50px;
+  padding: 20px ;
+  width: max-content;
+}
+
+
 /* Make the feedback Emoji appear next to the button */
 #copy-button {
   position: relative;
@@ -63,3 +75,12 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+#back-to-top {
+  border-radius: 50px;
+  background: #e0e0e0;
+  box-shadow:  20px 20px 60px #bebebe,
+               -20px -20px 60px #ffffff;
+  margin: 30px 0;
+  padding: 20px;
+}
