Make sure the "browser unsupported" message is styled properly

Author: Thibaut

assets/stylesheets/components/_fail.scss

@@ -1,4 +1,4 @@
-._fail {
+._fail { // Don't use CSS variables, in case the browser doesn't support them.
   display: block;
   position: relative;
   top: 1.5rem;
@@ -23,7 +23,7 @@
 ._fail-title {
   margin: 0 0 1rem;
   font-size: 1rem;
-  font-weight: var(--boldFontWeight);
+  font-weight: bold;
 }
 
 ._fail-text, ._fail-list {

assets/stylesheets/global/_base.scss

@@ -1,6 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
+  background: #fff; // fallback to show the error message to browsers that don't support CSS variables.
   background: var(--documentBackground);
 
   @include mobile { font-size: 93.75%; }
@@ -15,8 +16,9 @@ body {
   overflow: auto;
   font-size: 1em;
   font-weight: normal;
-  font-family: var(--baseFont);
+  font-family: $baseFont;
   line-height: 1.7;
+  color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
   color: var(--textColor);
   word-wrap: break-word;
   overflow-wrap: break-word;

assets/stylesheets/global/_variables.scss

@@ -1,5 +1,9 @@
+// Variables needed to style the error message for browsers that don't support CSS variables.
+$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+$textColor: #333;
+
 html {
-  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+  --baseFont: #{$baseFont};
   --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --boldFontWeight: 500;
   --bolderFontWeight: 600;