/*noinspection CssInvalidAtRule*/
@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}
/*Spins the lights, at 0% its 0 degrees, at 100% it has made a full circle*/
@keyframes spin {
    0% {
        --rotate: 0deg;
    }
    100% {
        --rotate: 360deg;
    }
}


.card:hover {
    transition: color 1s;
}
.card:hover:before, .card:hover:after {
    opacity: 0;
}

/*cards*/
.card::before, .card::after {
    content: "";
    height: 104%;
    width: 104%;
    border-radius: 10px;
    position: absolute;
    z-index: -1;
    animation: spin 2.5s linear infinite;
    transition: opacity .5s;
}
/*card colors, either copy paste and add the right class (number) .card[number]
or give same class for same color*/
.card::before, .card::after {
    background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3, 43%, #4e00c2);
}
.card2::before, .card2::after {
    background-image: linear-gradient(var(--rotate), #10ff07, #33c914, 43%, #207201);
}
.card3::before, .card3::after {
    background-image: linear-gradient(var(--rotate), #ffea07, #c9c014, 43%, #a69f03);
}
.card4::before, .card4::after {
    background-image: linear-gradient(var(--rotate), #c907ff, #7214c9, 43%, #5203a6);
}
.card5::before, .card5::after {
    background-image: linear-gradient(var(--rotate), #ff0000, #ff015a, 43%, #ff00c3);
}