import Head from 'next/head'
import Footer from '../components/footer'
import Header from '../components/header'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <div className="bg-primary">
      <Head>
        <title>Nerdbrawl</title>
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' />
        <link rel="icon" href="img/icons/favicon-64.ico" />
        <link rel="preconnect" href="https://fonts.gstatic.com"></link>
        <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap" rel="stylesheet"></link>

        <link rel="manifest" href="/manifest.json" />
        <link href='/logo-72.png' rel='icon' type='image/png' sizes='72x72' />
        <link href='/logo-96.png' rel='icon' type='image/png' sizes='96x96' />
        <link href='/logo-128.png' rel='icon' type='image/png' sizes='128x128' />
        <link href='/logo-144.png' rel='icon' type='image/png' sizes='144x144' />
        <link href='/logo-152.png' rel='icon' type='image/png' sizes='152x152' />
        <link href='/logo-192.png' rel='icon' type='image/png' sizes='192x192' />
        <link href='/logo-384.png' rel='icon' type='image/png' sizes='384x384' />
        <link href='/logo-512.png' rel='icon' type='image/png' sizes='512x512' />

        <meta name="theme-color" content="#ad4932" />
      </Head>

      <main className="h-screen w-screen">
        <Header />
        <Component  {...pageProps} />
      </main>
      <Footer />


    </div>
  )
}

export default MyApp

