optimize a lot of stuff

css/games.css

@@ -1,6 +1,6 @@
 .game {
     width: 20vw;
-    height: 10vh;
+    height: 9vh;
     background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
     display: flex;
     justify-content: center;
@@ -13,17 +13,16 @@
     box-shadow: 0 0 10px var(--color-2);
     text-decoration: none;
     content-visibility: auto;
-    contain-intrinsic-size: auto 10vh;
+    contain-intrinsic-size: auto 9vh;
 }
 .game:hover {
     transform: scale(1.1);
-    filter:brightness(1.15);
 }
 .game img {
-    height: 80%;
+    height: calc(100% - 4px - 4px);
 	border-radius: 15px;
 	aspect-ratio: 1 / 1;
-    margin: 10px;
+    margin: 4px;
     justify-self: left;
     margin-right: auto;
 }
@@ -35,8 +34,7 @@
     height: 70%;
 }
 #holder {
-    width: 70%;
-    height: auto;
+    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-end;

css/loader.css

@@ -3,26 +3,57 @@ body {
 }
 #gameFrame {
     width: 100vw;
-    height: 90vh;
+    height: 100vh;
     margin: 0;
     background-color: black;
 }
 #infobox {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000;
+    transition: transform 0.3s ease;
+    z-index: 10;
+}
+#infobox.collapsed {
+    transform: translateY(100%);
+}
+#infobox:hover {
+    transform: translateY(0);
+}
+#infobox-toggle {
+    position: fixed;
+    bottom: calc(10vh + 8px);
+    right: 12px;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    opacity: 0.5;
+    z-index: 11;
+    transition: opacity 0.2s, transform 0.3s, bottom 0.3s;
+}
+#infobox-toggle:hover {
+    opacity: 1;
+}
+#infobox.collapsed ~ #infobox-toggle {
+    transform: rotate(180deg);
+    bottom: 8px;
+}
+#infobox-content {
     height: 10vh;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #000000;
-    backdrop-filter: blur(4px);
 }
-#infobox img {
+#infobox-content img {
     height: 90%;
     margin: 0.5%;
     aspect-ratio: 1 / 1;
     border-radius: 8px;
 }
-#infobox h2 {
+#infobox-content h2 {
     margin-right: auto;
 }
 .button {
@@ -59,7 +90,7 @@ body[fast] #gamecontainer {
 	backdrop-filter: blur(0);
 }
 @media screen and (max-width: 660px) {
-	#infobox h2 {
+	#infobox-content h2 {
         max-width: 45%;
         font-size: 16px;
     }

css/main.css

@@ -1,4 +1,3 @@
-@import url("/css/themes.css");
 @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
 :root {
     --text-color: #fff;
@@ -9,6 +8,51 @@
     --color-3: #3C096C;
     --color-4: #240046;
 }
+body[theme=blackandwhite] {
+    --text-color: #fff;
+    --bg-1: #504d53;
+    --bg-2: #090909;
+    --color-1: #bfbfbf;
+    --color-2: #8e8e8e;
+    --color-3: #5c5c5c;
+    --color-4: #000000;
+}
+body[theme=grass] {
+    --text-color: #ffffff;
+    --bg-1: #385041;
+    --bg-2: #1d3024;
+    --color-1: #a8e5a7;
+    --color-2: #559b7a;
+    --color-3: #3a5c3f;
+    --color-4: #242e22;
+}
+body[theme=evil] {
+    --text-color: #ffffff;
+    --bg-1: #ba2a2a;
+    --bg-2: #591414;
+    --color-1: #eb8181;
+    --color-2: #ae4141;
+    --color-3: #7b3838;
+    --color-4: #4f2626;
+}
+body[theme=sky] {
+    --text-color: #ffffff;
+    --bg-1: #5d9dae;
+    --bg-2: #3c7aa6;
+    --color-1: #04eeff;
+    --color-2: #2ab9f2;
+    --color-3: #3188bd;
+    --color-4: #23588a;
+}
+body[theme=xmas] {
+    --text-color: #dcffab;
+    --bg-1: #a00000;
+    --bg-2: #400000;
+    --color-1: #dcffab;
+    --color-2: #a32a2a;
+    --color-3: #000000;
+    --color-4: #630000;
+}
 html,
 body {
     /* height: 100vh; */
@@ -22,7 +66,9 @@ body {
     margin: 0;
     border: none;
     font-family: "Mulish", serif;
-    transition-duration: 0.5s;
+}
+a, button, select, input, option {
+    transition-duration: 0.4s;
 }
 body {
     animation: 1s ease-out loadIn;
@@ -35,7 +81,7 @@ body {
 
 body {
     display: flex;
-    filter: drop-shadow(0px 0px 4px #ffffff99);
+    isolation: isolate;
 }
 
 .samerow {
@@ -139,6 +185,6 @@ button {
   cursor:pointer;
 }
 button:hover {
-  filter: brightness(1.1);
+  box-shadow: 0 0 12px var(--color-2);
   transform: scale(1.05);
 }

css/pages.css

@@ -41,8 +41,6 @@ body {
     border: none;
     overflow-y: hidden;
     top: 0;
-    transition-duration: 0.05s;
-    transition-timing-function: ease-out;
 }
 input[type=text], input[type=password] {
   width: 70%;

css/sidebar.css

@@ -25,6 +25,10 @@ sidebar {
   transition-timing-function: ease-in-out;
 }
 
+.sidebar-item.active {
+
+}
+
 iframe {
   width: calc(100% - 50px - 10px);
   height: calc(100vh - 20px);
@@ -66,6 +70,7 @@ iframe {
 #open-bottom-menu {
   position: absolute;
   bottom: -40px;
+  transition-duration: 0.5s;
   height: 50px;
   left: 0;
   right: 0;