Lots of media query tweaks to make it look nice

root/styles/home.css

@@ -1,21 +1,18 @@
 @import url(./main.css);
 
+html, body {
+    height: 100%;
+}
+
+body {
+    /* Flex box: center everything vertically */
+    align-items: center;
+}
+
 .wrapper {
-    width: 100%;
-    margin: 20px 8px 20px 8px;
-    padding: 10px 0 2px 0;
     text-align: center;
 }
 
-header {
-    margin-bottom: 20px;
-}
-
-footer {
-    margin: 0;
-    padding: 0;
-}
-
 .nav {
     text-align: center;
 }
@@ -32,25 +29,9 @@ footer {
     color: #3486ff;
 }
 
-/* Desktops */
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 760px) {
     .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

@@ -3,7 +3,8 @@
 html,
 body,
 div,
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6,
+header, footer {
     margin: 0;
     padding: 0;
 }
@@ -14,6 +15,9 @@ body, h1, h2, h3, h4, h5, h6 {
 }
 
 body {
+    /* Flex box: center everything horizontally */
+    display: flex;
+    justify-content: center;
     font-size: 10pt;
 }
 
@@ -52,20 +56,38 @@ a {
     transition: color 100ms;
 }
 
-/* Tablets */
-@media only screen and (min-width: 600px) {
+@media only screen and (max-width: 500px) {
+    header {
+        margin-bottom: 20px;
+    }
+
+    .wrapper {
+        width: 100%;
+        padding: 0 8px;
+    }
 }
 
-/* Desktops */
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 500px) {
+    header {
+        margin-bottom: 60px;
+    }
+
+    .wrapper {
+        width: 480px;
+        padding: 60px 0 8px 0;
+    }
+}
+
+@media only screen and (min-width: 760px) {
     body {
-        /* Flex box: center everything horizontally */
-        display: flex;
-        justify-content: center;
-        font-size: 10pt;
+        font-size: 13pt;
     }
 
     h1 {
         font-size: 4em;
     }
+
+    .wrapper {
+        width: 640px;
+    }
 }

root/styles/resume.css

@@ -1,11 +1,6 @@
 @import url(./main.css);
 
 .wrapper {
-    margin-top: 28px;
-}
-
-#resume {
-    width: 100%;
     margin: 8px;
 }
 
@@ -94,10 +89,26 @@ dd {
     margin-left: 1em;
 }
 
-/* Desktops */
-@media only screen and (min-width: 768px) {
-    #resume {
-        width: 640px;
-        margin: 0;
+@media only screen and (max-width: 500px) {
+    .wrapper {
+        margin-top: 8px;
+    }
+}
+
+@media only screen and (min-width: 500px) {
+    header {
+        margin-bottom: 0;
+    }
+
+    .wrapper {
+        padding-top: 0;
+    }
+}
+
+@media only screen and (min-width: 760px) {
+    .wrapper {
+        width: 640px;
+        margin: 0;
+        padding: 60px 0;
     }
 }