Zmiany wyglądu i działania filtra stacji, poprawki

src/styles/card.scss

@@ -0,0 +1,45 @@
+@import './variables.scss';
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+
+  overflow: auto;
+  background: $primaryCol;
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  width: 75%;
+  max-width: 650px;
+  max-height: 95%;
+
+  padding: 0.5em 1em;
+
+
+  @include smallScreen {
+    width: 95%;
+  }
+
+  @include bigScreen {
+    font-size: 1.4rem;
+  }
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.3em 0em;
+
+    img {
+      width: 1.6em;
+    }
+
+    cursor: pointer;
+  }
+}

src/styles/global.scss

@@ -1,3 +1,16 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  // font-family: "Open Sans", sans-serif;
+  font-family: "Quicksand", sans-serif;
+
+  overflow-x: hidden;
+}
+
 :root {
   font-size: 16px;
 }
@@ -67,18 +80,6 @@
   }
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  width: 100%;
-  margin: 0;
-  // font-family: "Open Sans", sans-serif;
-  font-family: "Quicksand", sans-serif;
-
-  overflow-x: hidden;
-}
 
 button,
 input,
@@ -119,49 +120,6 @@ input {
   color: $accentCol;
 }
 
-.card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 4;
-
-  overflow: auto;
-  background: #262a2e;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 75%;
-  max-width: 750px;
-  max-height: 95%;
-
-  // font-size: calc(0.6rem + 0.5vw);
-  font-size: calc(0.45rem + 0.35vw);
-
-  @include smallScreen {
-    width: 95%;
-  }
-
-  @include bigScreen {
-    font-size: 1.4rem;
-  }
-
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0.3em 0em;
-
-    img {
-      width: 1.6em;
-    }
-
-    cursor: pointer;
-  }
-}
 
 .title {
   color: $accentCol;

src/styles/scenery_status.scss

@@ -1,17 +1,17 @@
 $free: #8a8a8a;
 $ending: #e6c300;
-$no-limit: #0077ae;
+$no-limit: #117fc9;
 $unav: #ff3d5d;
 $brb: #e6a100;
 $no-space: #222;
 $taken: #09a116;
 
-.status {
+.status-badge {
   border-radius: 1rem;
   font-weight: 500;
 
   font-size: 0.9em;
-  padding: 0.2em 0.45em;
+  padding: 0.2em 0.6em;
 
   background-color: $taken;
 
@@ -34,7 +34,7 @@ $taken: #09a116;
   &.not-signed,
   &.unavailable {
     background-color: $unav;
-    font-size: 0.8em;
+    font-size: 0.85em;
   }
 
   &.brb {