holiday mode

app/page.module.css

@@ -264,7 +264,7 @@
   font-size: 1rem; /* Font size */
   font-weight: bold; /* Make the text a bit bolder */
   color: white; /* Text color */
-  background-image: linear-gradient(to right, #6ee7b7, #3b82f6); /* Gradient background */
+  background-image: linear-gradient(to right, #000, #3b82f6); /* Gradient background */
   cursor: pointer; /* Change cursor to indicate it's clickable */
   transition: transform 0.2s, background-color 0.3s; /* Smooth transitions for interactions */
   text-transform: uppercase; /* Optional: uppercase text */
@@ -272,10 +272,9 @@
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
 }
 
-.button:hover, .button:focus {
-  background-image: linear-gradient(to left, #6ee7b7, #3b82f6); /* Change the direction of gradient on hover/focus */
-  transform: translateY(-2px); /* Slightly raise the button */
-  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); /* Increase shadow size */
+.icon {
+  height: 75px;
+  width: 75px;
 }
 
 .button:active {
@@ -304,14 +303,13 @@
 
 .messages {
   flex: 1;
-  overflow-y: auto;
-  border-style: solid;
-  border-width: 4px;
-  border-image: linear-gradient(#6ee7b7, #3b82f6) 30;
+  border: 8px solid transparent;
+  border-radius: 10px;
   padding: 25px;
-  border-radius: 5px;
+  border-image: url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nODAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCA4MCAyMCc+CiAgPHBhdGggZD0nTSA1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J3JlZCcgLz4KICA8cGF0aCBkPSdNIDI1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J2dyZWVuJyAvPgogIDxwYXRoIGQ9J00gNDUsMTAgYTUsMTAgMCAxLDAgMTAsMCBhNSwxMCAwIDEsMCAtMTAsMCcgZmlsbD0nYmx1ZScgLz4KICA8cGF0aCBkPSdNIDY1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J3llbGxvdycgLz4KPC9zdmc+Cg==') 5 repeat;
 }
 
+
 .message {
   background-color: #f9f9f9;
   border-radius: 15px;
@@ -349,6 +347,7 @@
   box-sizing: border-box;
   border: 1px solid #ddd;
   border-radius: 4px;
+  background-color: transparent;
 }
 
 /* Button styles */
@@ -394,65 +393,4 @@
 /* In your CSS file */
 .avatar-user {
   width: 20px; /* Based on Tailwind's width setting */
-}
-
-.bg-white {
-  background-color: white;
-}
-
-.bg-black {
-  background-color: black;
-}
-
-.bg-gray-100 {
-  background-color: #f7fafc; /* Approximation of Tailwind's gray-100 */
-}
-
-.bg-green-500 {
-  background-color: #48bb78; /* Approximation of Tailwind's green-500 */
-}
-
-.bg-gray-200 {
-  background-color: #edf2f7; /* Approximation of Tailwind's gray-200 */
-}
-
-.bg-blue-500 {
-  background-color: #4299e1; /* Approximation of Tailwind's blue-500 */
-}
-
-.border-gradient {
-  /* Size of your element */
-  width: 200px;
-  height: 200px;
-
-  /* Setting up the gradient as a background image */
-  background-image: linear-gradient(90deg, #6ee7b7, #3b82f6);
-
-  /* Positioning and sizing the pseudo-element to match the parent */
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  /* Adding the border */
-  padding: 10px;
-}
-
-.border-gradient::after {
-  /* Creating the pseudo-element */
-  content: "";
-  position: absolute;
-  top: -10px;
-  left: -10px;
-  bottom: -10px;
-  right: -10px;
-
-  /* Applying the gradient to the border */
-  background-image: inherit;
-  background-clip: padding-box, border-box;
-  background-origin: padding-box, border-box;
-  box-decoration-break: clone;
-
-  /* Adding a transparent border */
-  border: solid 10px transparent;
 }

app/page.tsx

@@ -128,7 +128,6 @@ const Page: React.FC = () => {
 
   return (
     <main className={styles.main}>
-      <h2 className={styles.title}>🔗🏄‍♂️</h2>
       <div className={styles.messages}>
         {messages.length > 0 ? (
           messages.map((message, i) => {