@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotation {
    0% {--gradient-angle: 0deg;}
    100% {--gradient-angle: 360deg;}
}
.custom {
    position: relative;
    background-color: var(--background);
    border-radius: 1em;

    padding-block: 3em;
    margin-inline: auto;
    margin-bottom: 10em;

    display: grid;
    justify-content: center;
    text-align: center;

    div {
        margin-block: 1.5em;
    }

    div > * {
        margin-block: 0;
        padding-block: 0;
    }
}

.custom::before,
.custom::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -2px;
    background: linear-gradient(
        in oklch
        
        var(--gradient-angle) /* 135deg  */,
        var(--primary),
        var(--secondary)
    );
    border-radius: inherit;
    animation: rotation 10s linear infinite; 
}
.custom::after {
    filter: blur(16px);
}

footer{
    padding-top: 8em;
}

.info {
    max-width: 70ch;
    margin-inline: auto;
    margin-top: 7em;
    padding-inline: 4em;
    margin-bottom: 4em;
}