added pic of me

css/style.css

@@ -119,7 +119,7 @@
   margin: 0;
   text-indent: 0; }
 
-.widthCenter, .slide > div, .slide p,
+.widthCenter, .slide, .slide p,
 .slide h1,
 .slide h2,
 .slide h3,
@@ -144,7 +144,7 @@
  * sections
  */
 body {
-  font-family: 'Playfair Display', serif;
+  font-family: "Playfair Display", serif;
   line-height: 2; }
 
 #top {
@@ -177,12 +177,12 @@ body {
     font-weight: normal;
     color: #ff429a;
     transition-property: size;
-    transition-duration: .2s;
+    transition-duration: 0.2s;
     margin: -18px 0 0 0; }
   #mast h2 {
     transition-property: size;
-    transition-duration: .2s;
-    color: #91EFFF;
+    transition-duration: 0.2s;
+    color: #91efff;
     margin: 0; }
 
 #spaceTakerUpper {
@@ -225,7 +225,6 @@ body {
   padding: 0px;
   width: 100%;
   margin-top: 50px;
-  /* width wrapping */
   /* Project bits */ }
   .slide .project {
     width: 390px;
@@ -253,24 +252,24 @@ body {
       padding: 1em 1em 0 1em; }
       .slide .project .details h2 {
         line-height: 1;
-        margin: 0 0 .5em 0; }
+        margin: 0 0 0.5em 0; }
       .slide .project .details p {
-        margin: 0 0 .5em 0; }
+        margin: 0 0 0.5em 0; }
       .slide .project .details .tag {
         float: left;
-        padding: 0 .3em 0 .3em;
+        padding: 0 0.3em 0 0.3em;
         background: #f3f3f3;
         border: 1px solid #ddd;
-        margin: .2em;
+        margin: 0.2em;
         border-radius: 5px; }
       .slide .project .details .cat {
-        background: #B7EEFF;
-        border: 1px solid #8AC9DD; }
+        background: #b7eeff;
+        border: 1px solid #8ac9dd; }
       .slide .project .details .award {
         float: right;
         background: none;
         border: none;
-        margin: 0 0 .5em .5em; }
+        margin: 0 0 0.5em 0.5em; }
         .slide .project .details .award div {
           display: inline-block;
           text-align: center;
@@ -284,7 +283,7 @@ body {
             font-weight: normal;
             font-style: italic; }
           .slide .project .details .award div p {
-            font-size: .8em; }
+            font-size: 0.8em; }
       .slide .project .details .award::before,
       .slide .project .details .award::after {
         vertical-align: middle;
@@ -299,10 +298,10 @@ body {
         position: relative; }
       .slide .project .details .award::before {
         background-image: url(../images/laurelleft.png);
-        left: .09em; }
+        left: 0.09em; }
       .slide .project .details .award::after {
         background-image: url(../images/laurelright.png);
-        right: .11em; }
+        right: 0.11em; }
   .slide table {
     line-height: 1.3;
     margin: 0;
@@ -318,14 +317,14 @@ body {
     font-size: 2em;
     font-style: italic; }
   @media (max-width: 800px) {
-    .slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+    .slide .widthCenter, .slide .slide, .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%; } }
+      margin: 0 0 0.5em 5%; } }
 
 #skilltablebutton {
   text-decoration: underline;
@@ -338,7 +337,7 @@ body {
   -webkit-animation: 3s ease fadeIn;
   -o-animation: 3s ease fadeIn;
   animation: 3s ease fadeIn;
-  color: #91EFFF; }
+  color: #91efff; }
 
 @media (max-width: 800px) {
   #mast {
@@ -348,4 +347,20 @@ h2 {
   font-style: italic; }
 
 a {
-  transition-duration: .2s; }
+  transition-duration: 0.2s; }
+
+#picOfMe {
+  background-image: url("../images/ChuckNew.jpg");
+  width: 300px;
+  height: 300px;
+  float: right;
+  background-size: cover;
+  margin: 40px 10px;
+  border-radius: 150px;
+  background-position: center center; }
+  @media (max-width: 600px) {
+    #picOfMe {
+      height: 150px;
+      width: 150px;
+      border-radius: 75px;
+      margin: 30px 8px 8px 8px; } }