Background Image Added

src/app/(app)/info/page.tsx

@@ -3,10 +3,10 @@
 export default function InfoPage() {
 	return (
 		<div className="px-6 py-10 max-w-full lg:max-w-1/2 mx-auto font-sans text-neutral-100">
-			<h1 className="text-3xl font-bold mb-4 text-[color:var(--color-warning-600)] dark:text-3xl font-bold mb-4 text-[color:var(--color-warning-300)]">
+			<h1 className="text-3xl dark:text-3xl font-bold mb-4">
 				Beverage Consumption Info!
 			</h1>
-			<p className="text-neutral-500 dark: mb-6 text-neutral-300">
+			<p className="mb-6 ">
 				Learn what's best for your body and how to earn points and win! Making
 				informed drink choices supports hydration, energy regulation, and
 				overall health. Below are basic guidelines based on established public

src/app/(app)/layout.tsx

@@ -13,9 +13,9 @@ export default function RootLayout({
 }>) {
 	const { isMobile, isSafari } = useDevice();
 	return (
-		<main suppressHydrationWarning={true}>
+		<main className="max-h-screen max-w-screen bg-img overflow-hidden" suppressHydrationWarning={true}>
 			{!isMobile && !isSafari ? <NavBar /> : null}
-			<section className="min-h-screen max-w-screen space-x-2 gap-4 flex flex-col">
+			<section className="space-x-2 gap-4 flex flex-col overflow-y-auto h-screen p-4 lg:p-6 lg:rounded-xl lg:shadow-sm">
 				<img src="/drinkhappylogo.png" alt="Drink Happy Logo Image" className="h-auto mx-auto w-3/4 lg:w-1/4" />
 				{children}
 			</section>

src/lib/css/globals.css

@@ -19,3 +19,13 @@
 body {
 	font-family: Arial, Helvetica, sans-serif;
 }
+
+.bg-img {
+	/* Repeat Background Image on the y axis */
+	background-repeat: repeat-y;
+
+	background-size: cover;
+	background-position: center;
+	height: 100vh;
+	@apply dark:bg-[url('/darkmodebackground.png')] bg-[url('/lightmodebackground.png')];
+}