:root {
  --angle: 45deg;
  --opacity: 0.5;
}
/*
*,
*::before,
*::after {
  box-sizing: border-box;
}*/

.rainbow {
 /* width: 400px;
  height: 300px;*/
  border-radius: 10px;
 /* padding: 2rem;*/
  margin: auto;

  display: grid;
  place-content: center;
  text-align: center;

  font-size: 1.5em;

  --border-size: 0.3rem;
  border: var(--border-size) solid transparent;

  /* Paint an image in the border */
  border-image: conic-gradient(
      from var(--angle),
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    )
    1 stretch;
  background: rgb(255 255 255 / var(--opacity));
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: false;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes opacityChange {
  to {
    --opacity: 1;
  }
}

@keyframes spinGradient   {
  to {
    --angle: 360deg;
  }
}

.rainbow {
  /*animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;*/

  animation: spinGradient 10s linear infinite, opacityChange 7s infinite alternate;
}