make screens more mobile compatible

layouts/default.vue

@@ -66,7 +66,8 @@ footer {
 
     footer {
         display: block;
-        width: 80%;
+        max-width: 80%;
+        min-width: 50%;
         align-items: center;
         text-align: center;
         margin: 5rem 1rem 1rem 1rem;

pages/about.vue

@@ -27,4 +27,16 @@ p {
     margin-bottom: 1rem;
     line-height: 1.5;
 }
+
+@media (max-width: 768px) {
+    .aboutpage {
+        margin: 1rem;
+    }
+    h1{
+        font-size: 1.5rem;
+    }
+    p{
+        font-size: 1rem;
+    }
+}
 </style>

pages/index.vue

@@ -22,7 +22,7 @@
         strong Iteration Count: 
         | Determine the number of times a player will receive a new symbol during their turn.
       li 
-        strong Choose Categories:
+        strong Choose Categories: 
         | Sometimes you don't want all from everything so you can choose which specific categories you want in your game. If non choosen, all are selected automatically.
       li 
         strong Hit Start: 
@@ -82,6 +82,7 @@
 
 .section {
   margin-bottom: 2rem;
+  max-width: 100%;
 }
 
 h1 {
@@ -112,9 +113,11 @@ li {
   line-height: 1.5;
 }
 
-.biglogo{
+.biglogo {
-  display:block;
+  display: block;
-  max-width: 500px;
+  max-width: 450px;
+  max-width: 90%;
+  min-width: 10px;
   margin: auto;
 }
 
@@ -154,7 +157,8 @@ button:hover {
     font-size: 1.5rem;
   }
 
-  p {
+  p,
+  li {
     font-size: 1rem;
   }
 }