typo

src/index.css

@@ -111,3 +111,32 @@ dialog::backdrop {
 .photo img:hover {
   transform: scale(1.05);
 }
+
+.buttons {
+  display: flex;
+  justify-content: center;  /* center buttons horizontally */
+  gap: 16px;                /* space between buttons */
+  margin-top: 16px;         /* optional spacing from other elements */
+}
+
+.buttons button {
+  flex: 0 0 auto;           /* don’t stretch buttons */
+}
+
+button.yes {
+  background-color: #531300;   /* red-ish for yes */
+  color: #fff;
+}
+
+button.yes:hover {
+  background-color: #7a1a00;   /* slightly lighter red on hover */
+}
+
+button.no {
+  background-color: #3d3d3d;   /* dark gray for no */
+  color: #fff;
+}
+
+button.no:hover {
+  background-color: #555555;   /* lighter gray on hover */
+}

src/yes.module.css

@@ -0,0 +1,23 @@
+.container {
+  width: 100%;
+  max-width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+  text-align: center;
+  overflow-x: hidden; /* prevents accidental scroll, but doesn't truncate text */
+}
+
+/* Headings */
+h1, h2, h3 {
+  margin: 0.5rem 0;
+  white-space: normal;        /* allow normal wrapping if needed */
+  word-wrap: break-word;      /* break only at words, not in middle */
+  overflow-wrap: break-word;
+}
+
+/* Mobile tweaks */
+@media (max-width: 480px) {
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.2rem; }
+  h3 { font-size: 1rem; }
+}

src/yes.tsx

@@ -1,10 +1,13 @@
+import styles from './yes.module.css';
+
 export default function YesPage() {
   return (
-    <div className="container">
-      <h1>Congratulations, you're now my valentine!!! 💖🥳</h1>
-      <h2>No takebacks allowed, you're stuck with me 🎉</h2>
-      <h3>Great job using the freewill the website gave you to make the right choice</h3>
-      
+    <div className={styles.container}>
+      <h1>Congratulations!!!</h1>
+      <h2>You're now my valentine 💖🥳</h2>
+      <h3>No takebacks allowed, you're stuck with me 🎉</h3>
+      <p></p>
+      <p>P.S. Great job using the freewill this website gave you to make the right choice</p>
     </div>
   );
 }