1 files changed, 81 insertions, 7 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 576bc83..8340c15 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,11 +17,12 @@
     url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'),
     /* Safari, Android, iOS */
     url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg');
-/* Add a black background color to the top navigation */
+  /* Add a black background color to the top navigation */
 }
 
 body {
-  max-width: 80% !important; /* sorry water.css */
+  max-width: 80% !important;
+  /* sorry water.css */
 }
 
 
@@ -53,8 +54,8 @@ section#intro {
 }
 
 .topnav {
-    background-color: #333;
-    overflow: hidden;
+  background-color: #333;
+  overflow: hidden;
 }
 
 * {
@@ -62,7 +63,8 @@ section#intro {
 }
 
 /* Style the links inside the navigation bar */
-.topnav a, .topnav p {
+.topnav a,
+.topnav p {
   float: left;
   color: #f2f2f2;
   text-align: center;
@@ -102,7 +104,9 @@ div.exp-title-company-top {
   margin-top: 10px;
 }
 
-div.exp-title-company, div.exp-skills-dates, div.exp-detail {
+div.exp-title-company,
+div.exp-skills-dates,
+div.exp-detail {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
@@ -184,7 +188,77 @@ ul.nows {
   padding-left: 0;
 }
 
-summary, details {
+summary,
+details {
   font-size: 14px;
   text-decoration: none;
+}
+
+@media screen and (max-width: 886px) {
+
+  body {
+    max-width: 95% !important;
+  }
+
+  section#intro {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .topnav {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 2px 4px;
+  }
+
+  .topnav-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    width: auto;
+  }
+
+  .topnav a,
+  .topnav p {
+    float: none;
+    display: inline-block;
+    padding: 4px 6px;
+    font-size: 14px;
+    text-align: center;
+    margin: 0;
+  }
+
+  div.exp-title-company,
+  div.exp-detail,
+  div.project-title-stack {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  span.exp-company {
+    text-align: left;
+  }
+
+  .mobile-hide {
+    display: none !important;
+  }
+
+  div.project-desc {
+    font-size: 13px;
+  }
+
+  span.project-stack {
+    font-size: 14px;
+  }
+
+  p.experience-desc {
+    font-size: 12px;
+  }
+
+  h1 {
+    font-size: 1.8em !important;
+  }
 }
\ No newline at end of file