.border-anumation-wrapper {
  --card-size: 200px;
  --card-after-size: 206px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: -5;
  padding-top: 20px;
}
.ba-card-wrapper {
  --card-size: 200px;
  --card-after-size: 206px;
}
.ba-card {
  height: var(--card-size);
  width: var(--card-size);
  /* border: 1px black solid; */
  position: relative;
  background-color: rgb(31 29 29);
}
.ba-card::after,
.ba-card::before {
  content: "";
  height: var(--card-after-size);
  width: var(--card-after-size);
  position: absolute;
  z-index: -1;
  transform: translate(-3px, -3px);
  background-image: conic-gradient(red, blue, green, yellow, red);
  border-radius: 5px;
}
.ba-card::before {
  filter: blur(1.5rem);
}

/*
          
          for card 2 to animate the border we can take one color
          
          */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.ba-card-2 {
  height: var(--card-size);
  width: var(--card-size);
  position: relative;
  background-color: rgb(31 29 29);
}
.ba-card-2::after,
.ba-card-2::before {
  content: "";
  height: var(--card-after-size);
  width: var(--card-after-size);
  position: absolute;
  z-index: -1;
  transform: translate(-3px, -3px);
  background-image: conic-gradient(
    from var(--angle),
    transparent 50%,
    rgb(247, 212, 16)
  );
  border-radius: 5px;
  animation: border-spin 1s ease-in-out 5;
}
.ba-card-2::before {
  filter: blur(1.5rem);
}

@keyframes border-spin {
  0% {
    --angle: 0deg;
  }
  25% {
    --angle: 90deg;
  }
  45% {
    --angle: 180deg;
  }
  100% {
    --angle: 360deg;
  }
}

.glow::after,
.glow::before {
  content: "";
  height: inherit;
  width: inherit;
  position: absolute;
  z-index: -1;
  background-image: conic-gradient(red, blue, green, yellow, red);
  border-radius: 5px;
}