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.

css/style.css

@@ -180,19 +180,20 @@ body {
     font-style: italic;
     margin-top: 1.7em; }
   @media (max-width: 800px) {
+    .slide .widthCenter, .slide div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+      margin-left: 12px;
+      margin-right: 12px; }
     .slide div .project {
       width: 90%;
       float: none;
       display: block;
-      margin: 0 0 .5em 5%; }
-    .slide table,
-    .slide p,
-    .slide h1,
-    .slide h2,
-    .slide h4,
-    .slide a {
-      margin-right: .8em;
-      margin-left: .8em; } }
+      margin: 0 0 .5em 5%; } }
+
+#skilltablebutton {
+  text-decoration: underline;
+  font-size: 1.1em;
+  font-style: italic;
+  font-weight: normal; }
 
 @media (max-width: 800px) {
   #mast {