:root {
  --angle: 45deg;
  --opacity: 0.5;
}

/**,
*::before,
*::after {
  box-sizing: border-box;
}*/
.rainbow {
  width: 400px;
  height: 60px;
  border-radius: 100vmax;
  padding: 2rem;
  margin: auto;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 1.5em;
  --border-size: 0.3rem;
  border: var(--border-size) dotted transparent;
  background-image: linear-gradient(to right, rgb(255, 255, 255, var(--opacity)), rgb(255, 255, 255, var(--opacity))), conic-gradient(from var(--angle), #d53e33 0deg 45deg, #fbb300 90deg 135deg, #377af5 180deg 225deg, #399953 270deg 315deg, #d53e33 355deg 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0.5;
  inherits: false;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes opacityChange {
  to {
    --opacity: .8;
  }
}
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}
.rainbow {
  animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
}

/*

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: grid;
  place-content: center;
  gap: 0.5em;

  text-align: center;
  line-height: 1.42;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}
*/

/*# sourceMappingURL=css-border-animations.css.map */