app/styles/output.css

@@ -62,7 +62,6 @@
     background-color: var(--button-background-color);
     border-radius: 50%;
     padding: 10px;
-    padding-top: 0;
     transition: background-color 0.3s ease;
 }
 

app/styles/responsive.css

@@ -1,68 +1,76 @@
+/* responsive.css */
+
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  header li{
+
-    display: block;
+    /* 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;
+    }
+
+    .conversation-container.expanded {
+
+        width: 0;
+        /* Set width to 0 when hidden */
+        visibility: hidden;
+        /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .conversation-container.collapsed {
+        margin: 0 auto;
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+        margin-left: 0;
+
+    }
+}
+
+/* Responsive design adjustments */
+@media (max-width: 768px) {
+  .title {
+    font-size: 1.5rem;
   }
 
-  .container {
+  .subtitle {
-    display: flex;
+    font-size: 1.25rem;
-    justify-content: center; /* Centers horizontally */
-    width: 90vw;
-    margin-top: 10vh;
   }
 
-  .left-panel {
+  .subsection-title {
-    display: none; /* Initially hidden */
+    font-size: 1rem;
-    min-width: 90%; /* Takes full width when shown */
-    margin: 0;
   }
 
-
+  .paragraph {
-  .conversation-container {
+    font-size: 0.9rem;
-      width: 90%;
-  }
-
-  .left-panel.visible {
-      display: block;
-  }
-
-  .conversation-container.collapsed {
-      display: none;
-  }
-
-  .conversation-container.expanded {
-      width: 100%;
-  } 
-  
-  .grid {
-    grid-template-columns: 1fr; /* One item per line */
-  }
-
-  .model-box {
-      max-width: none; /* Remove max-width constraint */
-      margin: 0 auto; /* Center each model-box */
-  }
-
-  .input {
-    grid-column: 1 / -1;
-    flex-direction: row;
-    gap: 10px;
-    padding: 0.5em;
-    margin: 0 auto;
-    align-items: center;
-    width: 90%;
-  }
-
-  .input input {
-      font-size: 1em; /* Adjust font size */
-      max-width: 65%;
-      margin-right: 0;
-  }
-
-  .input button {
-      height: 40px; /* Adjust button height */
-      width: 40px; /* Adjust button width */
-      font-size: 1.2em; /* Adjust button font size */
-      margin: auto;
   }
 }