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

.border-glow {
  margin: 0 auto;
  padding: 2em;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

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

.border-glow::after,
.border-glow::before {
  content: "";
  position: absolute;
  height: 102%;
  width: 102%;
  background-image: conic-gradient(
    from var(--angle),
    #06B6D4,
    #182e32,
    #0a0a0a,
    #182e32,
    #06B6D4
  );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -10;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}
.border-glowglow::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
/* 
.border-glow:after {
  animation-direction:alternate;
}

@keyframes glow-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */