.colorful-link {
    color: #fff;
    text-decoration: none;
    font-size: 2.1em;
    font-family: 'Times New Roman', Times, serif;
    align-items: center;
    font-weight: bold;
    background: linear-gradient(to right, #d24ae4, #15cae1, #d24ae4);
    background-size: 300% 100%;
    border-radius: 5rem;
    transition: background-position 0.4s;
    display: inline-block; /* To make border-radius work */
    border-color: black;
}

.colorful-link:hover {
    background-position: 100% 0; /* Move the gradient to the end on hover */
    color: #fff;
}