redesign loader

css/games.css

@@ -8,7 +8,7 @@ game {
     cursor: pointer;
     border-radius: 20px;
     margin: 15px;
-    transition-duration: 0.25s;
+    /* transition-duration: 0.25s; */
 	backdrop-filter: blur(2px);
     box-shadow: 0 0 10px var(--color-2);
 }
@@ -43,7 +43,7 @@ game img {
     justify-self: right;
     margin-left: auto;
     margin-right: 15px;
-    transition-duration: 0.25s;
+    /* transition-duration: 0.25s; */
 }
 #star:hover {
     transform: scale(1.1);

css/loader.css

@@ -1,28 +1,22 @@
-#gamecontainer {
-    width: 90vw;
-    height: auto;
-    border-radius: 15px;
-    background-color: color-mix(in srgb, var(--color-2) 50%, #00000000 50%);
-    box-shadow: 0 0 10px var(--color-2);
-	backdrop-filter: blur(6px);
+body {
+    overflow: hidden;
 }
 #gameFrame {
-    width: 99%;
-    height: 75vh;
-    margin: 0.5%;
-    margin-bottom: 0;
-    border-radius: 10px;
+    width: 100vw;
+    height: 90vh;
+    margin: 0;
 }
 #infobox {
-    height: 8vh;
+    height: 10vh;
     width: 100%;
-    margin: 1% 0;
     display: flex;
     justify-content: center;
     align-items: center;
+    background-color: #000000;
+    backdrop-filter: blur(4px);
 }
 #infobox img {
-    height: 100%;
+    height: 90%;
     margin: 0.5%;
     aspect-ratio: 1 / 1;
     border-radius: 8px;
@@ -34,7 +28,7 @@
     margin: 4px;
     padding: 2px;
     width: 7%;
-    transition-duration: 0.25s;
+    /* transition-duration: 0.25s; */
     cursor: pointer;
 }
 .button:hover {

css/main.css

@@ -83,7 +83,7 @@ select,
 select {
   padding: 8px;
   background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%);
-  transition-duration: 0.25s;
+  /* transition-duration: 0.25s; */
   color: var(--text-color);
   border-radius: 4px;
 }
@@ -119,6 +119,6 @@ mobile-warning {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  transition-duration: 1s;
+  /* transition-duration: 1s; */
   text-align: center;
 }

css/sidebar.css

@@ -81,11 +81,16 @@ iframe {
     height: 15px;
     width: 70px;
     z-index: 5;
+    filter: drop-shadow(0 0 16px #fff5);
 }
 #bottom-menu[enabled=true] {
     bottom: 10px;
     color: white;
+    filter: drop-shadow(0 0 16px #fff5);
+    z-index: 0;
 }
 #open-bottom-menu[enabled=true] {
     bottom: 60px;
+    filter: drop-shadow(0 0 0 #fff5);
+    opacity: 0;
 }