CSS Update React

app/styles/faq.css

@@ -1,6 +1,51 @@
-.faq-background{
-    width: 100vw;
-    height: 100vh;
-    color: white;
-    background-color: white;
-}
+/* Make sure the parent container of #faq takes up the full viewport height */
+.faq-container {
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center;     /* Center vertically */
+    height: 100vh;           /* Full viewport height */
+    padding: 0 10px;         /* Optional padding to ensure spacing on small screens */
+}
+
+#faq {
+    max-width: 800px;
+    width: 90%;
+    padding: 20px;
+    background-color: #222;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    overflow-y: scroll; /* Allow vertical scrolling if content overflows */
+    margin: 0 auto;
+    height: 80vh;
+}
+
+#faq h2 {
+    text-align: center;
+    color: #00ccff;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.faq-item {
+    margin-bottom: 20px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #333;
+}
+
+.faq-item h3 {
+    color: #00ccff;
+    margin-bottom: 10px;
+    font-size: 1.5em;
+}
+
+.faq-item p {
+    color: #ddd;
+    font-size: 1.1em;
+    line-height: 1.5;
+}
+
+.faq-item:hover {
+    background-color: #444;
+    transition: background-color 0.3s;
+}