/**
 * Generic css classes for some "spice"
 */
.--pull {
    margin-top: -33%;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .--text-gradient-rainbow {
        background-clip: text;
        -webkit-background-clip: text;
        background-image: radial-gradient(circle farthest-corner at 0 0, #ff61d3 25%, #b318ff 45%, #00f0ff 65%, #3cf7a2 85%);
        background-size: 50vw;
        background-position: 50% 0;
        color: transparent;
    }

    .--text-gradient-rainbow-1\/4,
    .--text-gradient-rainbow-2\/4,
    .--text-gradient-rainbow-3\/4,
    .--text-gradient-rainbow-4\/4 {
        background-clip: text;
        -webkit-background-clip: text;
        background-image: radial-gradient(circle farthest-corner at 0 0, #ff61d3 0%, #b318ff 33%, #00f0ff 66%, #3cf7a2 100%);
        color: transparent;
        background-size: 100% 8em;
    }

    .--text-gradient-rainbow-1\/4 {
        background-position: 25% 0;
    }

    .--text-gradient-rainbow-2\/4 {
        background-position: 25% 25%;
    }

    .--text-gradient-rainbow-3\/4 {
        background-position: 25% 50%;
    }

    .--text-gradient-rainbow-4\/4 {
        background-position: 25% 75%;
    }
}

.--mirror {
    display: none;
}

@supports (mask-clip: padding-box) or (-webkit-mask-clip: padding-box) {
    .--mirror {
        display: block;
        position: relative;
        transform: scaleY(-1);
        -webkit-filter: blur(15px);
        filter: blur(15px);
        /* autoprefixer: ignore next */
        -webkit-mask-image: -webkit-gradient(linear, left 33%, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.75)));
        mask-image: linear-gradient(to bottom left, rgba(0,0,0,0), 33% rgba(0,0,0,0), rgba(0,0,0,.75));
    }
}