Improve rudimentary full page header

src/assets/css/main.css

@@ -58,7 +58,7 @@ header img {
     height: auto;
 }
 
-header a {
+header a, .fp-header a {
     list-style-type: none;
     margin: 0px;
     padding: 10px;
@@ -73,7 +73,7 @@ header a {
     border-radius: 25px;
 }
 
-header a:hover {
+header a:hover, .fp-header a:hover {
     background-color: #d2691e;
 }
 
@@ -86,9 +86,11 @@ header a:hover {
 }
 
 .fp-header {
-    width: 100%;
-    height: 50rem;
+    width: 100% - 30px;
+    height: 10rem; /* set to auto after you add the image */
     background-color: #ffffff;
+    padding: 30px;
+    font-family: "M_PLUS_1", sans-serif;
 }
 
 main {
@@ -104,6 +106,16 @@ main p {
     font-family: "Roboto", sans-serif;
 }
 
+main a {
+    text-decoration: none;
+    color: #dddddd;
+    transition: color 500ms;
+}
+
+main a:hover {
+    color: #ffffff;
+}
+
 ::-webkit-scrollbar {
     border-radius: 25px;
 }

src/index.html

@@ -15,7 +15,8 @@
             <a href="book2/index.html">Lyza the Sheepdog: The Flood</a>
         </header>
         <div class="fp-header">
-            
+            <h1>Travel back in time</h2>
+            <a href="book2/index.html">Buy our newest book!</a>
         </div>
         <main>