diff --git a/CSS/styles.css b/CSS/styles.css
index 55ba088..f29679a 100644
--- a/CSS/styles.css
+++ b/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;
diff --git a/CSS/styles.css.bak b/CSS/styles.css.bak
new file mode 100644
index 0000000..55ba088
--- /dev/null
+++ b/CSS/styles.css.bak
@@ -0,0 +1,314 @@
+
+*, *::after, *::before{
+    box-sizing: border-box;
+
+}
+
+body{
+    background-color: hsl(0, 67%, 96%);
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    padding: 1em;
+    font-size: clamp(.5rem, 2.5vmin, 1.5rem);
+}
+
+.keyboard {
+    display: grid;
+    grid-template-columns: repeat(20, minmax(auto, 1.50em));
+    grid-auto-rows: 4em;
+    gap: .25em;
+    justify-content: center;
+}
+
+.key{
+    font-size: inherit;
+    grid-column: span 2;
+    border: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: hsl(
+    var(--hue, 200),
+    var(--saturation, 1%),
+    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))
+  );
+    color: rgb(255, 255, 255);
+    fill: white;
+    text-transform: uppercase;
+    border-radius: .25em;
+    cursor: pointer;
+    user-select: none;
+}
+.key.large{
+    grid-column: span 3;
+}
+.key > svg {
+    width: 1.70em;
+    height: 1.70em;
+}
+.key:hover, .key:focus{
+    --lightness-offset: 10%;
+}
+
+.key.wrong {
+    --lightness: 23%;
+}
+.key.wrong-position{
+    --hue: 49;
+    --saturation: 51%;
+    --lightness: 47%;
+}
+
+.key.correct{
+    --hue: 115;
+    --saturation: 29%;
+    --lightness: 43%;
+}
+
+.guess-grid{
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    grid-template-columns: repeat(5, 4em);
+    grid-template-rows: repeat(6, 4em);
+    gap: .25em;
+    margin-bottom: 1em;
+}
+
+.tile{
+    font-size: 2em;
+    color: rgb(158, 155, 155);
+    border: .05em solid hsl(240, 3%, 14%);
+    text-transform: uppercase;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    transition: transform 250ms linear;
+    transition: transform 250ms linear;
+}
+
+.tile[data-state="active"] {
+  border-color: hsl(240, 1%, 18%);
+
+}
+
+.tile[data-state="wrong"] {
+  border: none;
+  background-color: hsl(240, 12%, 24%);
+  color: white;
+}
+
+.tile[data-state="wrong-position"] {
+  border: none;
+  background-color: hsl(49, 51%, 47%);
+  color: white;
+}
+
+.tile[data-state="correct"] {
+  border: none;
+  background-color: hsl(115, 31%, 48%);
+  color: white;
+}
+.tile.shake{
+    animation:shake 250ms ease-in-out;
+}
+
+.tile.dance {
+  animation: dance 500ms ease-in-out;
+}
+
+.tile.flip {
+    transform: rotateX(90deg);
+}
+
+@keyframes shake {
+    10% {
+        transform: translateX(-5%);
+    }
+    30% {
+        transform: translateX(5%);
+    }
+    50% {
+        transform: translateX(-7.5%);
+    }
+    70% {
+        transform: translateX(7.5%);
+    }
+    90% {
+        transform: translateX(-5%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+@keyframes dance {
+  20% {
+    transform: translateY(-50%);
+  }
+  40% {
+    transform: translateY(5%);
+  }
+  60% {
+    transform: translateY(-25%);
+  }
+  80% {
+    transform: translateY(2.5%);
+  }
+  90% {
+    transform: translateY(-5%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.alert-container{
+    position: fixed;
+    top: 17vh;
+    left: 50vw;
+    transform: translateX(-50%);
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.alert{
+    pointer-events: none;
+    background-color: hsl(204, 7%, 85%);
+    padding: .55em;
+    border-radius: .25em;
+    opacity: 1;
+    transition: opacity 500ms ease-in-out;
+    margin-bottom: .5em;
+}
+
+.alert:last-child{
+    margin-bottom: 0;
+}
+.alert.hide{
+    opacity: 0;
+}
+
+.img-banner{
+  width: auto ;
+  max-width: 50% ;
+  height: auto ;
+}
+
+
+.theme-change{
+  position: absolute;
+  top: 2.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.theme-change:hover{
+  color: rgb(150, 141, 141)
+}
+
+body.dark-theme{
+  background-color: hsl(0, 0%, 8%);
+  font:white;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
+  padding: 1em;
+  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
+}
+
+.share-stats{
+  position: absolute;
+  top: 4.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.share-stats:hover{
+  color: rgb(150, 141, 141)
+}
+.setting-page{
+  position: absolute;
+  top: 6.5rem;
+  display: flex;
+  color: rgb(202, 181, 181);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.setting-page:hover{
+  color: rgb(150, 141, 141)
+}
+* Definition Alert Styles */
+.definition-alert {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 12px;
+  max-width: 400px;
+  margin: 0 auto 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.definition-alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.win-definition {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  border-color: rgba(79, 172, 254, 0.5);
+}
+
+.lose-definition {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  border-color: rgba(250, 112, 154, 0.5);
+}
+
+.definition-alert strong {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.definition-alert::before {
+  content: "💡 Click to dismiss";
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Dark theme adjustments */
+.dark-theme .definition-alert {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 380px) {
+  .definition-alert {
+    max-width: 90%;
+    font-size: 13px;
+    padding: 15px;
+  }
+}
\ No newline at end of file