@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: orange; }

html:has(.main.rainbow) {
  animation: rainbow 8s linear infinite; }

@keyframes rainbow {
  0%   { --color: #ddaa33; }
  20%  { --color: #45fe57; }
  40%  { --color: #00fffb; }
  60%  { --color: #6eadff; }
  80%  { --color: #ff6ecf; }
  100% { --color: #ddaa33; }
}