oval bg voter info done

client/src/app/globals.css

@@ -30,4 +30,26 @@ body {
     .mt-4 {
         margin-top: 1rem; /* Adjust as needed */
     }
-}
+}
+
+.bg-oval-wrapper {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  padding: 0px ;
+}
+
+.bg-oval-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  transform: translate(-40%, -60%) rotate(70deg);
+  width: 800%;
+  max-width: 1000px;
+  height: 152%;
+  background: white;
+  border-radius: 60%;
+  z-index: -1;
+}
+

client/src/pages/_app.tsx

@@ -24,7 +24,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
     return (
         <ActivePageProvider >
-            <div className='mx-4 '>
+            <div className=' '>
                 <Component {...pageProps} />
             </div>
         </ActivePageProvider>

client/src/pages/voterInfo/index.tsx

@@ -15,6 +15,7 @@ export default function VoterInfo() {
             <NavBar />
 
             {/* Header */}
+            <div className="bg-oval-wrapper flex flex-col justify-center items-center text-center">
             <div className='flex flex-col justify-center items-center p-4 text-center my-4'>
                 <h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Your Voter Info</h1>
                 <h1 className='font-semibold text-2xl p-5 mt-2' >Here is everything you need to know about your <br />voter status and personal voting logistics!</h1>
@@ -24,12 +25,7 @@ export default function VoterInfo() {
 
 
             {/* County (fixed for all Boston voters) */}
-            <div className='flex flex-col justify-center items-center p-4 my-6' style={{ 
-         backgroundImage: 'url(/Star1.png)', 
-         backgroundPosition: 'right center', 
-         backgroundSize: 'contain', 
-         backgroundRepeat: 'no-repeat',
-     }}>
+            <div className='flex flex-col justify-center items-center p-4 my-6'>
                 <h1 className='font-semibold text-center my-4 text-2xl'>Basic Voter Info</h1>
             <div className='grid grid-cols-4 mt-1'>
                 <div className='md:col-span-1 hidden md:block'>
@@ -60,6 +56,7 @@ export default function VoterInfo() {
                 <h1 className='font-semibold text-xl md:w-1/2 lg:w-1/2'>Now that you know where you can vote, let&#39;s explore exactly who and what you are voting for.</h1>
                 <ButtonFill name='Ballot Info' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
             </div>
+            </div>
         </div>
     )
 }