feat(style): update site style to not look as bland

src/App.vue

@@ -2,16 +2,22 @@
   <div id="app">
     <header>
       <h1>{{ appName }}</h1>
+      <h2>{{ appSubtitle }}</h2>
     </header>
 
+    <section>
       <h2>Quick info</h2>
       <data-table :dataset="getSebinData.generic"></data-table>
+    </section>
 
+    <section>
       <h2>Colors</h2>
       <data-table :dataset="getSebinData.colors"></data-table>
-
+    </section>
+    <section>
       <h2>Penis</h2>
       <data-table :dataset="getSebinData.penis"></data-table>
+    </section>
 
     <section class="prose">
       <h2>Anatomy</h2>
@@ -294,7 +300,8 @@ export default {
   },
   data() {
     return {
-      appName: "Sebin Nyshkim Character Reference Page",
+      appName: "Sebin Nyshkim",
+      appSubtitle: "Character Reference Page",
       muscleRefs: this.getMuscleRefPics(17),
       kittens: this.getKittens(17),
       clothes: this.getClothesPics()
@@ -332,10 +339,36 @@ export default {
 
 header {
   text-align: center;
+
+  h1 {
+    font-size: 2.2em;
+    line-height: 1;
+  }
+
+  h2 {
+    font-size: 1em;
+    font-weight: normal;
+  }
 }
 
 .prose {
   text-align: justify;
+  hyphens: auto;
+}
+
+section {
+  margin: 2em 0;
+  padding: 1em;
+  box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
+  background-color: #fff;
+
+  h2 {
+    border-bottom: 0.0625em #000 solid;
+  }
+
+  h3 {
+    border-bottom: 0.125em #000 dotted;
+  }
 }
 
 .float {