Added style for mobile

frontend/src/components/AboutPage.vue

@@ -55,4 +55,9 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    @media (max-aspect-ratio:13/16) {
+        #About {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/BetBox.vue

@@ -129,6 +129,11 @@ onMounted(() => {
 #lower {
     height: 200px;
 }
+@media (max-aspect-ratio:13/16) {
+    #GameWindow {
+        flex-direction: row;
+    }
+}
 
 @property --p{
   syntax: '<number>';

frontend/src/components/ChatBox.vue

@@ -160,4 +160,23 @@ function sendChat() {
     #ChatInput:focus {
         outline: none !important;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #ChatBoxContainer {
+            width:80%;
+            max-width: 80%;
+            margin: auto;
+            margin-bottom: 30px;
+        }
+        #ChatWindow {
+            width:95%;
+        }
+        #ChatInput {
+            width: 65%;
+        }
+        #ChatInputContainer {
+            width: 95%;
+            margin: auto;
+        }
+    }
 </style>

frontend/src/components/GameWindow.vue

@@ -15,4 +15,9 @@
         display: flex;
         justify-content: space-around;
     }
+    @media (max-aspect-ratio:13/16) {
+        #GameWindow {
+            flex-direction: column;
+        }
+    }
 </style>

frontend/src/components/HowToPlay.vue

@@ -57,4 +57,10 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #HowTo {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/LoginForm.vue

@@ -198,4 +198,9 @@ function login(e) {
     .badInput {
         border: 2px solid red;
     }
+    @media (max-aspect-ratio:13/16) {
+        #LoginContainer {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/MassFlip.vue

@@ -50,4 +50,11 @@ function displayHandle(c) {
     border-radius: 30px;
     background-color: rgba(0, 8, 20,0.7);
 }
+    
+@media (max-aspect-ratio:13/16) {
+    #Container {
+        width: 95%;
+        height: auto;
+    }
+}
 </style>

frontend/src/components/PageHeader.vue

@@ -64,4 +64,10 @@ function logout() {
         cursor: pointer;
         color: #bbb;
     }
+    @media (max-aspect-ratio:13/16) {
+        nav {
+            max-width: 80%;
+
+        }
+    }
 </style>