text: import Head from 'next/head'
  
  import Header from './Header'
  
  export default function Layout({ children, pageTitle, description, ...props }) {
    return (
      <>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta charSet="utf-8" />
          <meta name="Description" content={description}></meta>
          <meta name="google-site-verification" content="PutUnVt7kDaXhm8LCreHu3NdqQ8jxToCBbwf28ZuK8Y" />
          <title>{pageTitle}</title>
        </Head>
        <style jsx global>{`
          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800;900&display=swap');
  
          html,
          body {
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
              sans-serif;
            color: #445566;
          }
  
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            font-weight: bold;
          }
  
          a {
            color: #00a395;
          }
  
          .content {
            padding: 2rem 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
  
          footer {
            width: 100%;
            height: 100px;
            border-top: 1px solid #eaeaea;
            display: flex;
            justify-content: center;
            align-items: center;
          }
  
          footer img {
            padding: 0 5px;
            height: 1rem;
          }
        `}</style>
        <section className="layout">
          <Header />
          <div className="content">{children}</div>
        </section>
        <footer>
          Built with <img src="/netliheart.svg" alt="Netlify Heart" /> for you
        </footer>
      </>
    )
  }
  