let's try this again

CSS/styles.css

@@ -1,7 +1,5 @@
-
 *, *::after, *::before{
     box-sizing: border-box;
-
 }
 
 body{
@@ -21,6 +19,7 @@ body{
     grid-auto-rows: 4em;
     gap: .25em;
     justify-content: center;
+    margin-top: 2em; /* ADDED: Fixed spacing from grid */
 }
 
 .key{
@@ -73,10 +72,11 @@ body{
     display: grid;
     justify-content: center;
     align-content: center;
+    /* flex: 1; */ /* REMOVED: This was causing the large spacing */
     grid-template-columns: repeat(5, 4em);
     grid-template-rows: repeat(6, 4em);
     gap: .25em;
-    margin-bottom: 1em;
+    margin: 2em auto 1em auto; /* CHANGED: Added top margin and made it centered */
 }
 
 .tile{
@@ -250,7 +250,7 @@ body.dark-theme{
 .setting-page:hover{
   color: rgb(150, 141, 141)
 }
-* Definition Alert Styles */
+/* Definition Alert Styles */
 .definition-alert {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;