/**
  Browser should support Houdini API
*/

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

:root {
  --bg-background: #111827;
  --clr-card: #1f2937;
  --clr-1: #0b615e;
  --clr-2: #26b5b3;
  --clr-3: #ffffff;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

 

.card {
  position: relative;
 
  border-radius: 0.45rem;
  cursor: pointer;
  background-color:rgba(20,38,63,0.75)
}

.card::after,
.card::before {
  content: " ";
  position: absolute;
  z-index: -1;
  inset: -0.5rem;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-card),
    var(--clr-1),
    var(--clr-2),
    var(--clr-3),
    var(--clr-2),
    var(--clr-1),
    var(--clr-card)
  );
  border-radius: inherit;
  animation: rotate 2.5s linear infinite;
}

.card::after {
  filter: blur(3rem);
}

@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}