rendered css with proper fallbacks

Author: royalfig

main.css

@@ -39,7 +39,7 @@ html {
   font-size: 1rem;
   line-height: 1.5;
   background-color: #e6e6e6;
-  background-color: var(--surface1);
+  background-color: var(--surface1, #e6e6e6);
 }
 
 body {
@@ -99,7 +99,7 @@ body {
   font-weight: 600;
   line-height: 1;
   color: #111111;
-  color: var(--element1);
+  color: var(--element1, #111111);
   cursor: pointer;
   background: none;
   border: none;
@@ -113,7 +113,7 @@ body {
   margin-left: 7px;
   fill: none;
   stroke: #222222;
-  stroke: var(--element2);
+  stroke: var(--element2, #222222);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 1.5px;
@@ -123,17 +123,17 @@ body {
 .color-mode__btn:focus svg, .color-mode__btn:focus {
   outline: none;
   fill: #fff7d6;
-  fill: var(--tertiary);
+  fill: var(--tertiary, #fff7d6);
 }
 
 .color-mode__section {
   max-width: 640px;
   padding: 0.5rem 1rem;
   margin-bottom: 5rem;
   color: #111111;
-  color: var(--element1);
+  color: var(--element1, #111111);
   background-color: #e6e6e6;
-  background-color: var(--surface1);
+  background-color: var(--surface1, #e6e6e6);
   border-radius: var(--radius);
   box-shadow: var(--box-shadow);
   transition: all 0.2s ease-in;
@@ -152,7 +152,7 @@ body {
 
 .color-mode h2 {
   color: #222222;
-  color: var(--element2);
+  color: var(--element2, #222222);
 }
 
 .color-mode__link-container {
@@ -165,12 +165,12 @@ body {
   padding: 0.5rem 1rem;
   font-weight: 600;
   color: #111111;
-  color: var(--element1);
+  color: var(--element1, #111111);
   text-decoration: none;
   background-color: #e6e6e6;
-  background-color: var(--surface1);
+  background-color: var(--surface1, #e6e6e6);
   border-color: #01408e;
-  border-color: var(--primary);
+  border-color: var(--primary, #01408e);
   border-style: solid;
   border-width: 2px;
   border-radius: var(--radius);
@@ -179,18 +179,18 @@ body {
 
 .color-mode__link:hover, .color-mode__link:focus {
   color: #eee;
-  color: var(--elementInverse);
+  color: var(--elementInverse, #eee);
   background-color: #01408e;
-  background-color: var(--primary);
+  background-color: var(--primary, #01408e);
 }
 
 .color-mode__excerpt {
   padding: 0.5rem 1.5rem;
   margin: 1rem;
   color: #222222;
-  color: var(--element2);
+  color: var(--element2, #222222);
   background-color: #f2f2f2;
-  background-color: var(--surface2);
+  background-color: var(--surface2, #f2f2f2);
   border-radius: var(--radius);
 }
 
@@ -203,10 +203,10 @@ body {
 
 .color-mode__excerpt a {
   color: #01408e;
-  color: var(--primary);
+  color: var(--primary, #01408e);
 }
 
 .color-mode__excerpt a:hover, .color-mode__excerpt a:focus {
   color: #3c5d5c;
-  color: var(--secondary);
+  color: var(--secondary, #3c5d5c);
 }