From 6ae249cdb5539cdc082b6969c5b4fecbc515558d Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Wed, 26 May 2021 17:14:31 +0100
Subject: [PATCH] Mobile versions updated.

---
 index.html |  4 ++--
 main.css   | 52 ++++++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index aa84af1..59abe5f 100644
--- a/index.html
+++ b/index.html
@@ -48,9 +48,9 @@
             <div class="column-50">
                 <h1 class="my-name">Benjamin Toby.</h1>
                 <h2 class="hero-subtext">Hi! I'm a
-                    <a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
+                    <a class="hero-content-link" id="ui-ux-design">UI&nbsp;UX&nbsp;Designer</a>,
                     <a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>,
-                    <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>,
+                    <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web Developer</a>,
                     <a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
                 </h2>
                 
diff --git a/main.css b/main.css
index b10155d..e04532a 100644
--- a/main.css
+++ b/main.css
@@ -573,7 +573,7 @@ section.hero-section {
     }
     
     .face-wrapper {
-        margin-top: -10vw;
+        margin-top: 0;
         right: -20vw;
     }
     
@@ -583,8 +583,25 @@ section.hero-section {
     }
     
     #morph-shape-1 {
-        top: 20px;
-        left: 60px;
+        top: 40px;
+        left: -100px;
+        width: 200px;
+        height: 200px;
+    }
+    
+    #morph-shape-2 {
+        top: auto;
+        bottom: 50px;
+        left: 0px;
+        width: 100px;
+        height: 100px;
+    }
+    
+    #morph-shape-3 {
+        top: 250px;
+        left: -150px;
+        width: 120px;
+        height: 120px;
     }
     
 }
@@ -612,7 +629,7 @@ section.hero-section {
     }
     
     .container-1200px.hero-content-container {
-        padding-right: 30vw;
+        padding-right: 40vw;
     }
     
     .hero-content-link {
@@ -639,8 +656,23 @@ section.hero-section {
     
     .face-wrapper {
         top: 0;
-        margin-top: -80vw;
-        right: -50vw;
+        margin-top: -500px;
+        right: -60vw;
+    }
+    
+    #morph-shape-1 {
+        top: 100px;
+        left: 40px;
+        width: 70px;
+        height: 70px;
+    }
+    
+    #morph-shape-2 {
+        display: none;
+    }
+    
+    #morph-shape-3 {
+        display: none;
     }
     
 }
@@ -662,7 +694,7 @@ section.hero-section {
     }
     
     .face-wrapper {
-        margin-top: -100vw;
+        margin-top: -530px;
         width: 400px;
         height: 400px;
         right: -50vw;
@@ -674,8 +706,8 @@ section.hero-section {
     }
     
     #morph-shape-1 {
-        top: 40px;
-        left: 50px;
+        top: 80px;
+        left: 40px;
         width: 50px;
         height: 50px;
     }
@@ -694,7 +726,7 @@ section.hero-section {
     }
     
     .face-wrapper {
-        margin-top: -130vw;
+        margin-top: -550px;
         width: 400px;
         height: 400px;
         right: -50vw;