.btn-donate {
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: rgb(83, 29, 211);
    --btn-bg-2: rgb(60, 10, 197);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.377),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(38, 46, 165, 0.568),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
    animation: fadeInUp 1.2s ease-out;
}

.btn-donate:hover {
    background-position: right top;
}

.btn-donate:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
    .btn-donate {
        transition: linear;
    }
}