Green is good (#168)

* Green is good

* Green is good

Author: estelle

feature-queries/and.html

@@ -14,8 +14,8 @@
       }
       @supports (display: grid) and (shape-outside: circle()) {
         .box {
-          border: 4px dashed red;
-          color: red;
+          border: 4px dashed darkgreen;
+          color: darkgreen;
         }
       }
     </style>
@@ -25,7 +25,7 @@
     <section class="preview">
       <div class="box">
         If your browser supports display: grid and shape-outside: circle(), the
-        content will be red with a dashed border.
+        content will be darkgreen with a dashed border.
       </div>
     </section>
 
@@ -36,15 +36,15 @@
 }
 @supports (display: grid) and (shape-outside: circle()) {
   .box {
-    border: 4px dashed red;
-    color: red;
+    border: 4px dashed darkgreen;
+    color: darkgreen;
   }
 }</textarea
     >
 
     <textarea class="playable playable-html" style="height: 120px">
 <div class="box">
-If your browser supports display: grid and shape-outside: circle(), the content will be red with a dashed border.
+If your browser supports display: grid and shape-outside: circle(), the content will be darkgreen with a dashed border.
 </div></textarea
     >
 

feature-queries/not.html

@@ -14,8 +14,8 @@
       }
       @supports not (row-gap: 10px) {
         .box {
-          border: 4px dashed red;
-          color: red;
+          border: 4px dashed darkgreen;
+          color: darkgreen;
         }
       }
     </style>
@@ -25,7 +25,7 @@
     <section class="preview">
       <div class="box">
         If your browser does not support row-gap, the content will be
-        red with a dashed border.
+        darkgreen with a dashed border.
       </div>
     </section>
 
@@ -36,15 +36,15 @@
 }
 @supports not (row-gap: 10px) {
   .box {
-    border: 4px dashed red;
-    color: red;
+    border: 4px dashed darkgreen;
+    color: darkgreen;
   }
 }</textarea
     >
 
     <textarea class="playable playable-html" style="height: 120px">
 <div class="box">
-If your browser does not support row-gap, the content will be red with a dashed border.
+If your browser does not support row-gap, the content will be darkgreen with a dashed border.
 </div></textarea
     >