Add some media queries for small devices

root/styles/home.css

@@ -1,24 +1,14 @@
 @import url(./main.css);
 
-body {
-    /* Flex box: center everything vertically */
-    align-items: center;
-}
-
 .wrapper {
-    margin-top: 120px;
-    padding: 60px 0 8px 0;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-}
-
-.wrapper {
-    width: 640px;
+    width: 100%;
+    margin: 20px 8px 20px 8px;
+    padding: 10px 0 2px 0;
     text-align: center;
 }
 
 header {
-    margin-bottom: 60px;
+    margin-bottom: 20px;
 }
 
 footer {
@@ -41,3 +31,26 @@ footer {
 .nav a:hover {
     color: #3486ff;
 }
+
+/* Desktops */
+@media only screen and (min-width: 768px) {
+    .wrapper {
+        margin-top: 120px;
+        padding: 60px 0 8px 0;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .wrapper {
+        width: 640px;
+    }
+
+    body {
+        /* Flex box: center everything vertically */
+        align-items: center;
+    }
+
+    header {
+        margin-bottom: 60px;
+    }
+}

root/styles/main.css

@@ -14,15 +14,12 @@ body, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
-    /* Flex box: center everything horizontally */
-    display: flex;
-    justify-content: center;
-    font-size: 12pt;
+    font-size: 10pt;
 }
 
 h1 {
     font-family: "Love Ya Like A Sister", Georgia, serif;
-    font-size: 4.5em;
+    font-size: 4em;
     margin-bottom: 0.25em;
 }
 
@@ -54,3 +51,21 @@ a {
     -webkit-transition: color 100ms;
     transition: color 100ms;
 }
+
+/* Tablets */
+@media only screen and (min-width: 600px) {
+}
+
+/* Desktops */
+@media only screen and (min-width: 768px) {
+    body {
+        /* Flex box: center everything horizontally */
+        display: flex;
+        justify-content: center;
+        font-size: 10pt;
+    }
+
+    h1 {
+        font-size: 4em;
+    }
+}

root/styles/resume.css

@@ -5,7 +5,8 @@
 }
 
 #resume {
-    width: 640px;
+    width: 100%;
+    margin: 8px;
 }
 
 #resume h1 a {
@@ -92,3 +93,11 @@ dd {
     margin: 0;
     margin-left: 1em;
 }
+
+/* Desktops */
+@media only screen and (min-width: 768px) {
+    #resume {
+        width: 640px;
+        margin: 0;
+    }
+}