Fix homepage on mobile

layouts/index.html

@@ -8,7 +8,7 @@
             <h3>{{ .Site.Title }}</h3>
         </header>
         <main aria-label="Content">
-            <div style="display: flex; justify-content: center; background: black; margin-left: -5vw; margin-right: -5vw; height: 100%;">
+            <div style="display: flex; justify-content: center; background: black; margin-left: -5vw; margin-right: -5vw; height: 100%;" id="homepage-container">
                 <div class="bigimage"><img class="background" src="img/christian-wiediger-WkfDrhxDMC8-unsplash.jpg"><a class="button" href="development"><span class="fas fa-file-code"></span> Development</a></div>
                 <div class="bigimage"><img class="background" src="img/1*0V2rDSk8SOr6mpfFf28EJA.jpeg"><a class="button" href="writing"><span class="fas fa-pen-fancy"></span> Writing</a></div>
                 <div class="bigimage"><img class="background" src="img/diwaliball.jpg"><a class="button" href="technical"><span class="fas fa-lightbulb"></span> Technical</a></div>

static/css/screen.css

@@ -206,4 +206,14 @@ nav a:hover {
         padding-left: 2em;
         border-left: 2px solid black;
     }
+    #homepage-container {
+        flex-wrap: wrap;
+    }
+    .bigimage {
+        max-height: 20vh;
+        transform: skew(0deg);
+    }
+    a.button {
+        transform: skew(0deg);
+    }
 }