body {

  font-family: Avenir Next, Avenir, SegoeUI, sans-serif;

  background-color: darkslateblue;

}

​

​

@supports (--css: variables) {

  body::after {

    content: var(--bp, 'narrow');

    position: fixed;

    top: 1em;

    right: 1em;

    color: darkslategray;

    background-color: lightgoldenrodyellow;

    padding: .5em;

    outline: 1px solid khaki;

  }

​

  @media (min-width: 25em) {

    :root {--bp: 'also narrow'}

  }

​

  @media (min-width: 35em) {

    :root {--bp: 'lukewarm'}

  }

​

  @media (min-width: 45em) {

    :root {--bp: 'getting slightly wide'}

  }

​

  @media (min-width: 45em) {

    :root {--bp: 'pretty wide, really.'}

  }

}