Styling to match theme

docs/about/faq.mdx

@@ -85,11 +85,11 @@ export const PythonFaq = [
 
 export const DevicesFaq = [
   {
-    title: "How do I turn **off** an ESP32 T-Beam based device?",
+    title: "How do I turn off an ESP32 T-Beam based device?",
     content: `Hold down the left PWR button for about 10 seconds and the display should turn off.`,
   },
   {
-    title: "How do I turn **on** an ESP32 T-Beam based device?",
+    title: "How do I turn on an ESP32 T-Beam based device?",
     content: `Push the left PWR button for about 1 second.`,
   },
   {

src/components/FaqAccordion.tsx

@@ -6,9 +6,10 @@ import {
   AccordionItemHeading,
   AccordionItemPanel,
 } from "react-accessible-accordion";
-import "react-accessible-accordion/dist/fancy-example.css";
 import ReactMarkdown from "react-markdown";
 
+import "../css/faq.css";
+
 export interface Faq {
   title: string;
   content: string;

src/css/faq.css

@@ -0,0 +1,46 @@
+.accordion {
+    border-radius: 2px;
+    border: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.accordion__item + .accordion__item {
+    border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.accordion__button {
+    background-color: var(--ifm-background-surface-color);
+    border: none;
+    cursor: pointer;
+    padding: calc(var(--ifm-pre-padding)/1.5);
+    text-align: left;
+    width: 100%;
+}
+
+.accordion__button:hover {
+    background-color: var(--ifm-footer-background-color);
+}
+
+.accordion__button:before {
+    border-bottom: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    content: '';
+    display: inline-block;
+    height: 10px;
+    margin-right: 12px;
+    transform: rotate(-45deg);
+    width: 10px;
+}
+
+.accordion__button[aria-expanded='true']::before,
+.accordion__button[aria-selected='true']::before {
+    transform: rotate(45deg);
+}
+
+[hidden] {
+    display: none;
+}
+
+.accordion__panel {
+    background: var(--ifm-footer-background-color);
+    padding: var(--ifm-pre-padding);
+}