logo change, style change, games json file; almost whole revamp is in this commit

css/style.css

@@ -1,14 +1,37 @@
 @import url('https://fonts.googleapis.com/css2?family=Trispace:wght@100&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@500&display=swap');
 
-/*i titled these poorly, without trying how any of it looks*/
 :root {
     --bg: #202020;
     --block-color: #2b2b2b;
     --button-color: #373737;
+    --games-color: #373737a6;
     --hover-color: #3c3c3c;
+    --scrollbar-color: #434343;
+    --scroll-track-color: #111;
     --font-color: #dcddde;
-    --font-family: 'Work Sans', sans-serif;
+    --font-family: 'Assistant', sans-serif;
+}
+
+::-webkit-scrollbar {
+    width: 20px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    background-clip: content-box;
+    border-radius: 16px;
+    border: 2.9px solid transparent;
+    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25);
+    transition: all 0.2s ease-in;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--hover-color);
+}
+
+::-webkit-scrollbar-track {
+    background: linear-gradient(90deg,var(--scrollbar-color),var(--scrollbar-color) 1px,var(--scroll-track-color) 0,var(--scroll-track-color));
 }
 
 html {
@@ -59,17 +82,23 @@ body.noscript {
     display: grid;
 }
 
-.homepage {
+.homepage, .games, .proxy, .settings {
     position: absolute;
     top: 0;
     left: 0;
     margin-top: 15rem;
+    width: 100vw;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 10;
 }
 
+.games {
+    flex-direction: column;
+    top: 2.5%;
+}
+
 #title {
     z-index: 50;
     position: relative;
@@ -89,6 +118,57 @@ body.noscript {
     pointer-events: none;
 }
 
+#gamesList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: 10;
+    width: 75%;
+    height: 60vh;
+    font-family: var(--font-family);
+    overflow-y: scroll;
+}
+
+#gamesList li {
+    padding: 1rem;
+    transition: all 0.2s ease-in;
+    letter-spacing: 1px;
+    background-color: var(--games-color);
+}
+
+#gamesList li:hover, #gamesList li:focus, #gamesList .active {
+    background-color: var(--hover-color);
+}
+
+.searchbar {
+    display: flex;
+    width: 75%;
+    justify-content: center;
+    margin-bottom: 5px;
+}
+
+#search {
+    all: unset;
+    margin-right: 4px;
+    width: 100%;
+    padding: 1rem;
+    font-family: var(--font-family);
+    color: var(--font-color);
+    background-color: var(--block-color);
+}
+
+#sort {
+    all: unset;
+    margin: 0;
+    border: none;
+    background-color: var(--block-color);
+    color: var(--font-color);
+    font-size: 1rem;
+    font-family: var(--font-family);
+    padding: 1rem;
+    width: 20%;
+}
+
 logo img {
     z-index: 50;
     position: fixed;
@@ -97,18 +177,38 @@ logo img {
     scale: 0.45;
 }
 
+img[alt="MonkeyGG2 Icon"] {
+    filter: brightness(110%);
+}
+
+img[alt="Proxy Icon"] {
+    margin: -1rem 0;
+}
+
+.card .img-container {
+    max-width: 256px;
+    max-height: 256px;
+    margin: 2rem 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.card .img-container > img, svg {
+    width: 100%;
+}
+
 .card-row {
     display: flex;
     flex-direction: row;
-    width: 90%;
+    width: 75%;
 }
 
 .column {
     text-align: center;
     float: left;
-    width: 25%;
+    width: 33%;
     padding: 0 10px;
-    cursor: pointer;
 }
 
 .column button {
@@ -122,11 +222,11 @@ logo img {
 
 .card {
     box-shadow: var(--button-color) 0 4px 8px 0;
-    padding: 16px;
+    padding: 12px;
     text-align: center;
     background-color: var(--button-color);
     border-radius: 50px;
-    font-size: 150%;
+    font-size: 1.2rem;
     text-decoration: none;
     color: var(--font-color);
     font-family: var(--font-family);
@@ -134,6 +234,24 @@ logo img {
     cursor: pointer;
 }
 
+.card h5 {
+    font-size: 2rem;
+    letter-spacing: 1px;
+    margin: 2px;
+}
+
 .card:hover {
     background-color: var(--hover-color);
+}
+
+#page-loader iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    margin: 0;
+    padding: 0;
+    border: 0;
 }