css file added to tic tac toe

frontend/src/pages/ttt/ttt.css

@@ -0,0 +1,86 @@
+@import "tailwindcss";
+
+@font-face {
+  font-family: "Nimbus Mono L";
+  src: url("/fonts/NimbusMonoL.woff2") format("woff2");
+}
+
+
+
+.displaybox {
+  @apply
+  fixed
+  inset-0
+  flex
+  items-center
+  justify-center
+  bg-[#43536b];
+  
+}
+
+.mainboxDisplay {
+  @apply
+  fixed 
+  top-1/2 
+  left-1/2 
+  -translate-x-1/2 
+  -translate-y-1/2 
+  bg-gray-200 
+  p-6 rounded-xl 
+  shadow-2xl 
+  text-center z-50;
+}
+
+
+.btn-style {
+  @apply
+  w-[100px]
+  h-[32px]
+  border 
+  border-gray-500
+  rounded-3xl
+  bg-gray-500
+  text-white
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  hover:bg-blue-200
+  active:bg-gray-400
+  active:translate-y-[1px]
+  active:shadow-[0_2px_0_0_black];
+}
+
+
+.grid-box {
+    @apply
+    bg-white
+    p-8 
+    rounded-3xl
+    border
+    border-black
+    shadow-2xl
+}
+
+
+.grid-layout {
+    @apply
+
+    grid 
+    grid-cols-3 
+    gap-1 
+    max-w-2xl 
+    mx-auto
+}
+
+.ttt-cell {
+    @apply 
+    bg-black 
+    aspect-square
+    flex
+    items-center 
+    justify-center 
+    text-white 
+    text-9xl 
+    font-bold 
+    hover:bg-gray-500
+}

frontend/src/pages/ttt/ttt.html

@@ -1,21 +1,20 @@
-
 <div class="displaybox">
     <div id="mainbox" class="mainboxDisplay">
-        <button id="ttt-restart-btn" class="btn-style absolute top-6 right-6">New Game</button>
+        <button id="ttt-newgame-btn" class="btn-style absolute top-6 right-6">New Game</button>
         <h1 class="text-3xl font-bold text-gray-800">
             Tic-tac-toe Box<span id="t-username"></span>
         </h1><br>
-        <div class="grid-box mt-4">
+        <div class="grid-box mt-2">
-            <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
+            <div class="grid-layout">
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell1" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell2" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell3" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell4" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell5" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell6" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell7" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell8" class="ttt-cell"></div>
-                <div class="bg-blue-500 h-32 flex items-center justify-center text-white text-xl font-bold hover:bg-red-700 ttt-grid-cell"> </div>
+                <div id="cell9" class="ttt-cell"></div>
             </div>
         </div>        
     </div>

frontend/src/pages/ttt/ttt.ts

@@ -1,3 +1,4 @@
+import "./ttt.css"
 import { addRoute, type RouteHandlerReturn } from "@app/routing";
 import tttPage from "./ttt.html?raw";
 import { showError, showInfo, showSuccess, showWarn } from "@app/toast";
@@ -49,7 +50,7 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
 			});
 			socket.emit('enqueue');
 
-			const cells = app.querySelectorAll<HTMLDivElement>(".ttt-grid-cell");
+			const cells = app.querySelectorAll<HTMLDivElement>(".ttt-cell");
 			const grid = app.querySelector(".ttt-grid"); // Not sure about this one
 
 			const updateUI = (boardState: (string | null)[]) => {