/* ==========================================================
   Rainbow Text
   ========================================================== */

.rainbow-text-2 {
    display: inline-block;

    background: linear-gradient(
        90deg,
        #ff0000 0%,
        #ff8000 6.25%,
        #ffff00 12.5%,
        #00ff00 18.75%,
        #00ffff 25%,
        #0080ff 31.25%,
        #8000ff 37.5%,
        #ff00ff 43.75%,
        #ff0000 50%,
        #ff8000 56.25%,
        #ffff00 62.5%,
        #00ff00 68.75%,
        #00ffff 75%,
        #0080ff 81.25%,
        #8000ff 87.5%,
        #ff00ff 93.75%,
        #ff0000 100%
    );

    background-size: 200% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: rainbow-animation 5s linear infinite;
}


/* ==========================================================
   Rainbow Animation
   ========================================================== */

@keyframes rainbow-animation {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}


/* ==========================================================
   OT Link
   ========================================================== */

.ot-link {
    font-size: 42px;
    font-weight: bold;

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}


/* Animation bei entsprechender Browser-Einstellung deaktivieren */

@media (prefers-reduced-motion: reduce) {
    .rainbow-text {
        animation: none;
    }
}