* {
  box-sizing: border-box;
}
:root {
  --color-sucess: lightgreen;
  --color-failure: lightcoral;
}
body {
  padding: 15px;
}
table,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
}
th,
tr:nth-child(even) {
  background: lightgray;
}

#media-type-all,
#media-type-print,
#media-type-screen,
#any-hover-none,
#any-hover-hover,
#any-pointer-none,
#any-pointer-coarse,
#any-pointer-fine,
#color-gamut-srgb,
#color-gamut-p3,
#color-gamut-rec2020,
#forced-colors-none,
#forced-colors-active,
#hover-none,
#hover-hover,
#inverted-colors-none,
#inverted-colors-inverted,
#orientation-landscape,
#orientation-portrait,
#overflow-block-none,
#overflow-block-scroll,
#overflow-block-optional-paged,
#overflow-block-paged,
#overflow-inline-none,
#overflow-inline-scroll,
#pointer-none,
#pointer-coarse,
#pointer-fine,
#prefers-color-scheme-light,
#prefers-color-scheme-dark,
#prefers-reduced-motion-no-preference,
#prefers-reduced-motion-reduce {
  background: var(--color-failure);
}
#media-type-all:before,
#media-type-print:before,
#media-type-screen:before,
#any-hover-none:before,
#any-hover-hover:before,
#any-pointer-none:before,
#any-pointer-coarse:before,
#any-pointer-fine:before,
#color-gamut-srgb:before,
#color-gamut-p3:before,
#color-gamut-rec2020:before,
#forced-colors-none:before,
#forced-colors-active:before,
#hover-none:before,
#hover-hover:before,
#inverted-colors-none:before,
#inverted-colors-inverted:before,
#orientation-landscape:before,
#orientation-portrait:before,
#overflow-block-none:before,
#overflow-block-scroll:before,
#overflow-block-optional-paged:before,
#overflow-block-paged:before,
#overflow-inline-none:before,
#overflow-inline-scroll:before,
#pointer-none:before,
#pointer-coarse:before,
#pointer-fine:before,
#prefers-color-scheme-light:before,
#prefers-color-scheme-dark:before,
#prefers-reduced-motion-no-preference:before,
#prefers-reduced-motion-reduce:before {
  content: 'no';
}

/* media-type */
/* ------------------------------ */
@media all {
  /* or: @media */
  #media-type-all {
    background: var(--color-sucess);
  }
  #media-type-all:before {
    content: 'yes';
  }
}
@media print {
  #media-type-print {
    background: var(--color-sucess);
  }
  #media-type-print:before {
    content: 'yes';
  }
}
@media screen {
  #media-type-screen {
    background: var(--color-sucess);
  }
  #media-type-screen:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* any-hover */
/* ------------------------------ */
@media (any-hover: none) {
  #any-hover-none {
    background: var(--color-sucess);
  }
  #any-hover-none:before {
    content: 'yes';
  }
}
@media (any-hover: hover) {
  #any-hover-hover {
    background: var(--color-sucess);
  }
  #any-hover-hover:before {
    content: 'yes';
  }
}
/* ------------------------------ */

/* any-pointer */
/* ------------------------------ */
@media (any-pointer: none) {
  #any-pointer-none {
    background: var(--color-sucess);
  }
  #any-pointer-none:before {
    content: 'yes';
  }
}
@media (any-pointer: coarse) {
  #any-pointer-coarse {
    background: var(--color-sucess);
  }
  #any-pointer-coarse:before {
    content: 'yes';
  }
}
@media (any-pointer: fine) {
  #any-pointer-fine {
    background: var(--color-sucess);
  }
  #any-pointer-fine:before {
    content: 'yes';
  }
}
/* ------------------------------ */

/* color-gamut */
/* ------------------------------ */
@media (color-gamut: srgb) {
  #color-gamut-srgb {
    background: var(--color-sucess);
  }
  #color-gamut-srgb:before {
    content: 'yes';
  }
}
@media (color-gamut: p3) {
  #color-gamut-p3 {
    background: var(--color-sucess);
  }
  #color-gamut-p3:before {
    content: 'yes';
  }
}
@media (color-gamut: rec2020) {
  #color-gamut-rec2020 {
    background: var(--color-sucess);
  }
  #color-gamut-rec2020:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* forced-colors */
/* ------------------------------ */
@media (forced-colors: none) {
  #forced-colors-none {
    background: var(--color-sucess);
  }
  #forced-colors-none:before {
    content: 'yes';
  }
}
@media (forced-colors: active) {
  #forced-colors-active {
    background: var(--color-sucess);
  }
  #forced-colors-active:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* hover */
/* ------------------------------ */
@media (hover: none) {
  #hover-none {
    background: var(--color-sucess);
  }
  #hover-none:before {
    content: 'yes';
  }
}
@media (hover: hover) {
  #hover-hover {
    background: var(--color-sucess);
  }
  #hover-hover:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* inverted-colors */
/* ------------------------------ */
@media (inverted-colors: none) {
  #inverted-colors-none {
    background: var(--color-sucess);
  }
  #inverted-colors-none:before {
    content: 'yes';
  }
}
@media (inverted-colors: inverted) {
  #inverted-colors-inverted {
    background: var(--color-sucess);
  }
  #inverted-colors-inverted:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* orientation */
/* ------------------------------ */
@media (orientation: portrait) {
  #orientation-portrait {
    background: var(--color-sucess);
  }
  #orientation-portrait:before {
    content: 'yes';
  }
}
@media (orientation: landscape) {
  #orientation-landscape {
    background: var(--color-sucess);
  }
  #orientation-landscape:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* overflow-block */
/* ------------------------------ */
@media (overflow-block: none) {
  #overflow-block-none {
    background: var(--color-sucess);
  }
  #overflow-block-none:before {
    content: 'yes';
  }
}
@media (overflow-block: scroll) {
  #overflow-block-scroll {
    background: var(--color-sucess);
  }
  #overflow-block-scroll:before {
    content: 'yes';
  }
}
@media (overflow-block: optional-paged) {
  #overflow-block-optional-paged {
    background: var(--color-sucess);
  }
  #overflow-block-optional-paged:before {
    content: 'yes';
  }
}
@media (overflow-block: paged) {
  #overflow-block-paged {
    background: var(--color-sucess);
  }
  #overflow-block-paged:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* overflow-inline */
/* ------------------------------ */
@media (overflow-inline: none) {
  #overflow-inline-none {
    background: var(--color-sucess);
  }
  #overflow-inline-none:before {
    content: 'yes';
  }
}
@media (overflow-inline: scroll) {
  #overflow-inline-scroll {
    background: var(--color-sucess);
  }
  #overflow-inline-scroll:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* pointer */
/* ------------------------------ */
@media (pointer: none) {
  #pointer-none {
    background: var(--color-sucess);
  }
  #pointer-none:before {
    content: 'yes';
  }
}
@media (pointer: fine) {
  #pointer-fine {
    background: var(--color-sucess);
  }
  #pointer-fine:before {
    content: 'yes';
  }
}
@media (pointer: coarse) {
  #pointer-coarse {
    background: var(--color-sucess);
  }
  #pointer-coarse:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* prefers-color-scheme */
/* ------------------------------ */
@media (prefers-color-scheme: light) {
  #prefers-color-scheme-light {
    background: var(--color-sucess);
  }
  #prefers-color-scheme-light:before {
    content: 'yes';
  }
}
@media (prefers-color-scheme: dark) {
  #prefers-color-scheme-dark {
    background: var(--color-sucess);
  }
  #prefers-color-scheme-dark:before {
    content: 'yes';
  }
}
/* ------------------------------ */
/* prefers-reduced-motion */
/* ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  #prefers-reduced-motion-no-preference {
    background: var(--color-sucess);
  }
  #prefers-reduced-motion-no-preference:before {
    content: 'yes';
  }
}
@media (prefers-reduced-motion: reduce) {
  #prefers-reduced-motion-reduce {
    background: var(--color-sucess);
  }
  #prefers-reduced-motion-reduce:before {
    content: 'yes';
  }
}
/* ------------------------------ */