add colors and fonts, check responsive values

src/components/HomepageFeatures.js

+/* eslint-disable linebreak-style */
+/* eslint react/prop-types: 0 */
 import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
@@ -41,16 +43,18 @@ const FeatureList = [
   },
 ];  
 
-// eslint-disable-next-line
+
 function Feature({Svg, title, description}) {
   return (
-    <div className={clsx("hero hero--primary text--center padding-horiz--md", styles.featureContainer)}>
-      <div className={styles.featureSvg}>
-        <Svg className={styles.svg} alt={title} />
-      </div>
-      <div className={styles.featureText}>
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <div className={clsx("hero container text--center padding-horiz--md")}>
+      <div className="row">
+        <div className={"col col--5"}>
+          <Svg className={styles.svg} alt={title} />
+        </div>
+        <div className={"col col--5"}>
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
       </div>
     </div>
   );

src/components/HomepageFeatures.module.css

 /* stylelint-disable docusaurus/copyright-header */
 
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
 .svg {
   height: 175px;
   width: 175px;
 }
-
-.featureContainer {
-  min-height: 200px;
-  padding: 2.5rem 0;
-  margin-bottom: -1px;
-  border-top: 1px solid rgb(238, 238, 238);
-  border-bottom: 1px solid rgb(238, 238, 238);
-  flex-direction: row;
-}
-
-.featureContainer > .featureSvg {
-  width: 50%;
-  flex-shrink: 1;
-  text-align: center;
-}
-
-.featureText {
-  padding-right: 20px;
-  width: 60%;
-  flex-shrink: 0;
-}

src/css/custom.css

@@ -5,32 +5,95 @@
  * work well for content-centric websites.
  */
 
+/******* google fonts imports *******/
+@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,600,700');
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
+  --ifm-color-primary: #0d0d0d;  
+  --ifm-color-dark-green: #577018;
+  --ifm-color-light-green:#8EA34E;
+  --ifm-color-frame: #FFC729;
+  --ifm-color-tonic-one: #E07931;
+  --ifm-color-tonic-two: #B3433B;
+  --ifm-color-tonic-three: #805D93;
+  --ifm-color-primary-dark: #0c0c0cb0;
+  --ifm-color-primary-light: #ffffff;
+  --ifm-code-font-size: 95%; 
+  --ifm-font-family-base: "Comfortaa", cursive;
+  --ifm-font-family: "Montserrat",  sans-serif; 
 }
 
 .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.9);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
 
+html[data-theme='dark'] {
+  --ifm-background-color: #18191a;
+  --ifm-background-surface-color: #18191a;
+  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);
+  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
+  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%);
+}
+
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+hgroup {
+  font-family: var(--ifm-font-family-base);
+  font-weight: 700;
+}
+
+p {
+  font-family: var(--ifm-font-family);
+  font-weight: 500; 
+}
+
+/************ Navbar style ***********/
+.navbar {
+  background-color: var(--ifm-color-light-green);
+  --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
+  font-family: var(--ifm-font-family-base);
+  font-weight: 700; 
+  font-size: 16px;
+}
+
+.navbar__title {
+  font-size: 18px;
+} 
+
+/************ main elements style***********/
 .sections {
   display: flex;
   align-items: center;
   padding: 2rem 0;
   width: 100%;
 }
+
+/************ footer style ***********/
+#__docusaurus > footer > div > div.text--center > div > a {
+  color: unset;  
+}
+
+#__docusaurus > footer > div > div.text--center > div > a:hover {
+  color: var(--ifm-color-frame);
+}
+
+.footer--dark {
+  background-color: var(--ifm-color-tonic-one);
+  color: var(--ifm-color-dark);
+  --ifm-footer-link-color: var(--ifm-color-dark);
+  --ifm-footer-title-color: var(--ifm-color-dark);
+  font-family: var( --ifm-font-family);
+}
+
+/************ sub-footer style ***********/
+.footer__bottom {
+  font-family: var(--ifm-font-family); 
+  font-weight: 600;
+} 

src/pages/index.module.css

@@ -6,13 +6,14 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 4rem 0; 
   text-align: center;
   position: relative;
-  overflow: hidden;
+  overflow: hidden visible;
+  background-color: var(--ifm-color-light-green);
 }
 
-@media screen and (max-width: 966px) {
+ @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }