right float of about picture responsive

css/index.css

@@ -49,12 +49,19 @@ body, html {
     float: left;
 }
 
-.aboutPic {
+.aboutPicContainer {
     width: 60%;
     height: 300px;
     float: left;
 }
 
+#aboutPic {
+    float: right;
+    margin-top: 10%;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
+    height: 100%;
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
     .tile {
@@ -129,12 +136,19 @@ body, html {
         width: 100%;
     }
 
-    .aboutPic {
+    .aboutPicContainer {
         width: 100%;
         height: 150px;
     }
 
-    #section2{
+    #section2 {
         height: 130%;
     }
+
+    #aboutPic {
+        float: initial;
+        margin-left: auto;
+        margin-right: auto;
+        /*    todo nof loating right in middle */
+    }
 }