app/styles/header.css

@@ -7,14 +7,12 @@ header{
     height: 10vh;
     display: flex;
     align-items: center;
-    justify-content: center;
     font-size: 1em;
     z-index: 999;
 }
 
 .hamburger{
     position: absolute;
-    left: 5vw;
     display: none;
     flex-direction: column;
     cursor: pointer;
@@ -56,7 +54,7 @@ header{
     font-size: 0.9em;
     height: 50%;
     border-radius: 5px;
-    padding: 2px 15px;
+    padding: 0.2em 15px;
     font-family: var(--font-family);
 }
 
@@ -65,6 +63,7 @@ header{
 }
 
 .header-logo{
+    margin:auto;
     width: 250px;
     height: 5vh;
     background-image: url(../../public/img/logo.png);

app/styles/input.css

@@ -2,24 +2,23 @@
 .input {
     grid-column: 2/3;
     grid-row: 4/5;
-    border-radius: 8px;
+    border-radius: 20px;
     background-color: var(--input-background-color);
     padding: 1em;
-    padding-left: 0.5em;
-    padding-right: 0;
-    margin: 0 10px;
-    margin-bottom: 10px;
+    margin: 0 1em;
+    margin-bottom: 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: auto;
+    gap: 10px;
     height: 10vh;
 }
 
 .input input {
     flex-grow: 1;
     padding: 5px;
-    font-size: 1em;
+    font-size: 1.2em;
     border-radius: 8px;
     border: 2px solid var(--input-button-color);
     outline: none;
@@ -35,17 +34,16 @@
 }
 
 .input button {
-    padding: 5px;
+    padding: 1em;
     margin: 5px;
-    margin-left: 0;
     background-color: var(--input-button-color);
     color: var(--user-message-text-color); /* Use variable for button text color */
     border: none;
-    border-radius: 8px;
+    border-radius: 50%;
     font-size: 1.5em;
     cursor: pointer;
     height: 50px;
-    width: 75px;
+    width: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -55,7 +53,7 @@
 }
 
 .input button img {
-    height: 20px;
+    height: 1em;
 }
 
 .input button:hover {

app/styles/responsive.css

@@ -98,10 +98,11 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .header-logo{
-    position: relative;
-    margin-left: -40px;
-  }
+  .header-login-button{
+    position: absolute;
+    top: 3.5vh;
+    right: 5vw;
+  } 
 
   .hamburger.open{
     margin-top: 0.5vh;
@@ -123,23 +124,17 @@
 
   .nav-links.active{
     display: flex;
-    height: fit-content;
   }
 
   .nav-btn{
     width: 100%;
     text-align: center;
     padding: 10px;
-    height: 50px;
   }
   
   .hamburger {
     display: flex;
   }
-
-  .header-login-button{
-    right: 5vh;
-  }
 }
 
 /* Responsive adjustments for the settings */