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

body {
    background: #212f3d;
    min-height: 100vh;
    display: grid;
    place-content: center;
    font-family: sans-serif;
    color: white;
    font-size: 1.2rem;
}

.card {
    margin: 200px auto;
    padding: 2em;
    aspect-ratio: auto;
    background: #1c1f2b;
    border-radius: 0.5rem;
    position: relative;
    text-align: center;
}

.card::before, .card::after {
    content: "";
    position: absolute;
    inset: -.5rem;
    z-index: -1;
    background: conic-gradient(from var(--gradient-angle), #21618c, #17a589, #e74c3c, #21618c);
    border-radius: inherit;
    animation: rotation 5s infinite linear;
}

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

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