chore: switch the 404 page over to emotion

src/pages/404.js

@@ -1,21 +1,48 @@
 import React from 'react';
+import { css } from '@emotion/core';
 import { Link } from 'gatsby';
 import SEO from '../components/Seo';
 import SkewedContainer from '../components/SkewedContainer';
 import { GlobalHeader, GlobalFooter } from '@newrelic/gatsby-theme-newrelic';
 import { PageContext } from '../components/PageContext';
 import { pageContext } from '../types';
-import styles from './404.module.scss';
 
 const NotFoundPage = ({ pageContext }) => {
   return (
     <PageContext.Provider value={pageContext}>
       <SEO title="404: Not found" />
-      <div className={styles.layout}>
+      <div
+        css={css`
+          display: grid;
+          grid-template-rows: auto 1fr auto;
+          min-height: 100vh;
+        `}
+      >
         <GlobalHeader />
-        <div className={styles.contentContainer}>
-          <SkewedContainer className={styles.content}>
-            <h1 className={styles.header}>404</h1>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            text-align: center;
+          `}
+        >
+          <SkewedContainer
+            css={css`
+              font-size: 1.125rem;
+              padding: 8rem 0;
+            `}
+          >
+            <h1
+              css={css`
+                font-family: var(--secondary-font-family);
+                font-size: 9rem;
+                font-weight: normal;
+                line-height: 1;
+              `}
+            >
+              404
+            </h1>
             <p>
               The URL you entered may be broken, or the page has been removed.{' '}
               <Link to="/">Go back to the home page</Link>.