Upload 2 files

CSS/chat_style.css

@@ -0,0 +1,23 @@
+.gradio-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Occupy full height of the container */
+}
+
+.chat-box {
+  flex-grow: 1; /* Allow the chat box to expand and fill available space */
+  overflow-y: auto; /* Add vertical scroll if content overflows */
+}
+
+/* Media Queries for Different Screen Sizes */
+@media (max-width: 768px) {
+  /* Styles for tablets and smaller screens */
+  .chat-container {
+    flex-direction: column; /* Stack chat boxes vertically */
+  }
+}
+
+@media (max-width: 480px) {
+  /* Styles for mobile phones */
+  /* Add more specific styles as needed */
+}

CSS/style.css

@@ -0,0 +1,32 @@
+:root {
+  font-size: 1.2em; 
+}
+
+
+h1 {
+  text-align: center;
+  display: block;
+  font-size: 2em; 
+}
+
+h2 {
+  font-size: 1.4em; 
+}
+
+h3 {
+  text-align: left;
+  font-size: 1.3em; 
+}
+
+.chat_container {
+    height: 80vh;
+}
+
+#PG_Logo {
+  display: block; /* Ensure the image behaves like a block element */
+  margin-left: auto; /* Automatically set the left margin to push the image to the right */
+}
+
+#Logo {
+  float: left; /* Use float: left to align the image to the left */
+}