Optimized css for mobile devices

public/css/chat.css

@@ -103,7 +103,7 @@
     white-space: pre;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #chat {
         flex-flow: column-reverse;
         border-top: #7d7d7d solid 2px;

public/css/components.css

@@ -101,7 +101,7 @@ main {
     height: calc(100% - 50px);
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #main {
         display: grid;
         grid-template-columns: unset;

public/css/game.css

@@ -28,7 +28,7 @@
     background-color: #FFDDA1;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #game {
         height: auto;
         width: auto;

public/css/header.css

@@ -45,10 +45,10 @@ header {
     flex-direction: column;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     header {
         height: 5em;
-        
+
     }
 
     .title {

public/css/index.css

@@ -54,7 +54,7 @@
     color: #ffffff;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (max-width: 600px) {
     #login {
         align-items: flex-start;
     }