Made the webapp also support mobile view by resizing the canvas to fit the...

Made the webapp also support mobile view by resizing the canvas to fit the screen and changing font size.
#12

src/App.css

@@ -19,7 +19,7 @@ body {
   padding: 0.5%;
   height: 100%;
   line-height: 2;
-  font-size: 1rem;
+  font-size: 1.1rem;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -90,12 +90,12 @@ button:hover {
   justify-content: space-evenly;
 }
 
-p{
+p {
   font-family: Esteban;
   font-weight: 350;
 }
 
-#lines{
+#lines {
   width: 50%;
 }
 
@@ -162,7 +162,6 @@ canvas {
     margin: 0;
   }
   body {
-    background-color: red;
     margin: 0%;
     padding: 0%;
     width: 100vw;
@@ -187,6 +186,23 @@ canvas {
     background-color: #602080;
     color: #e5e5e5;
   }
+  header > h1 {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 4rem;
+  }
+
+  h2 {
+    line-height: 1.2;
+    font-weight: 400;
+    font-size: 2.6rem;
+    text-decoration: underline;
+  }
+
+  h3 {
+    line-height: 1.2;
+    font-size: 2rem;
+  }
 
   #canvasAndLines {
     display: flex;
@@ -207,7 +223,6 @@ canvas {
     margin: 0;
   }
   body {
-    background-color: green;
     margin: 0%;
     padding: 0%;
     width: 100vw;
@@ -243,4 +258,27 @@ canvas {
   #lines {
     margin-top: 5%;
   }
+
+  canvas {
+    width: 100%;
+    height: auto;
+  }
+
+  header > h1 {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 3rem;
+  }
+
+  h2 {
+    line-height: 1.2;
+    font-weight: 400;
+    font-size: 2.0rem;
+    text-decoration: underline;
+  }
+
+  h3 {
+    line-height: 1.2;
+    font-size: 1.3rem;
+  }
 }