add light green to first color, add colors on links

src/css/custom.css

@@ -11,17 +11,15 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #121213;
+  --ifm-color-primary: #0d0d0d;  
   --ifm-color-dark-green: #577018;
   --ifm-color-light-green:#8EA34E;
-  --ifm-color-yellow: #FFC729;
-  --ifm-color-orange: #E07931;
-  --ifm-color-red: #B3433B;
-  --ifm-color-purple: #805D93;
-  --ifm-color-light: #ffffff;
-  --ifm-color-dark: #121213;
-  --ifm-color-dark-orange: #160e05;
-  --ifm-link-color: #FFC729;
+  --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; 
@@ -46,11 +44,11 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
-h1, h3 {
+hgroup {
   font-family: var(--ifm-font-family-base);
   font-weight: 700;
 }
-  
+
 p {
   font-family: var(--ifm-font-family);
   font-weight: 500; 
@@ -58,11 +56,11 @@ p {
 
 /************ Navbar style ***********/
 .navbar {
-  background-color: var(--ifm-color-purple);
-/*background-color: var(--ifm-color-orange); */ 
-  font-size: 16px;
+  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 {
@@ -79,15 +77,15 @@ p {
 
 /************ footer style ***********/
 #__docusaurus > footer > div > div.text--center > div > a {
-  color: unset;
+  color: unset;  
 }
 
 #__docusaurus > footer > div > div.text--center > div > a:hover {
-  color: var(--ifm-color-dark-orange);
+  color: var(--ifm-color-frame);
 }
 
 .footer--dark {
-  background-color: var(--ifm-color-orange);
+  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);

src/pages/index.module.css

@@ -6,16 +6,14 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 4rem 0; 
   text-align: center;
   position: relative;
-  overflow: hidden;
- /* background-color: var(--ifm-color-dark-orange);
- background-color: var(--ifm-color-orange);*/
-  background-color: var(--ifm-color-purple);
+  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;
   }