All Branding Changes

public/index.html

@@ -22,7 +22,10 @@
     <meta name="description" content="MyFriendBen, a Colorado public benefits and public assistance screening tool." />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@700&display=swap"
+    />
     <title>MyFriendBen</title>
   </head>
 

src/App.css

@@ -3,6 +3,11 @@
   margin: 0%;
 }
 
+#root {
+  overflow-x: hidden;
+  position: relative;
+}
+
 .benefits-form {
   margin: 0 auto 20px auto;
   justify-content: center;
@@ -24,9 +29,22 @@
 .sub-header {
   font-size: 2rem;
   font-weight: 700;
+  line-height: normal;
+  font-family: 'Roboto Slab', serif;
+  color: var(--main-header-color);
+  margin-bottom: 1rem;
+}
+
+.main-paragraph {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-size: 1.1rem;
+}
+
+.sub-header-language-select {
+  font-family: 'Open Sans', sans-serif;
+  color: black;
   margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #505c66;
 }
 
 .bottom-border {
@@ -74,3 +92,23 @@
   max-width: var(--main-max-width);
   margin: auto;
 }
+.secondary-heading {
+  font-family: 'Open Sans', sans-serif;
+  color: black;
+}
+
+/* the following section classes are needed in order to extend the background to the edges of the screen */
+.section-container {
+  position: relative;
+}
+
+.section:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  top: 0;
+  left: -100vw;
+  width: 300vw;
+  background: var(--secondary-background-color);
+  z-index: -1;
+}