Make better use of mixins and extending for responsiveness

- uses textElement() to group together p,h1...h4
- Turns out if you extend a class then say change the class in a media breakpoint it will apply the media queried properties to everything that extends the original class.

sass/responsive.scss

@@ -2,4 +2,15 @@
     @media (max-width: $width) {
         @content;
     }
+}
+
+@mixin textElements() {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    {
+        @content;
+    }
 }

sass/style.scss

@@ -226,14 +226,14 @@ body {
         font-style: italic;
         margin-top: 1.7em;
     }
-    p,
-    h1,
-    h2,
-    h3,
-    h4 {
+    @include textElements() {
         @extend .widthCenter;
     }
     @include respond-to($width) {
+        .widthCenter {
+            margin-left: 12px;
+            margin-right: 12px;
+        }
         div {
             // margin: auto;
             // padding: 0;
@@ -245,18 +245,20 @@ body {
                 ;
             }
         }
-        table,
-        p,
-        h1,
-        h2,
-        h4,
-        a {
-            margin-right: .8em;
-            margin-left: .8em;
+        @include textElements() {
+            // margin-right: .8em;
+            // margin-left: .8em;
         }
     }
 }
 
+#skilltablebutton {
+    text-decoration: underline;
+    font-size: 1.1em;
+    font-style: italic;
+    font-weight: normal;
+}
+
 @include respond-to($width) {
     #mast {
         padding-left: 1em;