From 1c018ee6519f84827e73837f2630977ca14224ea Mon Sep 17 00:00:00 2001
From: Ashwini Gurbaxani <98401812+gurbaxani@users.noreply.github.com>
Date: Sun, 22 Sep 2024 12:54:19 +0530
Subject: [PATCH] Fix info button

---
 index.html | 19 ++++++++++++++-----
 styles.css |  5 ++++-
 2 files changed, 18 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 1473314..b335f1f 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <!-- HTML is hidden until CSS loads to hide the Flash of Unstyled Content -->
-    <style>html{visibility: hidden;opacity:0;}</style>
+    <style>
+        html {
+            visibility: hidden;
+            opacity: 0;
+        }
+    </style>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Improv Practice Tools</title>
     <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
     <div id="main-screen" class="screen">
-        <p class="help-link"><a href="/about" >⚙️</a></p>
-        <p>Get a random...</p>
+
+        <p>Get a random...<span class="help-link"><a href="/about">ℹ️</a></span></p>
+
         <div class="grid-container">
             <button id="object-btn" class="nav-button">📦 Object</button>
             <button id="relationship-btn" class="nav-button">💞 Relationship</button>
@@ -28,7 +36,7 @@
             <button id="superpower-btn" class="nav-button">🦸 Superpower</button>
             <button id="random-btn" class="nav-button">🎲</button>
         </div>
-        <div id="result" class="display-result notice">Click a button to get a suggestion</div>    
+        <div id="result" class="display-result notice">Click a button to get a suggestion</div>
         <div class="timer-container">
             <button id="start-timer" class="nav-button">🚀 Start</button>
             <div id="timer-display" class="timer-display">00:00</div>
@@ -37,4 +45,5 @@
     </div>
     <script src="script.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e3d11a7..4524c6c 100644
--- a/styles.css
+++ b/styles.css
@@ -41,6 +41,9 @@
 }
 
 .help-link {
+  position: fixed;
+  right: 20px;
+  top: 20px;
   text-align: end;
   text-decoration: none;
 }
@@ -49,4 +52,4 @@
 html {
   visibility: visible;
   opacity: 1;
-}
+}
\ No newline at end of file
