<h2>CSS Reflections</h2>

/*
* Feature Queries - CSS Detection (Example-1)
* 
* Cases:
* - support FQ and variable declaration -> bg-color: #98FB98 => "palegreen". Browser support: Firefox 31+
* - support FQ and not support variable declaration -> bg-color: tomato
* - don't support FQ and variable declaration -> bg-color: khaki
*/



/* GENERAL STYLES */

* {
  padding: 0;
  margin: 0;
}

body {
  font: 100%/1 Helvetica, Arial, sans-serif;
  margin: 50px auto 0;
  text-align: center;
}

h2 {
  color: #2a3744;
  font-size: 3em;
}


/* FQ STYLES */

body {
  --bg-color: #98FB98;
  background-color: khaki;
}

@supports (background-color: var(--bg-color)) {
  body {
    background-color: var(--bg-color);
  }
}

@supports not(background-color: var(--bg-color)) {
  body {
    background-color: tomato;
  }
}