body {
  background-color: var(--lg-green, var(--md-red, var(--blue)));
}

:root {
  --blue: #11668a;
  --green: #4f7c04;
  --red: #930f2c;
}

@media (min-width: 544px) {
  :root {
    --md-blue: var(--blue);
    --md-green: var(--green);
    --md-red: var(--red);
  }
}
@media (min-width: 1012px) {
  :root {
    --lg-blue: var(--blue);
    --lg-green: var(--green);
    --lg-red: var(--red);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.