diff --git a/Doxyfile b/Doxyfile
index 76d3d1587..f8f8c120b 100644
--- a/Doxyfile
+++ b/Doxyfile
@@ -1329,7 +1329,9 @@ HTML_STYLESHEET =
# This tag requires that the tag GENERATE_HTML is set to YES.
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css \
- doxygen-awesome-css/doxygen-awesome-sidebar-only.css
+ doxygen-awesome-css/doxygen-awesome-sidebar-only.css \
+ docs/main.css
+
# The HTML_EXTRA_FILES tag can be used to specify one or more extra images or
# other source files which should be copied to the HTML output directory. Note
diff --git a/docs/main.css b/docs/main.css
new file mode 100644
index 000000000..762da6178
--- /dev/null
+++ b/docs/main.css
@@ -0,0 +1,53 @@
+html {
+ font-size: 22px;
+}
+
+body {
+ padding: 1rem;
+}
+
+.header-style {
+ color: #10b981;
+ font-size: 24px;
+ font-family: Helvetica, Arial, serif
+}
+
+.text-style {
+ color: #49494a;
+ font-size: 17px;
+ font-family: Helvetica, Arial, serif
+}
+
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.api-group {
+ background-color: #c4c4c5;
+ color: white;
+ height: auto;
+ padding-left: 1rem;
+ text-size-adjust: 100%;
+}
+
+.api-groups {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ width: 100%;
+ grid-gap: 1rem;
+ align-items: start;
+}
+
+@media (min-width: 600px) {
+ .cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 900px) {
+ .cards {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
diff --git a/docs/main.md b/docs/main.md
index 2953e870c..e4ee2a23a 100644
--- a/docs/main.md
+++ b/docs/main.md
@@ -1,52 +1,3 @@
-
-