refactor: navbar back to previous version

client/css/navbar.css

-.navbar-container {
-    display: flex;
-    justify-content: space-evenly;
-    background-color: #AA1E1E;
-    border: none;
-    outline: none;
-    color: #eaeaea;
-    /* float: left; */
-    font-size: 17px;
-    width: 100%;
-    height: 8%;
-}
 
 img{
-    /* float: left; */
-    margin: 5px;
+    float: left;
+    margin: 10px;
     min-width: 100px;
     min-height: 50px;
 }
 
+.tabgroup{
+    background-color: #AA1E1E;
+    color: #eaeaea;
+    outline: none;
+    font-size: 17px;
+    width: 100%;
+    height: 8%;
+    position: relative;
+}
 
 .searchbar {
-    /* float: left; */
+    float: left;
     padding: 6px;
     background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
     margin-top: 15px;
     margin-left: 10%;
     border-radius: 10px;
     display: flex;
-    /* align-items: center; */
+    align-items: center;
     max-height: 35px;
     transition: max-height 0.5s;
     overflow: hidden;
@@ -36,28 +33,32 @@ img{
 
 
 .searchbar input{
-    background: transparent;
     background-color: transparent;
     border: none;
-    outline: none;
     font-size: 20px;
     margin-left: 10px;
     width: 100%;
-    border: 0;
+}
 
+input{
+    width: 100%;
+    background: transparent;
+    border: 0;
+    outline: 0;
 }
 
+
 .tabexpand{
-    
+    background-color: #AA1E1E;
     color: #eaeaea;
     float: left;
     border: none;
-
+    outline: none;
     text-decoration: none;
     text-align: center;
     cursor: pointer;
-    font-size: 5vh;
-    padding: 10px 14px;
+    font-size: 30px;
+    padding: 14px 14px;
     width: 5%;
     height: 100%;
 }
@@ -66,74 +67,73 @@ img{
     background-color: transparent;
     color: #eaeaea;
     border: none;
-
+    outline: none;
     cursor: pointer;
     font-size: 17px;
-    /* padding: 17px 0px; */
+    padding: 17px 0px;
     width: 10%;
     text-align: center;
     border-radius: 10px;
     height: 100%;
 }
 
-/* .tabbutton{
-    
+.tabbutton{
+    background-color: #AA1E1E;
     color: #eaeaea;
     float: left;
     border: none;
-
+    outline: none;
     cursor: pointer;
     font-size: 17px;
     padding: 14px 16px;
     width: 13%;
-} */
+}
 
 .tabright{
-    
+    background-color: #AA1E1E;
     color: #eaeaea;
     float: right;
     border: none;
-
+    outline: none;
     text-decoration: none;
     text-align: center;
     
     cursor: pointer;
-    font-size: 3vh;
+    font-size: 30px;
     padding: 17px 14px;
     width: 13%;
-    /* height: 100%; */
+    height: 100%;
 }
 
-/* .tabaccount{
-    
+.tabaccount{
+    background-color: #AA1E1E;
     color: #eaeaea;
     float: right;
     border: none;
-
+    outline: none;
     cursor: pointer;
     text-align: center;
     font-size: 30px;
     padding: 14px 16px;
     width: 5%;
     margin-left: 50px;
-} */
+}
 
 @media screen and (max-width: 850px){
     .tabaccount, .tabright{
-        font-size: 3vh;
+        font-size: 8px;
         width: 17%;
         height: 100%;
     }
     .tabexpand{
-        font-size: 3vh;
+        font-size: 15px;
         width: 10%;
     }
 
     .searchbar{
         margin-left: 5%;
         width: 50%;
-        margin-top: 3.5px;
-        margin-bottom: 3.5px;
+        margin-top: 7px;
     }
     img{
         display: none;
@@ -142,16 +142,10 @@ img{
 
 @media screen and (max-width: 1350px) and (min-width: 851px) {
     .tabaccount, .tabright{
-        font-size: 3.5vh;
+        font-size: 25px;
     }
     .tabexpand{
-        font-size: 3.5vh;
-    }
-    .searchbar{
-        margin: 5px;
-    }
-    img{
-        margin: 5px;
+        font-size: 25px;
     }
 }