refactor: Update dark mode styles and fix formatting in Post component

src/styles/global.css

@@ -47,6 +47,25 @@ body.dark {
   --image: url("../images/mode/moon.svg");
 }
 
+/* New rules for dark mode */
+body.dark,
+body.dark * {
+  color: var(--color-text);
+}
+
+body.dark strong,
+body.dark b {
+  color: var(--color-text);
+}
+
+.dark .prose * {
+  color: var(--color-text);
+}
+
+.dark .prose a {
+  color: var(--color-primary);
+}
+
 /* 4 */
 body.light {
   --color-primary: #CD104D;
@@ -59,4 +78,74 @@ body.light {
   --image: url("../images/mode/sun.svg");
 }
 
-@import "custom.css";
+@import "custom.css";
+
+/* Removing the backticks from inline code-blocks that were added by Tailwind */
+.prose code::before,
+.prose code::after {
+    content: "" !important;
+}
+
+/* Removing the " from quotes that were added by Tailwind */
+.prose blockquote p:first-of-type::before,
+.prose blockquote p:last-of-type::after {
+    content: "" !important;
+}
+
+/* Remove the boldness from the quotes */
+.prose blockquote {
+    font-weight: normal !important;
+}
+
+/* Adding more side space to the inline code blocks */
+.prose p code.language-text,
+.prose li code.language-text,
+.prose th code.language-text,
+.prose tr code.language-text,
+.prose td code.language-text {
+    padding: 2px 5px 1px 5px;
+    font-weight: normal;
+}
+
+/* Align images in blog post to the center of the page */
+.prose p>img {
+    margin: auto;
+}
+
+/*
+ Fixing the issue with the anchor link from the "gatsby-remark-autolink-headers" plugin
+ being always visible after migrating from "gatsby-transformer-remark" to "gatsby-plugin-mdx"
+*/
+.prose h1>a.gatsby-remark-autolink-header-anchor,
+.prose h2>a.gatsby-remark-autolink-header-anchor,
+.prose h3>a.gatsby-remark-autolink-header-anchor,
+.prose h4>a.gatsby-remark-autolink-header-anchor,
+.prose h5>a.gatsby-remark-autolink-header-anchor {
+    visibility: hidden;
+    display: inline-block;
+    margin-left: 10px;
+}
+
+.prose h1:hover>a.gatsby-remark-autolink-header-anchor,
+.prose h2:hover>a.gatsby-remark-autolink-header-anchor,
+.prose h3:hover>a.gatsby-remark-autolink-header-anchor,
+.prose h4:hover>a.gatsby-remark-autolink-header-anchor,
+.prose h5:hover>a.gatsby-remark-autolink-header-anchor {
+    visibility: visible;
+}
+
+@keyframes border-move {
+    0% {
+        border-color: lightgreen;
+        transition: all 0.5s ease-in-out;
+    }
+    100% {
+        border-color: rgba(154, 228, 17, 0.623);
+        transition: all 0.5s ease-in-out;
+    }
+}
+
+.resume {
+    border: 2px solid lightgreen;
+    animation: border-move 2s infinite;
+}