.ribbon {
    position: absolute;
    right: var(--right, 10px);
    top: var(--top, -3px);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
    z-index: 476;
}

    .ribbon > .content {
        color: white;
        font-size: 1.25rem;
        text-align: center;
        font-weight: 400;
        background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
        padding: 8px 2px 4px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
        width: var(--width, 32px);
        min-height: var(--height, 36px);
        transition: clip-path 1s, padding 1s, background 1s;
    }

    .ribbon.slant-up > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%);
    }

    .ribbon.slant-down > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px));
    }

    .ribbon.down > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
    }

    .ribbon.up > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    }

    .ribbon.check > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px));
    }


.rainbow-text {
    background-image: repeating-linear-gradient(64deg, violet, indigo, aqua, green, yellow, orange, brown,gray,white, violet);
    text-align: center;
    background-size: 900% 900%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 9s ease infinite;
}

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

    50% {
        background-position: 100% 25%
    }

    100% {
        background-position: 0% 50%
    }
}