/*rainbow style*/

        .rainbow {
  border-radius: 25px;
  /*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),
      #000000 0deg 90deg,
      #634F00 90deg 180deg,
      #A08000 180deg 270deg,
      #FFD800 270deg 360deg
    )
    1 stretch;
  background: rgb(255 255 255 / var(--opacity));
}

/** show a warning in browers that don't support it **/
.warning {
  margin: 2em;
  padding: 1em;
  border: 1px solid #ccc;
}
.warning p {
  margin: 0;
  padding: 0;
  text-align: center;
}
/* Animate when Houdini is available */
@supports (background: paint(houdini)) {
  @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 rotate {
    to {
      --angle: 360deg;
    }
  }

  .rainbow {
    animation: rotate 6s linear infinite, opacityChange 3s infinite alternate;
  }

  /* Hide the warning */
  .warning {
    display: none;
  }
}