Merge pull request 'Tried to make the website responsive' (#3) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/3

app/styles/header.css

@@ -10,6 +10,7 @@ header {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     font-family: var(--font-family);
+    height: 5vh;
 }
 
 header li {

app/styles/history.css

@@ -5,8 +5,8 @@
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    border-radius: 2em;
     margin: 1em;
+    border-radius: 2em;
 }
 
 .history {

app/styles/master.css

@@ -11,3 +11,4 @@
 @import './input.css';
 @import './faq.css';
 @import './scrollbar.css';
+@import './responsive.css';

app/styles/responsive.css

@@ -0,0 +1,34 @@
+/* responsive.css */
+
+/* Responsive behavior - applies only on smaller screens */
+@media (max-width: 1200px) {
+    /* Left panel as an overlay */
+    .left-panel {
+        margin: 0 auto;
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+    }
+
+    .left-panel.hidden {
+        width: 0; /* Set width to 0 when hidden */
+        visibility: hidden; /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    header {
+        height: 125px;
+    }
+
+    header li {
+        flex-direction: column;
+        display: block;
+        padding: 2px;
+    }
+
+    body {
+        margin-top: 100px;
+    }
+}