improve look of header

public/listening-ear.svg

@@ -3,5 +3,5 @@
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
 <svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">
 
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
 

src/components/Header.tsx

@@ -78,11 +78,11 @@ const NavBar = () => {
 const Header: NextPage = () => {
     return <>
         <div id="logo-row" className="flex flex-row p-4 justify-center border-b border-yellow bg-neutral-800 drop-shadow-xl">
-            <div>
+            <div className="shadow-md shadow-yellow-500/50 bg-yellow-100 rounded-xl p-2">
                 <Image alt="Ear listening" src="/listening-ear.svg" width={64} height={64}/>
             </div>
             <div id="header-title" className="w-64 grid place-items-center">
-                <h1 className="text-center text-2xl font-bold text-neutral-300">Center for Auditory Training Resources</h1>
+                <h1 className="text-center text-2xl font-bold text-neutral-200">Center for Auditory Training Resources</h1>
             </div>
         </div>
         <NavBar/>

src/pages/index.tsx

@@ -11,7 +11,8 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <div className="my-6">
+        <div className="p-2">
+          <h1 className="mx-auto text-center font-extrabold text-4xl max-w-lg text-neutral-600">Welcome to the Resource Center for Auditory Training!</h1>
         </div>
       </main>
     </>