Chenge Css to Scss

app/globals.scss

@@ -1,31 +1,23 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-background: rgb(253, 247, 228);
+  --color-layout: rgb(222, 208, 182);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
+  margin: 0;
+  font-family: -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  background: var(--color-background);
+  // Avoid fixed footer obscuring content
+  padding-bottom: 50px;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+main {
+  padding: 1rem;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+a {
+  color: black;
 }
 
 nav {
@@ -47,13 +39,22 @@ nav {
   }
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+button {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  padding: 0.5rem;
+  cursor: pointer;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+label {
+  display: flex;
+  flex-direction: column;
+}
+
+input {
+  font-size: 1rem;
+  border-radius: 5px;
+  border: 1px solid;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
 }

app/page.module.scss

@@ -0,0 +1,4 @@
+.homePage {
+  width: 100%;
+  min-height: 100vh;
+}

app/page.tsx

@@ -1,12 +1,14 @@
-import styles from './page.module.css';
+import styles from './page.module.scss';
 
 export default function Home() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <div>home page coming soon</div>
+    <div className={styles.homePage}>
+      <main>
+        <hgroup>
+          <h1>Welcome to the Event Network Project!</h1>
+          <p>A place to find what might be happening around the city!</p>
+        </hgroup>
       </main>
-      <footer className={styles.footer}>maybe some footer stuff</footer>
     </div>
   );
 }