/* 1. Register a custom property for the gradient angle */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rainbow-border {
  padding: 20px;
  background-color: #111; /* Inside background color */
  color: #fff;

  /* 2. Set border thickness & radius */
  border: 1px solid transparent;
  border-radius: 12px;

  /* 3. Use the dynamic --angle variable inside linear-gradient */
  background-image: 
    linear-gradient(#111, #111), 
    linear-gradient(var(--angle), #ff0000, #ff7300, #fffb00, #00ff2b, #00e1ff, #7a00ff, #ff00c8, #ff0000);
  
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* 4. Animate the angle */
  animation: rotate-border 24s linear infinite;
}

/* 5. Keyframes to cycle the angle from 0 to 360 degrees */
@keyframes rotate-border {
  to {
    --angle: 360deg;
  }
}