app/styles/container.css

@@ -9,7 +9,7 @@
 }
 
 .left-panel {
-    margin-top: 10vh;
+    margin-top: 5em;
     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,7 @@
 }
 
 .conversation-container {
-    margin-top: 10vh;
+    margin-top: 5em;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */

app/styles/global.css

@@ -3,7 +3,6 @@ body {
     height: 100vh;
     overflow: hidden;
     position: relative;
-    top: 1vh;
 }
 
 body {

app/styles/header.css

@@ -1,13 +1,13 @@
 header{
     position: absolute;
     padding: 0 20px;
-    top: 0;
+    top: 2em;
     left: 0;
     width: 100%;
-    height: 10vh;
+    height: 5em;
     display: flex;
     align-items: center;
-    margin: 1.5vh 0;
+    font-size: 1em;
 }
 
 .hamburger{
@@ -40,14 +40,16 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    gap: 15px;
-    width: 25vw;
-    height: 5vh;
+    top: 1em;
+    gap: 1em;
+    width: 25em;
+    height: 3em;
 }
 
 .nav-btn{
     background-color: transparent;
     border: none;
+    font-size: 0.9em;
 }
 
 .header-logo{
@@ -63,8 +65,9 @@ header{
 }
 
 .login-button .header-login-button{
+    font-size: 1em;
     position: absolute;
-    top: 2.5vh;
+    top: 1.5em;
     right: 1vw;
     padding: 10px 20px;
     background-color: var(--input-button-color);

app/styles/models.css

@@ -61,11 +61,11 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    color: var(--text-color); /* Use variable for overlay text color */
+    color: var(--overlay-text-color); /* Use variable for overlay text color */
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: x-large;
+    font-size: large;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
@@ -176,11 +176,10 @@
     color: var(--text-color); /* Text color */
     font-size: medium; /* Font size for dropdown */
     cursor: pointer; /* Cursor change on hover */
-    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
+    transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
+}
+#model-select option:hover{
+    background-color: gray;
 }
 
-#model-select:hover {
-    background-color: var(--button-hover-background-color); /* Change background on hover */
-    border-color: var(--button-background-color); /* Change border color on hover */
-}
 

app/styles/variables.css

@@ -19,7 +19,8 @@
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
-    --burger-menu-background-color: #79832e;  
+    --burger-menu-background-color: #79832e;  /*NEW*/
+    --overlay-text-color:white; /*NEW*/
     
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */