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

:root {
  --color-1: #052b2f;
  --color-2: #073438;
  --color-3: #0e4b50;
  --color-4: #2d8f85;
  --color-5: #637c54;
  --color-text: #abd494;
}

body {
  color: var(--color-text);
  background: var(--color-2);
}

main {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
}

.card {
  height: 50vh;
  aspect-ratio: 1/1.15;
  background-color: var(--color-1);
  border-radius: .5rem;

  position: relative;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  inset: -.375rem;
  z-index: -1;
  background: 
    conic-gradient(
      from var(--gradient-angle), 
      var(--color-3), 
      var(--color-4), 
      var(--color-5),
      var(--color-4),
      var(--color-3)
    );
  border-radius: inherit;
  animation: rotation 5s linear infinite;
}

.card::after {
  filter: blur(3.5em);
}

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