fixed title, responsive design

src/App.css

@@ -31,7 +31,7 @@
   height: 100vh;
 }
 
-.mobile-title {
+.nav-title-mobile {
   display: none;
 }
 
@@ -50,7 +50,7 @@
   z-index: 9;
 }
 
-.nav-title {
+.nav-title-desktop {
   display: inline-flex;
   color: orchid;
   padding-left: 1.5rem;
@@ -234,17 +234,20 @@
     position: static;
   }
 
-  .desktop-title {
+  .nav-title-desktop {
     display: none;
   }
 
-  .mobile-title {
+  .nav-title-mobile {
     display: inline-flex;
+    color: orchid;
+    padding-left: 1.5rem;
+    font-family: 'Open Sans', sans-serif;
   }
 
   .nav-searchbar {
     width: 12rem;
-    right: 12rem;
+    right: 7rem;
   }
 
   .sidebar-button {

src/features/navbar/Navbar.js

@@ -12,8 +12,8 @@ export default function Navbar() {
     return (
         <>
         <div className="navbar">
-            <h1 className="nav-title desktop-title">Reddit, but it's all cats</h1>
-            <h1 className="nav-title mobile-title">Cat Reddit</h1>
+            <h1 className="nav-title-desktop">Reddit, but it's all cats</h1>
+            <h1 className="nav-title-mobile">Cat Reddit</h1>
             <SearchBar />
             <button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
         </div>