From 8209e026e28fdcd24369b7a9e3d4c4f7c0a4512f Mon Sep 17 00:00:00 2001
From: Gabriela <118011195+PaulaR-05@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:29:59 -0300
Subject: [PATCH] update css

---
 game_page.html          |   4 +-
 index.html              |   8 +-
 meet_team.html          |   2 +-
 src/css/landingpage.css | 370 ++++++++--------------------------------
 src/css/meetpage.css    | 230 ++++---------------------
 src/css/style.css       | 260 +++++++++++++++++++++-------
 src/js/app.js           |  15 --
 7 files changed, 307 insertions(+), 582 deletions(-)
diff --git a/game_page.html b/game_page.html
index 1005037..7b0c233 100644
--- a/game_page.html
+++ b/game_page.html
@@ -38,8 +38,6 @@
     <title>Array Game</title>
   </head>
   <body>
-    <!-- cursor -->
-    <div class="cursor"></div>
     <header>
       <h1>The Array Game</h1>
       <!-- toggle Dark/Light modes-->
@@ -209,7 +207,7 @@ <h1>The Array Game</h1>
           <button id="newGame-btn">New Game</button>
           <!-- open Options menu -->
           <button id="option-btn">Options</button>
-          <button id="dark-light-btn">Dark/Light Mode</button>
+          <button id="dark-light-btn">Dark/Light</button>
         </div>
       </div>
     </main>
diff --git a/index.html b/index.html
index b9bfafb..f318650 100644
--- a/index.html
+++ b/index.html
@@ -32,17 +32,15 @@
     <title>Array Game</title>
   </head>
   <body>
-    <header>
-      <h1>The Array Game</h1>
-    </header>
+    <h1>The Array Game</h1>
     <main>
       <div>
         <img class="notebook" src="docs/images/Notebook_cover.png" />
+
         <a href="./game_page.html"
           ><img class="goSticker" src="docs/images/takeoff.png"
         /></a>
       </div>
-      <img class="pencil" src="docs/images/pencil.png" />
     </main>
     <footer>
       <span> &lt;/&gt; with </span>❤️<span> by </span>
@@ -70,7 +68,7 @@ <h1>The Array Game</h1>
         >
       </span>
       |
-      <a href="#" id="developersPage">Meet Team 05</a>
+      <a href="meet_team.html" id="developersPage">Meet Team 05</a>
     </footer>
     <script src="src/js/app.js"></script>
   </body>
diff --git a/meet_team.html b/meet_team.html
index bb5a7b9..51e5125 100644
--- a/meet_team.html
+++ b/meet_team.html
@@ -48,8 +48,8 @@ <h1>Acknowledgements</h1>
           <li>Chingu Voyages & Jim Medlock</li>
           <li>Angela L, Team Mentor</li>
         </ul>
+        <a href="game_page.html" class="back_link">Back</a>
       </div>
-      <a href="game_page.html" class="back_link">Back</a>
     </main>
     <footer>
       <span> &lt;/&gt; with </span>❤️<span> by </span>
diff --git a/src/css/landingpage.css b/src/css/landingpage.css
index 28aa426..5f6de09 100644
--- a/src/css/landingpage.css
+++ b/src/css/landingpage.css
@@ -1,331 +1,111 @@
-/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
-
-/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
 /*
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
-html {
-  color: #222;
-  font-size: 1em;
-  line-height: 1.4;
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
-
 /*
-   * Remove text-shadow in selection highlight:
-   * https://twitter.com/miketaylr/status/12228805301
-   *
-   * Vendor-prefixed and regular ::selection selectors cannot be combined:
-   * https://stackoverflow.com/a/16982510/7133471
-   *
-   * Customize the background color to match your design.
-   */
-
-::-moz-selection {
-  background: #b3d4fc;
-  text-shadow: none;
+  2. Remove default margin
+*/
+* {
+  margin: 0;
 }
-
-::selection {
-  background: #b3d4fc;
-  text-shadow: none;
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100vh;
+  font-family: "Dokdo", cursive;
 }
-
 /*
-   * A better looking default horizontal rule
-   */
-
-hr {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #ccc;
-  margin: 1em 0;
-  padding: 0;
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
 }
-
 /*
-   * Remove the gap between audio, canvas, iframes,
-   * images, videos and the bottom of their containers:
-   * https://github.com/h5bp/html5-boilerplate/issues/440
-   */
-
-audio,
-canvas,
-iframe,
+  6. Improve media defaults
+*/
 img,
+picture,
+video,
+canvas,
 svg,
-video {
-  vertical-align: middle;
+hr {
+  display: block;
+  max-width: 100%;
 }
-
 /*
-   * Remove default fieldset styles.
-   */
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+  font: inherit;
 }
-
 /*
-   * Allow only vertical resizing of textareas.
-   */
-
-textarea {
-  resize: vertical;
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
 }
 
-/* ==========================================================================
-     Author's custom styles"
-     ========================================================================== */
 body {
-  display: flex;
-  background-image: url("docs/images/wood-grain-texture.jpg");
+  box-sizing: border-box;
+  background-image: url("/docs/images/wood-grain-texture.jpg");
   background-size: cover;
-  min-height: calc(100vh - 200px);
-  min-width: calc(100vh - 1100px);
-}
-
-header {
-  display: flex;
-  justify-content: center;
-  width: 100vh;
+  background-position: right;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
 }
 
 h1 {
-  width: 100%;
-  margin: 50px 50px 30px 50px;
-  font-size: 60px;
-  font-family: "Dokdo";
   color: white;
-}
-
-div {
-  position: relative;
-  margin: 35px;
+  font-size: 60px;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 1), 0px 4px 4px rgba(0, 0, 0, 1),
+    0px 4px 4px rgba(0, 0, 0, 1);
 }
 
 .notebook {
-  justify-content: flex start;
-  position: relative;
-  margin: 70px 20px 0 -15px;
-  width: 150%;
-  height: 155%;
-  transform: rotate(-9deg);
-  box-shadow: -12px 12px 10px rgba(0, 0, 0, 0.5);
+  width: 20em;
+  transform: rotate(-10deg);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 1), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 1);
 }
 
 .goSticker {
-  position: absolute;
-  margin: -340px 0px 20px 175px;
-  transform: rotate(-9deg);
-  border-radius: 19px;
-  width: 105px;
-  height: 104px;
-}
-
-.pencil {
+  width: 5em;
+  border-radius: 2em;
+  transform: rotate(-10deg);
   position: relative;
-  margin: -950px 0px 50px 280px;
-  transform: rotate(-45deg) scaleX(-1);
-  width: 320px;
-  height: 253px;
+  top: -13em;
+  left: 8.5em;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 1);
+  cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
 }
-
 footer {
-  color: white;
-  width: 2fr;
-  padding-top: 100px;
-  margin: 0;
   text-align: center;
-}
-
-a:link {
   color: white;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-a:visited {
-  color: #ffc857;
-}
-
-/* ==========================================================================
-     Helper classes
-     ========================================================================== */
-
-/*
-   * Hide visually and from screen readers
-   */
-
-.hidden,
-[hidden] {
-  display: none !important;
-}
-
-/*
-   * Hide only visually, but have it available for screen readers:
-   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-   *
-   * 1. For long content, line feeds are not interpreted as spaces and small width
-   *    causes content to wrap 1 word per line:
-   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
-   */
-
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-  /* 1 */
-}
-
-/*
-   * Extends the .sr-only class to allow the element
-   * to be focusable when navigated to via the keyboard:
-   * https://www.drupal.org/node/897638
-   */
-
-.sr-only.focusable:active,
-.sr-only.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  white-space: inherit;
-  width: auto;
-}
-
-/*
-   * Hide visually and from screen readers, but maintain layout
-   */
-
-.invisible {
-  visibility: hidden;
-}
-
-/*
-   * Clearfix: contain floats
-   *
-   * For modern browsers
-   * 1. The space content is one way to avoid an Opera bug when the
-   *    `contenteditable` attribute is included anywhere else in the document.
-   *    Otherwise it causes space to appear at the top and bottom of elements
-   *    that receive the `clearfix` class.
-   * 2. The use of `table` rather than `block` is only necessary if using
-   *    `:before` to contain the top-margins of child elements.
-   */
-
-.clearfix::before,
-.clearfix::after {
-  content: " ";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
-/* ==========================================================================
-     EXAMPLE Media Queries for Responsive Design.
-     These examples override the primary ('mobile first') styles.
-     Modify as content requires.
-     ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-@media print,
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 1.25dppx),
-  (min-resolution: 120dpi) {
-  /* Style adjustments for high resolution devices */
-}
-
-/* ==========================================================================
-     Print styles.
-     Inlined to avoid the additional HTTP request:
-     https://www.phpied.com/delay-loading-your-print-css/
-     ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-     * Don't show links that are fragment identifiers,
-     * or use the `javascript:` pseudo protocol
-     */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-     * Printing Tables:
-     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-     */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
+footer a {
+  color: white;
 }
diff --git a/src/css/meetpage.css b/src/css/meetpage.css
index 5f8da63..08ab05f 100644
--- a/src/css/meetpage.css
+++ b/src/css/meetpage.css
@@ -70,37 +70,27 @@ body {
   place-items: center;
   font-family: "Dokdo", cursive;
   background-image: url("/docs/images/wood-grain-texture.jpg");
-  background-size: cover;
+
+  min-height: 100vh;
   text-align: center;
   font-weight: 400;
-}
-
-header {
-  position: absolute;
-  width: 100%;
-  height: 6em;
-  left: 0px;
-  top: 0px;
-  background: #177e89;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
+  cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
 }
 
 header h1 {
-  margin: 0 auto;
-  font-style: normal;
-  font-weight: 400;
+  color: white;
   font-size: 60px;
-  line-height: 120px;
-  text-align: center;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 1), 0px 4px 4px rgba(0, 0, 0, 1),
+    0px 4px 4px rgba(0, 0, 0, 1);
 }
 
 main {
-  margin-top: 1em;
+  padding: 1em;
   color: #084c61;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 25px;
+  background: rgba(129, 122, 125, 1);
+  box-shadow: -1px 4px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
 main p {
@@ -110,206 +100,48 @@ main p {
 
 .chingu_team {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  flex-direction: column;
+  justify-content: space-around;
 }
-.chingu_member {
-  margin: 0 1em;
-}
-.chingu_member p,
+
 .chingu_member a {
   font-weight: bold;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
   font-size: 30px;
   color: #084c61;
   text-decoration: none;
 }
-
+.chingu_member p {
+  font-weight: bold;
+  font-size: 30px;
+  color: #084c61;
+  letter-spacing: 0.05em;
+}
 .chingu_member p {
   font-size: 20px;
 }
 
 .back_link {
-  position: relative;
-  top: 1.5em;
   color: White;
   font-size: 20px;
 }
 .chingu_acknowledgements h1 {
-  margin-top: 1em;
-  color: rgba(255, 200, 87, 1);
+  margin-top: 0.2em;
+  color: rgb(255, 200, 87, 1);
+  text-decoration: underline;
 }
 
 ul li {
+  margin-left: -1.5em;
   list-style: none;
   color: #084c61;
-  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
   font-size: 25px;
+  font-weight: bold;
 }
 
-footer {
-  background: #177e89;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-    0px 4px 4px rgba(0, 0, 0, 0.25);
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.footer_info {
-  position: relative;
-  top: 10px;
-}
-
-.footer_infotwo {
-  position: relative;
-  bottom: 8px;
-}
-
-@media only screen and (max-width: 800px) {
-  */ *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-  /*
-  2. Remove default margin
-*/
-  * {
-    margin: 0;
-  }
-  /*
-  3. Allow percentage-based heights in the application
-*/
-  html,
-  body {
-    height: 100%;
-  }
-  /*
-  Typographic tweaks!
-  4. Add accessible line-height
-  5. Improve text rendering
-*/
-  body {
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-  }
-  /*
-  6. Improve media defaults
-*/
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
-  /*
-  7. Remove built-in form typography styles
-*/
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
-  /*
-  8. Avoid text overflows
-*/
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
-  /*
-  9. Create a root stacking context
-*/
-  #root,
-  #__next {
-    isolation: isolate;
-  }
-  body {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  header {
-    position: absolute;
-    width: 100%;
-    height: 6em;
-    left: 0px;
-    top: 0px;
-    background: #177e89;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-      0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  header h1 {
-    margin: 0 auto;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 40px;
-    line-height: 120px;
-    text-align: center;
-    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
-      0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-  .chingu_team {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-  }
-  main h1 {
-    margin: 0;
-    font-size: 25px;
-  }
-  main p {
-    color: rgba(255, 200, 87, 1);
-    font-size: 25px;
-  }
-  .chingu_member p,
-  .chingu_member a {
-    font-size: 15px;
-    color: white;
-  }
-
-  ul li {
-    font-size: 15px;
-  }
-  .back_link {
-    position: relative;
-    top: 0.2em;
-    color: White;
-    font-size: 20px;
-  }
-  footer {
-    background: #177e89;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
-      0px 4px 4px rgba(0, 0, 0, 0.25);
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-  }
-
-  .footer_info {
-    position: relative;
-    top: 10px;
-  }
-
-  .footer_infotwo {
-    position: relative;
-    bottom: 8px;
-  }
+footer,
+footer a {
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+    0px 4px 4px rgba(0, 0, 0, 0.1);
+  color: white;
+  cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
 }
diff --git a/src/css/style.css b/src/css/style.css
index d77c957..5d7af45 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -17,6 +17,11 @@ html {
   line-height: 1.4;
 }
 
+body {
+  background: url("/docs/images/graph_paper_large.jpg");
+  background-size: cover;
+  background-position: left;
+}
 /*
    * Remove text-shadow in selection highlight:
    * https://twitter.com/miketaylr/status/12228805301
@@ -46,7 +51,6 @@ hr {
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
-  margin: 1em 0;
   padding: 0;
 }
 
@@ -121,6 +125,7 @@ textarea {
 }
 
 #dark-light-btn {
+  width: fit-content;
   background-color: #094b61;
   color: #ffc857;
   border-radius: 50px;
@@ -138,7 +143,7 @@ button {
   background-color: rgb(250, 112, 112);
   height: auto;
   border: none;
-  padding: 1vh 2vh;
+  margin: 0.1em;
   border-radius: 3px;
   box-shadow: rgba(7, 24, 53, 0.25) 0px 4px 8px -2px,
     rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
@@ -148,71 +153,183 @@ button:hover {
   background-color: #f70f0f;
   color: #ffffff;
 }
+@media only screen and (max-width: 600px) {
+  body {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    font-family: "Dokdo", cursive;
+    cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
+  }
+  header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background: #177e89;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+      0px 4px 4px rgba(0, 0, 0, 0.25);
+  }
 
-.cursor {
-  cursor: none;
-  background-image: url('docs/images/Rocket_Ship_Blue_cursor.png');
-  width: 20px;
-  height: 20px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  pointer-events: none;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
+  header h1 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    text-align: center;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
+      0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
+  }
 
-body,
-button,
-a,
-input,
-select,
-textarea {
-  cursor: none;
-}
+  .gameControl_dice {
+    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
+      rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+    text-align: center;
+    width: 40%;
+    border: 6px solid #db3a34;
+  }
+
+  .message-container {
+    padding: 0em 0.1em;
+    background: #db3a34;
+    color: white;
+    border-radius: 1px;
+    text-align: center;
+  }
+  .game-board {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px;
+    grid-template-rows: 15px 15px 15px 15px 15px 15px 15px 15px 15px 15px;
+    justify-content: center;
+  }
+  .box {
+    background-color: #ffffff;
+    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
+      rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
+    border-radius: 5px;
+    margin: 0.08em;
+  }
+  img {
+    width: 3vh;
+    padding: 0.5vh;
+    -webkit-animation: none;
+    animation: none;
+  }
+
+  .mobile {
+    box-sizing: border-box;
+    width: 90%;
+    margin: 0.1em 0;
+    display: flex;
+    justify-content: space-evenly;
+    align-content: center;
+  }
 
-@media only screen and (max-width: 1150px) {
+  main {
+    width: 90%;
+  }
+  /* Style for the leaderboard */
+  #leaderboard-table {
+    margin: 0 auto;
+    border-collapse: collapse;
+  }
+
+  /* Style for the table headers */
+  #leaderboard-table th {
+    padding: 1px;
+    text-align: center;
+  }
+
+  /* Style for the table cells */
+  #leaderboard-table td {
+    padding: 1px;
+    text-align: center;
+    border: 1px solid black;
+    background: #ffc857;
+  }
+
+  /* Style for the first column of the table */
+  #leaderboard-table td:first-child,
+  #leaderboard-table th:first-child {
+    text-align: center;
+  }
+
+  /* Style for the cell with id "total-wins" */
+  #total-wins {
+    font-weight: bold;
+  }
+
+  #countdown {
+    font-family: "Dokdo", cursive;
+    display: block;
+    height: 20px;
+    margin: 0.5em auto 0;
+    padding-top: 0.2em;
+    width: 100px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    text-align: center;
+    color: #ffc857;
+    background: #323031;
+  }
+
+  .mob_btn {
+    margin: 0.1em auto 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  footer {
+    background: #177e89;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
+      0px 4px 4px rgba(0, 0, 0, 0.25);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  .footer_info {
+    position: relative;
+    top: 8px;
+  }
+
+  .footer_infotwo {
+    position: relative;
+    bottom: 1px;
+  }
+}
+@media only screen and (min-width: 600px) {
   body {
     min-height: 100vh;
     display: grid;
     place-items: center;
     font-family: "Dokdo", cursive;
-    cursor: pointer;
-    background-image: url("./docs/images/graph_grid_large.png");
-    background-size: cover;
-    background-repeat: no-repeat;
+    cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
   }
 
   header {
-    position: absolute;
+    position: fixed;
+    top: 0;
     width: 100%;
-    height: 3em;
-    left: 0px;
-    top: 0px;
+    margin: 0 auto;
     background: #177e89;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
       0px 4px 4px rgba(0, 0, 0, 0.25);
   }
 
   header h1 {
-    margin: -35px auto 0;
     font-style: normal;
     font-weight: 400;
     font-size: 30px;
-    line-height: 120px;
     text-align: center;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
       0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
   }
 
-  main {
-    padding-top: 2em;
-    padding-bottom: 8em;
-    height: 100vh;
-  }
-
   .mobile {
     box-sizing: border-box;
     width: 100%;
@@ -232,10 +349,10 @@ textarea {
   .message-container {
     width: 40%;
     height: 60%;
-    padding: 0.5em 0.8em;
+    padding: 1em 0.8em;
     background: #db3a34;
     color: white;
-    border-radius: 5px;
+    border-radius: 1px;
     text-align: center;
   }
 
@@ -272,8 +389,8 @@ textarea {
 
   /* Style for the leaderboard */
   #leaderboard-table {
-    margin: 2em auto 0;
-    width: 80%;
+    margin: 0 auto;
+    width: 90%;
     border-collapse: collapse;
   }
 
@@ -317,17 +434,22 @@ textarea {
   }
 
   .mob_btn {
-    margin-left: 1.6em;
-    margin-top: -1.5em;
+    margin: 0.1em auto 0;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
   button {
     margin: 0.1em;
     font-size: 2vh;
+    cursor: pointer;
   }
 
   #dark-light-btn {
-    height: 2em;
+    width: fit-content;
   }
 
   footer {
@@ -360,10 +482,7 @@ textarea {
     justify-content: center;
     font-family: "Dokdo", cursive;
     box-sizing: border-box;
-    cursor: none;
-    background-image: url("./docs/images/graph_grid_large.png");
-    background-size: cover;
-    background-repeat: no-repeat;
+    cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
   }
 
   header {
@@ -395,6 +514,7 @@ textarea {
     flex-direction: row;
     justify-content: space-between;
     align-content: center;
+    cursor: pointer;
   }
 
   .game-leaderboard {
@@ -404,14 +524,17 @@ textarea {
     flex-direction: column;
     width: 18em;
   }
-
+  .mobile {
+    display: flex;
+    flex-direction: column;
+  }
   .gameControl_dice {
     box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
       rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
     font-family: "Dokdo", cursive;
-    margin: 2em 0;
+    margin: 1em auto;
     text-align: center;
-    border: 10px solid #db3a34;
+    border: 8px solid #db3a34;
   }
 
   .game-container {
@@ -428,6 +551,7 @@ textarea {
     grid-template-rows: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
     justify-content: center;
     position: relative;
+    cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
   }
 
   .box {
@@ -439,13 +563,14 @@ textarea {
   }
 
   .gameControl_btn {
-    width: 10em;
+    width: 11em;
     display: flex;
     flex-direction: column;
+    flex-wrap: nowrap;
   }
 
   .gameControl_box {
-    width: 70%;
+    width: 80%;
     background: #084c61;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
@@ -469,10 +594,11 @@ textarea {
 
   .message-container {
     font-family: "Dokdo", cursive;
-    padding: 0em 1em;
+    margin: 1em auto;
+    padding: 0.5em 2.5em;
     background: #db3a34;
     color: white;
-    border-radius: 5px;
+    border-radius: 1px;
     text-align: center;
   }
 
@@ -508,8 +634,10 @@ textarea {
   }
 
   button {
+    padding: 0.4em 1.5em;
     margin: 1vh;
     font-size: 2vh;
+    cursor: url("/docs/images/Rocket_Ship_Blue_cursor.png"), auto;
   }
 
   .occupied {
@@ -552,7 +680,12 @@ textarea {
   #total-wins {
     font-weight: bold;
   }
-
+  #dark-light-btn {
+    width: 11em;
+    background-color: #094b61;
+    color: #ffc857;
+    border-radius: 50px;
+  }
   footer {
     background: #177e89;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25),
@@ -668,9 +801,9 @@ textarea {
 /* Style adjustments for viewports that meet the condition */
 
 @media print,
-(-webkit-min-device-pixel-ratio: 1.25),
-(min-resolution: 1.25dppx),
-(min-resolution: 120dpi) {
+  (-webkit-min-device-pixel-ratio: 1.25),
+  (min-resolution: 1.25dppx),
+  (min-resolution: 120dpi) {
   /* Style adjustments for high resolution devices */
 }
 
@@ -681,7 +814,6 @@ textarea {
      ========================================================================== */
 
 @media print {
-
   *,
   *::before,
   *::after {
diff --git a/src/js/app.js b/src/js/app.js
index 732f070..db35ffc 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -472,18 +472,3 @@ darkLightButton.addEventListener("click", function () {
   const body = document.querySelector("body");
   body.classList.toggle("dark-mode");
 });
-
-const cursor = document.querySelector(".cursor");
-const cursorOriginX = 10; // Adjust according to the cursor image
-const cursorOriginY = 10; // Adjust according to the cursor image
-
-const moveCursor = (e) => {
-  const mouseY = e.clientY;
-  const mouseX = e.clientX;
-
-  cursor.style.transform = `translate3d(${mouseX - cursorOriginX}px, ${
-    mouseY - cursorOriginY
-  }px, 0)`;
-};
-
-window.addEventListener("mousemove", moveCursor);
