Much neater filters + cleaner code.

src/styles/App.css

@@ -1,13 +1,19 @@
-@media (min-width: 650px) {
+@media (width >= 650px) {
   .search {
     width: 35%;
     min-width: 300px;
   }
 }
 
-@media (max-width: 650px) {
+@media (400px < width < 650px) {
   .search {
-    width: 170px;
+    width: 40%;
+  }
+}
+
+@media (width <= 400px) {
+  .search {
+    width: 120px;
   }
 }
 

src/styles/Filters.css

@@ -1,15 +1,20 @@
-@media (min-width: 800px) {
+@media (min-width: 600px) {
   .filter {
-    left: 35%;
-    right: 35%;
+    left: 10%;
+    right: 10%;
     min-width: 200px;
   }
+
+  .filter-groups {
+    display: flex;
+    justify-content: space-evenly;
+  }
 }
 
-@media (max-width: 800px) {
+@media (max-width: 600px) {
   .filter {
-    left: 20%;
-    right: 20%;
+    left: 10%;
+    right: 10%;
     min-width: 100px;
   }
 }
@@ -36,10 +41,9 @@
   border-width: 1px;
   font-weight: 300;
   border-color: rgb(141, 141, 141);
-  display: flex;
-  flex-direction: column;
+  justify-content: center;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-  padding: 5px;
+  padding: 10px;
   position: absolute;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -51,10 +55,10 @@
   font-weight: 600;
 }
 
-.filter > label {
-  margin: 5px;
+.section > label {
+  display: block;
   text-align: left;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   font-family: "Font Awesome 5 Free";
   padding: 10px;
   font-size: 1.1rem;
@@ -68,6 +72,25 @@
   box-shadow: 0px 0px 10px rgb(83, 143, 255);
 }
 
+.apply-btn {
+  font-family: "Font Awesome 5 Free";
+  font-size: 1.2rem;
+  padding: 10px;
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  border: none;
+  margin-top: 20px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  transition: background-color 0.1s;
+}
+
+.apply-btn:active {
+  box-shadow: 0px 0px 10px rgb(83, 143, 255);
+}
+
 @keyframes fadein {
   from {
     opacity: 0%;

src/styles/List.css

@@ -159,6 +159,7 @@
 .tags a {
   margin-right: 10px;
   color: #2b8add;
+  text-decoration: none;
 }
 
 .tags a::before {

src/styles/SideBar.css

@@ -1,9 +1,6 @@
 .sidebar {
   height: 100vh;
   position: fixed;
-  border-right: solid;
-  border-width: 1px;
-  border-color: gray;
 }
 
 .sidebar h1 {

src/styles/Sort.css

@@ -1,77 +0,0 @@
-@media (min-width: 800px) {
-  .sort {
-    left: 30%;
-    right: 30%;
-    min-width: 200px;
-  }
-}
-
-@media (max-width: 800px) {
-  .sort {
-    left: 20%;
-    right: 20%;
-    min-width: 100px;
-  }
-}
-
-.sort-overlay {
-  animation: fadein 0.2s;
-  background-color: black;
-  opacity: 10%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100vw;
-  z-index: 1;
-}
-
-.sort-box {
-  position: relative;
-}
-
-.sort {
-  animation: fadein 0.3s;
-  border: solid;
-  border-width: 1px;
-  font-weight: 300;
-  border-color: rgb(141, 141, 141);
-  display: flex;
-  flex-direction: column;
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-  padding: 5px;
-  position: absolute;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  z-index: 2;
-}
-
-.sort legend {
-  font-weight: 600;
-}
-
-.sort-by-btn {
-  margin: 5px;
-  text-align: left;
-  font-family: "Font Awesome 5 Free";
-  padding: 10px;
-  font-size: 1.1rem;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  border: none;
-  transition: background-color 0.1s;
-}
-
-.sort-by-btn:active {
-  box-shadow: 0px 0px 10px rgb(83, 143, 255);
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0%;
-  }
-  to {
-  }
-}

src/styles/index.css

@@ -32,23 +32,15 @@ body {
   background-color: #1f2c38;
 }
 
-.send-btn {
-  background-color: #273949;
-  color: #ffffffb6;
-}
-
-.sort {
-  background-color: #1f2c38;
-}
-
-.sort-by-btn {
+.send-btn,
+.apply-btn {
   background-color: #273949;
   color: #ffffffb6;
 }
 
 .btn:hover,
-.sort-by-btn:hover,
-.send-btn:hover {
+.send-btn:hover,
+.apply-btn:hover {
   background-color: rgb(76, 117, 170);
 }
 
@@ -89,7 +81,7 @@ body {
   background-color: #1f2c38;
 }
 
-.filter > label {
+.section > label {
   background-color: #273949;
   color: #ffffffb6;
 }
@@ -142,29 +134,24 @@ body {
   color: rgb(9, 139, 214);
 }
 
-.light .filter,
-.light .sort {
+.light .filter {
   background-color: rgb(233, 220, 179);
 }
 
-.light .filter > label {
+.light .section > label {
   background-color: lightyellow;
   color: #4b4b4bb6;
 }
 
-.light .sort-by-btn {
-  background-color: lightyellow;
-  color: #4b4b4bb6;
-}
-
-.light .send-btn {
+.light .send-btn,
+.light .apply-btn {
   background-color: lightyellow;
   color: #717171b6;
 }
 
-.light .sort-by-btn:hover,
 .light .btn:hover,
-.light .send-btn:hover {
+.light .send-btn:hover,
+.light .apply-btn:hover {
   background-color: rgb(55, 131, 237);
   color: #d8d8d8;
 }