add stars

css/games.css

@@ -24,27 +24,52 @@ game img {
     justify-self: left;
     margin-right: auto;
 }
-game h1 {
+#holder h1 {
     font-size: 14px;
     margin: 15px;
-    max-width: 50%;
+    width: 100%;
+    text-align: right;
+    height: 70%;
 }
-#games {
+#holder {
+    width: 70%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+#star {
+    width: 10%;
+    justify-self: right;
+    margin-left: auto;
+    margin-right: 15px;
+    transition-duration: 0.25s;
+}
+#star:hover {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 5px var(--color-1))
+}
+#games, #starredgames {
     width: 90vw;
-    height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
-    min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2));
+    height: 100%;
     gap: 0px;
 }
 
 #noResults, #loadingMsg {
-    font-size: 28px;
+    font-size: 24px;
     color: var(--color-1);
-    text-shadow: var(--color-1) 0 0 10px;
 }
-#noResults {
+#starredHeader, #allHeader {
+    font-size: 32px;
+    color: var(--color-1);
+}
+#noResults, #starredHeader, #allHeader {
     display: none;
+}
+body {
+    justify-content: flex-start;
 }