Fixed spacing issue on home page

Author: foleyash

src/app/globals.css

@@ -24,8 +24,6 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
-    background-attachment: fixed;
-    height: 200vh;
 }
 
 @layer utilities {
@@ -79,6 +77,12 @@ input[type=button]{
     height: 100%;
 }
 
+.session-background {
+    background: radial-gradient(#315b25, #0a2602, #000000);
+    background-attachment: fixed;
+    height: 200vh;
+}
+
 
 .heading{
   line-height: 200px;

src/app/session/[id]/page.tsx

@@ -99,7 +99,7 @@ export default function SessionPage({ params } : { params: { id: string} }) {
       }, [isHostNameSet]); //if it mounts on start, this useEffect runs before the username + hostID is set in the database
 
     return (
-        <main id="session-main" className="background flex min-h-screen flex-col items-center justify-between p-24">
+        <main id="session-main" className="session-background flex min-h-screen flex-col items-center justify-between p-24">
             <Session
                 isHost={(sessionStorage.getItem('isHost') === "true") ? true : false}
                 sid={sid}