.pride-border {
  border-image: conic-gradient(from var(--angle),
      #5BCEFA 0 8%,
      #F5A9B8 8% 16%,
      #FFFFFF 16% 24%,
      #F5A9B8 24% 32%,
      #5BCEFA 32% 40%,
      #FCF434 40% 48%,
      #FFFFFF 48% 56%,
      #9C59D1 56% 64%,
      #2C2C2C 64% 72%,
      #FD8BA8 72% 79%,
      #FBF2FF 79% 86%,
      #C76BC5 86% 93%,
      #FDD768 93% 100%) 1;
  animation: 30s rotate linear infinite;
}

.pride-line {
  border-image: linear-gradient(to right,
      #5BCEFA 0,
      #5BCEFA 8%,
      #F5A9B8 8%,
      #F5A9B8 16%,
      #FFFFFF 16%,
      #FFFFFF 24%,
      #F5A9B8 24%,
      #F5A9B8 32%,
      #5BCEFA 32%,
      #5BCEFA 40%,
      #FCF434 40%,
      #FCF434 48%,
      #FFFFFF 48%,
      #FFFFFF 56%,
      #9C59D1 56%,
      #9C59D1 64%,
      #2C2C2C 64%,
      #2C2C2C 72%,
      #FD8BA8 72%,
      #FD8BA8 79%,
      #FBF2FF 79%,
      #FBF2FF 86%,
      #C76BC5 86%,
      #C76BC5 93%,
      #FDD768 93%,
      #FDD768 100%) 1;
}

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

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