.StandOut {
    position: relative;
    font-size: 1.75em;
    font-style: italic;
    font-weight: bold;
    margin: 5px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    color: transparent; /* Make the main text color transparent */
    background: -webkit-linear-gradient(
        90deg,
        rgba(55, 10, 10, 1) 0%,  /* Very deep dark red at the bottom */
        rgba(102, 27, 22, 1) 25%,  /* Dark red-orange */
        rgba(153, 45, 34, 1) 50%,  /* Deep medium red-orange */
        rgba(6, 84, 170, 1) 50%,  /* Transition to blue */
        rgba(13, 8, 96, 1) 100%  /* Deep blue at the top */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: auto 400%;
    background-position: 0%;
    transition: background 1400ms ease;
}

.StandOut::before {
    content: attr(data-text); /* Duplicate the text */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent; /* Make the text invisible */
    background: linear-gradient(
        90deg,
        rgba(55, 10, 10, 1) 0%,  /* Very deep dark red at the bottom */
        rgba(102, 27, 22, 1) 25%,  /* Dark red-orange */
        rgba(153, 45, 34, 1) 50%,  /* Deep medium red-orange */
        rgba(6, 84, 170, 1) 50%,  /* Transition to blue */
        rgba(13, 8, 96, 1) 100%  /* Deep blue at the top */
    );
    background-clip: text;
    -webkit-background-clip: text; /* For WebKit-based browsers */
    text-shadow:
        1px 1px 0 #000, /* Black border effect */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
    z-index: -1; /* Place behind the actual text */
}