app/styles/Login.css

@@ -15,7 +15,7 @@
 
 /* Popup content box */
 .popup-content {
-    background-color: var(--popup-background-color); /* Use variable for background color */
+    background: var(--popup-background-color); /* Use variable for background color */
     color: var(--popup-text-color); /* Use variable for text color */
     padding: 30px;
     border-radius: 10px;

app/styles/container.css

@@ -1,6 +1,7 @@
 /* container.css */
 .container,
 .content {
+    padding-top: 10vh;
     display: flex;
     height: 100vh;
     width: 100vw;
@@ -9,7 +10,6 @@
 }
 
 .left-panel {
-    margin-top: 10vh;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -25,7 +25,6 @@
 }
 
 .conversation-container {
-    margin-top: 10vh;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */

app/styles/header.css

@@ -11,31 +11,10 @@ header{
 }
 
 .hamburger{
-    position: absolute;
     display: none;
-    flex-direction: column;
-    cursor: pointer;
 }
 
-.hamburger span{
+.hamburger.open:nth-child(1)
-    width: 25px;
-    height: 3px;
-    background-color: white;
-    margin: 4px;
-    transition: 0.3s;
-}
-
-.hamburger.open span:nth-child(1){
-    transform: rotate(45deg) translate(5px, 10px);
-}
-.hamburger.open span:nth-child(2){
-    opacity: 0;
-}
-.hamburger.open span:nth-child(3){
-    transform: rotate(-45deg) translate(5px, -10px);
-}
-
-
 
 .nav-links{
     position: absolute;
@@ -66,6 +45,7 @@ header{
     position: absolute;
     top: 2.5vh;
     right: 1vw;
+    justify-self: flex-end;
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);

app/styles/responsive.css

@@ -104,38 +104,16 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .header-login-button{
+  .login-button button{
-    position: absolute;
+    margin: 20px 0;
-    top: 3.5vh;
-    right: 5vw;
   } 
 
   .hamburger.open{
     margin-top: 0.5vh;
-    padding-left: 1vw;
   }
 
   .nav-links{
-    display: none;
+    position: fixed;
-    position: absolute;
-    top: 10vh;
-    left: 0;
-    background-color: var(--burger-menu-background-color);
-    width: 100%;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 10px;
-    height: fit-content;
-  }
-
-  .nav-links.active{
-    display: flex;
-  }
-
-  .nav-btn{
-    width: 100%;
-    text-align: left;
-    padding: 10px;
   }
   
   .hamburger {

app/styles/variables.css

@@ -29,7 +29,6 @@
     --faq-item-text-color: #333; /* Text color for FAQ items */
     --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
 
-    --popup-background-color: #8B9635
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */
     --font-family: 'Poppins', 'sans-serif';/* Default font family */