mobile support and shit

css/games.css

@@ -112,4 +112,14 @@ warning {
 body[fast] game {
     background-color: color-mix(in srgb, var(--color-2) 70%, #000000 30%);
 	backdrop-filter: blur(0);
+}
+@media screen and (max-width: 900px) {
+	game {
+	  width: 40vw;
+	}
+}
+@media screen and (max-width: 660px) {
+	game {
+	  width: 60vw;
+	}
 }

css/loader.css

@@ -57,4 +57,16 @@ body {
 body[fast] #gamecontainer {
     background-color: color-mix(in srgb, var(--color-2) 70%, #000000 30%);
 	backdrop-filter: blur(0);
+}
+@media screen and (max-width: 660px) {
+	#infobox h2 {
+        max-width: 45%;
+        font-size: 16px;
+    }
+    .button {
+        width: 22%;
+        margin: 0.5%;
+        aspect-ratio: 1 / 1;
+        border-radius: 8px;
+    }
 }

css/sidebar.css

@@ -1,5 +1,6 @@
-body {
-    overflow: hidden;
+html,body {
+  overflow: hidden;
+  height: 100%;
 }
 sidebar {
     background-color: linear-gradient(19deg,rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);;
@@ -29,13 +30,10 @@ iframe {
 }
 
 .sidebar-divider {
-    height: 2px;
-    border-radius: 20px;
-    width: 80%;
     background-color: #ffffff22;
     /* auto is being stupid
     100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */
-    margin-bottom: calc(100vh - 26px * 8 - ((6px + 6px) * 2) * 8);
+    margin-bottom: calc(100vh - 26px * 9 - ((6px + 6px) * 2) * 9);
 }
 
 .sidebar-item-descriptor {
@@ -144,4 +142,40 @@ alert p {
     opacity: 0;
     top: -50px;
   }
+}
+#fullscreen {
+    display: none;
+}
+@media screen and (max-width: 660px) {
+	sidebar {
+    height: 50px;
+    width: 100vw;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    user-select: none;
+    z-index: 10;
+    overflow: scroll;
+    justify-content: center;
+  }
+  iframe {
+    width: calc(100% - 20px);
+    height: calc(100% - 50px - 20px);
+    margin: 10px;
+    margin-right: 0px;
+    border-radius: 8px;
+  }
+  body {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  #bottom-menu, #open-bottom-menu, .sidebar-item-descriptor {
+    display: none;
+  }
+  #openblank {
+    display: none;
+  }
+  #fullscreen {
+    display: block;
+  }
 }

css/users.css

@@ -56,4 +56,14 @@
 body[fast] .users {
     background-color: color-mix(in srgb, var(--color-2) 70%, #000000 30%);
 	backdrop-filter: blur(0);
+}
+@media screen and (max-width: 900px) {
+	.users {
+	  width: 40vw;
+	}
+}
+@media screen and (max-width: 660px) {
+	.users {
+	  width: 80vw;
+	}
 }