better mobile sizing

src/App.vue

@@ -99,7 +99,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   width: 100%;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 750px) {
     font-size: 1.6rem;
   }
 }
@@ -112,7 +112,7 @@ h1{
   text-align: left;
   //text-shadow: 2px 2px 2px rgba(0,0,0,.1);
   color: $textcolor;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 750px) {
     font-size: 4.75rem;
   }
 }
@@ -124,7 +124,7 @@ h2{
   margin-top: 5px;
   line-height: 1.2;
   color: $textcolor;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 750px) {
     font-size: 4rem;
     line-height: 1.1;
   }
@@ -136,7 +136,7 @@ h3{
   font-family: $Dosis;
   font-weight: 400;
   color: $textcolor;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 750px) {
       font-size: 2.5rem;
   }  
 }
@@ -147,7 +147,7 @@ h4{
   font-family: $SourceSans;
   font-weight: 600;
   color: $textcolor;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 750px) {
     font-size: 1.8rem;
   }  
 }