centred the hidenseek component

Author: AdityaSingh-7

src/assets/styles/hidenseek.css

@@ -36,20 +36,6 @@
   --hover-transform: scale(1.1);
 }
 
-.hide-and-seek-game {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  min-height: 100vh;
-  /*background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));*/
-  font-family: "Arial", sans-serif;
-  /*padding: 2rem;*/
-  overflow: hidden;
-  border-radius: 10px;
-  margin-top: -80px; /* Moves the container up by 50px */
-}
 
 .letter-grid {
   display: flex;

src/assets/styles/seeknhide.css

@@ -5,8 +5,6 @@
     flex-direction: column;
     min-height: 100vh;
     width: 100%;
-    justify-content: center;
-    align-items: center;
     padding: 20px;
     text-align: center;
 

src/components/HideSeekGame.astro

@@ -11,7 +11,7 @@ const letterRows = [
 ];
 ---
 
-<div class="hide-and-seek-game">
+
   <!-- Help Button -->
   <button id="help-button" class="help-button">?</button>
 
@@ -38,7 +38,7 @@ const letterRows = [
       ))
     }
   </main>
-</div>
+
 
 <script>
   document.addEventListener("DOMContentLoaded", () => {

src/pages/hidenseek.astro

@@ -19,7 +19,7 @@ const meta = {
     />
   </Fragment>
 
-  <div class="container">
+  <div class="box">
     <div id="component-game">
       <SeekAndHide />
     </div>
@@ -30,11 +30,15 @@ const meta = {
 </Layout>
 
 <style>
-  .container {
+  .box {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    /*justify-content: center;*/
+    margin:auto;
+    margin-top:0;
+
+    
   }
   .toggle-button {
     padding: 0.75rem 1.5rem;