macos inspired css

app/page.module.css

@@ -1,15 +1,48 @@
-
-
 .main {
+  padding: 2rem;
   display: flex;
   flex-direction: column;
-  height: 100vh;
   justify-content: space-between;
-  padding: 2rem;
-  background-image: url('https://512pixels.net/downloads/macos-wallpapers-thumbs/10-2--thumb.png'); /* URL of the wallpaper */
-  background-size: cover; /* Ensure it covers the entire area */
-  background-position: center; /* Center the image in the element */
-  background-repeat: no-repeat; /* Don't repeat the image */
+  min-height: 100vh; /* Full viewport height */
+  position: relative; /* Needed for absolute positioning of pseudo-elements */
+  overflow: hidden; /* Ensures pseudo-element doesn't overflow */
+}
+
+.background {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-color: #1E90FF; /* Solid color fallback */
+  background-image:
+    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3), transparent 70%),
+    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3), transparent 70%);
+  background-blend-mode: screen;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: -1; /* Place it behind the content */
+}
+
+.background::before {
+  content: '';
+  position: absolute;
+  top: -50%; right: -50%; bottom: -50%; left: -50%;
+  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: rotate(45deg) scale(1.5);
+  backdrop-filter: blur(30px);
+}
+
+.background::after {
+  content: '';
+  position: absolute;
+  top: -50%; right: -50%; bottom: -50%; left: -50%;
+  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: rotate(-45deg) scale(1.5);
+  backdrop-filter: blur(30px);
+  pointer-events: none; /* Allows clicks to pass through to elements below */
 }
 
 .card span {

app/page.tsx

@@ -120,6 +120,7 @@ const Page: React.FC = () => {
 
   return (
     <main className={styles.main}>
+      <div className={styles.background}></div>
       <div className={styles.messages}>
         {messages.length > 0 ? (
           messages.map((message, i) => {