From 8c18cce9e06fb3754a8838f776e3f60b5f51df78 Mon Sep 17 00:00:00 2001
From: Sriram Thiagarajan <sri.sjc@gmail.com>
Date: Fri, 27 Oct 2023 21:17:25 +0530
Subject: [PATCH] add a little description about the game

it is ugly, but helps. I guess.
---
 src/routes/+page.svelte | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4843eef..d71a398 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,22 +9,31 @@
 
 <DocumentTitle title="Home" />
 <div>
-  <p class="help-text">
-    <a
-      href="https://en.wikipedia.org/wiki/Connect_Four"
-      rel="noopener"
-      target="_blank"
-      aria-label="Link to Wikipedia page on Connect 4 game">What's Connect 4?</a
-    >
-  </p>
   <GameForm type={GameFormType.START} storedUserName={data.username} />
+  <div class="help-text">
+    <h5>What's Connect 4?</h5>
+    <p>
+      <span>
+        Connect 4 is a game in which the players choose a color and then take turns dropping colored
+        coins into a six-row, seven-column grid. The pieces fall straight down, occupying the lowest
+        available space within the column. The objective of the game is to be the first to form a
+        horizontal, vertical, or diagonal line of four of one's own coins.
+      </span>
+      <a
+        href="https://en.wikipedia.org/wiki/Connect_Four"
+        rel="noopener"
+        target="_blank"
+        aria-label="Link to Wikipedia page on Connect 4 game">Read more on Wikipedia</a
+      >
+    </p>
+  </div>
 </div>
 
 <style>
   .help-text {
-    font-size: 90%;
-    text-align: center;
-    margin-bottom: 6rem;
+    line-height: 1.5;
+    text-align: justify;
+    margin-top: 6rem;
   }
 
   .help-text a {