responsive design for mobile

src/App.css

@@ -19,7 +19,7 @@
 .App {
   display: flex;
   flex-direction: column;
-  background-color: #FFE9F3;
+  background-color: #d1aabc;
   align-items: center;
   margin: 0;
   padding: 0;
@@ -31,6 +31,10 @@
   height: 100vh;
 }
 
+.mobile-title {
+  display: none;
+}
+
 /* Navbar */
 
 .navbar {
@@ -73,6 +77,7 @@
 .sidebar-button {
   border: transparent;
   background-color: orchid;
+  box-shadow: 1px 1px rgb(111, 30, 151);
   text-align: center;
   height: 3.5rem;
   border-radius: 15px;
@@ -114,6 +119,7 @@
   top: 5rem;
   padding: 1.5rem;
   transition: right 0.6s ease-out;
+  z-index: 9;
 }
 
 /* Feed */
@@ -221,4 +227,48 @@
     width: 2rem;
     margin: 0 0.4rem;
   }
+}
+
+@media only screen and (max-width: 800px) {
+  .navbar {
+    position: static;
+  }
+
+  .desktop-title {
+    display: none;
+  }
+
+  .mobile-title {
+    display: inline-flex;
+  }
+
+  .nav-searchbar {
+    width: 12rem;
+    right: 12rem;
+  }
+
+  .sidebar-button {
+    position: fixed;
+    right: 0;
+    top: 0.6rem;
+    width: 4.5rem;
+  }
+
+  .content-container {
+    top: 0;
+  }
+
+  .feed {
+    width: 95vw;
+  }
+
+  .page-handling {
+    width: 15rem;
+    height: 2rem;
+  }
+
+  .page-handling button {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }