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

.rainbow {
  border: 0.15rem solid transparent;
  border-image: conic-gradient( from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg ) 1 stretch;
  animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
  overflow: hidden;
  border-radius: 0.375rem;
}

.rainbow-border {
  position: relative;
  display: inline-block;
  border-radius: 0.375rem;
  padding: 2px;
  background: conic-gradient( from var(--angle), #d53e33 0deg 90deg, #fbb300 90deg 180deg, #377af5 180deg 270deg, #399953 270deg 360deg );
  animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
  padding: 2px;
}

.rainbow-content {
  background: white;
  border-radius: 0.375rem;
  overflow: hidden;
  padding: 1rem;
}

@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;
  }
}