Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 7, 2016 23:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/f92335867ce5b9db39332e2283780815 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/f92335867ce5b9db39332e2283780815 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Aug 7, 2016.
    42 changes: 42 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    <div class="container">
    <div class="well container-fluid">
    <div class="row">
    <div class="col-xs-12 col-sm-6">
    <div class="h1 rbBase rainbowShadows">Hello, World!</div>
    <div class="h3 rbBase rbStacked">Hello, World!</div>
    <div class="h2 rbBase rbFuzz">Hello, World!</div>
    <div class="h1 rbBase rbFuzz2 rbTextDark">Hello, World!</div>
    </div>
    <div class="col-xs-12 col-sm-6">
    <div class="rbBase rbBoring h1">Hello, World!</div>
    <div class="rbBase rbBoring h2 rbBoring2">Hello, World!</div>
    <div class="rbBase rbBoring h3 rbBoring3">Hello, World!</div>
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12 col-sm-6">
    <div class="h1 rbBase rbTextShadow">Hello, World!</div>
    <div class="h1 rbBase rbTextShadow aniSCurve">Hello, World!</div>
    <div class="h1 rbBase rbTextShadow aniS2">Hello, World!</div>
    </div>
    <div class="col-xs-12 col-sm-6">
    <div class="h1 rbBase rbCrazy">Hello, World!</div>
    <div class="h1 rbBase rbCrazy2">Hello, World!</div>
    <div class="h1 rbBase rbCrazy3">Hello, World!</div>
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12 col-sm-6">
    <div class="h1 rbBase rbText">Hello, World!</div>
    <div class="h1 rbBase rbTextDark">Hello, World!</div>
    <div class="h1 rbBase rbTextBright">Hello, World!</div>
    </div>
    <div class="col-xs-12 col-sm-6">
    <div class="h1 rbBase rbGlow">Hello, World!</div>
    <div class="h1 rbBase rbGlow aniSCurve">Hello, World!</div>
    <div class="h1 rbBase rbGlow aniS2">Hello, World!</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    7 changes: 7 additions & 0 deletions r41nb0wz.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    R41nb0wz!
    ---------
    Experimenting with CSS, CSS animations, and using every color in the spectrum at the same time.

    A [Pen](http://codepen.io/dwcullop/pen/XKPvZQ) by [Darrin W. Cullop](http://codepen.io/dwcullop) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/dwcullop/pen/XKPvZQ/license).
    3 changes: 3 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    1,165 changes: 1,165 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1165 @@
    .row {
    border: 0.05em black solid;
    margin: 0.75em;
    margin-bottom: 1.5em;
    box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,0.5);
    }

    .rbBase {
    font-weight: 900;
    color: #f0f0f0;
    text-align: center;
    white-space: nowrap;
    padding: 0.5em;
    }

    @keyframes rainbowizeColor {
    0%,
    100% {
    color: #ff0000;
    color: hsl(0, 100%, 50%);
    }
    8.333% {
    color: #ff8000;
    color: hsl(30, 100%, 50%);
    }
    16.667% {
    color: #ffff00;
    color: hsl(60, 100%, 50%);
    }
    25% {
    color: #80ff00;
    color: hsl(90, 100%, 50%);
    }
    33.333% {
    color: #00ff00;
    color: hsl(120, 100%, 50%);
    }
    41.667% {
    color: #00ff80;
    color: hsl(150, 100%, 50%);
    }
    50% {
    color: #80ffff;
    color: hsl(180, 100%, 50%);
    }
    58.333% {
    color: #0080ff;
    color: hsl(210, 100%, 50%);
    }
    66.667% {
    color: #0000ff;
    color: hsl(240, 100%, 50%);
    }
    75% {
    color: #8000ff;
    color: hsl(270, 100%, 50%);
    }
    83.333% {
    color: #ff80ff;
    color: hsl(300, 100%, 50%);
    }
    91.667% {
    color: #ff0080;
    color: hsl(330, 100%, 50%);
    }
    }

    @keyframes rainbowizeColorBright {
    0%,
    100% {
    color: #ff8080;
    color: hsl(0, 100%, 75%);
    }
    8.333% {
    color: #ffc080;
    color: hsl(30, 100%, 75%);
    }
    16.667% {
    color: #ffff80;
    color: hsl(60, 100%, 75%);
    }
    25% {
    color: #c0ff80;
    color: hsl(90, 100%, 75%);
    }
    33.333% {
    color: #80ff80;
    color: hsl(120, 100%, 75%);
    }
    41.667% {
    color: #80ffc0;
    color: hsl(150, 100%, 75%);
    }
    50% {
    color: #80ffff;
    color: hsl(180, 100%, 75%);
    }
    58.333% {
    color: #80c0ff;
    color: hsl(210, 100%, 75%);
    }
    66.667% {
    color: #8080ff;
    color: hsl(240, 100%, 75%);
    }
    75% {
    color: #c080ff;
    color: hsl(270, 100%, 75%);
    }
    83.333% {
    color: #ff80ff;
    color: hsl(300, 100%, 75%);
    }
    91.667% {
    color: #ff80c0;
    color: hsl(330, 100%, 75%);
    }
    }

    @keyframes rainbowizeColorDark {
    0%,
    100% {
    color: #e02020;
    color: hsl(0, 75%, 50%);
    }
    8.333% {
    color: #e08020;
    color: hsl(30, 75%, 50%);
    }
    16.667% {
    color: #e0e020;
    color: hsl(60, 75%, 50%);
    }
    25% {
    color: #80e020;
    color: hsl(90, 75%, 50%);
    }
    33.333% {
    color: #20e020;
    color: hsl(120, 75%, 50%);
    }
    41.667% {
    color: #20e080;
    color: hsl(150, 75%, 50%);
    }
    50% {
    color: #20e0e0;
    color: hsl(180, 75%, 50%);
    }
    58.333% {
    color: #2080e0;
    color: hsl(210, 75%, 50%);
    }
    66.667% {
    color: #2020e0;
    color: hsl(240, 75%, 50%);
    }
    75% {
    color: #8020e0;
    color: hsl(270, 75%, 50%);
    }
    83.333% {
    color: #e020e0;
    color: hsl(300, 75%, 50%);
    }
    91.667% {
    color: #e02080;
    color: hsl(330, 75%, 50%);
    }
    }

    @keyframes rainbowizeGlow {
    0%,
    100% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff0000, 0 0 0.2em #ff0000;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 0, 0.80), 0 0 0.2em rgba(255, 0, 0, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(0, 100%, 50%, 0.80), 0 0 0.2em hsla(0, 100%, 50%, 0.80);
    }
    8.333% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff8000, 0 0 0.2em #ff8000;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 128, 0, 0.80), 0 0 0.2em rgba(255, 128, 0, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(30, 100%, 50%, 0.80), 0 0 0.2em hsla(30, 100%, 50%, 0.80);
    }
    16.667% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ffff00, 0 0 0.2em #ffff00;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 255, 0, 0.80), 0 0 0.2em rgba(255, 255, 0, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(60, 100%, 50%, 0.80), 0 0 0.2em hsla(60, 100%, 50%, 0.80);
    }
    25% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #80ff00, 0 0 0.2em #80ff00;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(128, 255, 0, 0.80), 0 0 0.2em rgba(128, 255, 0, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(90, 100%, 50%, 0.80), 0 0 0.2em hsla(90, 100%, 50%, 0.80);
    }
    33.333% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ff00, 0 0 0.2em #00ff00;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 0, 0.80), 0 0 0.2em rgba(0, 255, 0, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(120, 100%, 50%, 0.80), 0 0 0.2em hsla(120, 100%, 50%, 0.80);
    }
    41.667% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ff80, 0 0 0.2em #00ff80;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 128, 0.80), 0 0 0.2em rgba(0, 255, 128, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(150, 100%, 50%, 0.80), 0 0 0.2em hsla(150, 100%, 50%, 0.80);
    }
    50% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #00ffff, 0 0 0.2em #00ffff;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 255, 255, 0.80), 0 0 0.2em rgba(0, 255, 255, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(180, 100%, 50%, 0.80), 0 0 0.2em hsla(180, 100%, 50%, 0.80);
    }
    58.333% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #0080ff, 0 0 0.2em #0080ff;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 128, 255, 0.80), 0 0 0.2em rgba(0, 128, 255, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(210, 100%, 50%, 0.80), 0 0 0.2em hsla(210, 100%, 50%, 0.80);
    }
    66.667% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #0000ff, 0 0 0.2em #0000ff;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(0, 0, 255, 0.80), 0 0 0.2em rgba(0, 0, 255, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(240, 100%, 50%, 0.80), 0 0 0.2em hsla(240, 100%, 50%, 0.80);
    }
    75% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #8000ff, 0 0 0.2em #8000ff;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(128, 0, 255, 0.80), 0 0 0.2em rgba(128, 0, 255, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(270, 100%, 50%, 0.80), 0 0 0.2em hsla(270, 100%, 50%, 0.80);
    }
    83.333% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff00ff, 0 0 0.2em #ff00ff;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 255, 0.80), 0 0 0.2em rgba(255, 0, 255, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(300, 100%, 50%, 0.80), 0 0 0.2em hsla(300, 100%, 50%, 0.80);
    }
    91.667% {
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em #ff0080, 0 0 0.2em #ff0080;
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em rgba(255, 0, 128, 0.80), 0 0 0.2em rgba(255, 0, 128, 0.80);
    text-shadow: 0.05em 0.05em 0.1em #000000, 0 0 1.0em hsla(330, 100%, 50%, 0.80), 0 0 0.2em hsla(330, 100%, 50%, 0.80);
    }
    }

    @keyframes rainbowizeTextShadow {
    0%,
    100% {
    text-shadow: 2px 2px 2px #ff0000;
    text-shadow: 2px 2px 2px rgba(255, 0, 0, 0.80);
    text-shadow: 2px 2px 2px hsla(0, 100%, 50%, 0.80);
    }
    8.333% {
    text-shadow: 2px 2px 2px #ff8000;
    text-shadow: 2px 2px 2px rgba(255, 128, 0, 0.80);
    text-shadow: 2px 2px 2px hsla(30, 100%, 50%, 0.80);
    }
    16.667% {
    text-shadow: 2px 2px 2px #ffff00;
    text-shadow: 2px 2px 2px rgba(255, 255, 0, 0.80);
    text-shadow: 2px 2px 2px hsla(60, 100%, 50%, 0.80);
    }
    25% {
    text-shadow: 2px 2px 2px #80ff00;
    text-shadow: 2px 2px 2px rgba(128, 255, 0, 0.80);
    text-shadow: 2px 2px 2px hsla(90, 100%, 50%, 0.80);
    }
    33.333% {
    text-shadow: 2px 2px 2px #00ff00;
    text-shadow: 2px 2px 2px rgba(0, 255, 0, 0.80);
    text-shadow: 2px 2px 2px hsla(120, 100%, 50%, 0.80);
    }
    41.667% {
    text-shadow: 2px 2px 2px #00ff80;
    text-shadow: 2px 2px 2px rgba(0, 255, 128, 0.80);
    text-shadow: 2px 2px 2px hsla(150, 100%, 50%, 0.80);
    }
    50% {
    text-shadow: 2px 2px 2px #00ffff;
    text-shadow: 2px 2px 2px rgba(0, 255, 255, 0.80);
    text-shadow: 2px 2px 2px hsla(180, 100%, 50%, 0.80);
    }
    58.333% {
    text-shadow: 2px 2px 2px #0080ff;
    text-shadow: 2px 2px 2px rgba(0, 128, 255, 0.80);
    text-shadow: 2px 2px 2px hsla(210, 100%, 50%, 0.80);
    }
    66.667% {
    text-shadow: 2px 2px 2px #0000ff;
    text-shadow: 2px 2px 2px rgba(0, 0, 255, 0.80);
    text-shadow: 2px 2px 2px hsla(240, 100%, 50%, 0.80);
    }
    75% {
    text-shadow: 2px 2px 2px #8000ff;
    text-shadow: 2px 2px 2px rgba(128, 0, 255, 0.80);
    text-shadow: 2px 2px 2px hsla(270, 100%, 50%, 0.80);
    }
    83.333% {
    text-shadow: 2px 2px 2px #ff00ff;
    text-shadow: 2px 2px 2px rgba(255, 0, 255, 0.80);
    text-shadow: 2px 2px 2px hsla(300, 100%, 50%, 0.80);
    }
    91.667% {
    text-shadow: 2px 2px 2px #ff0080;
    text-shadow: 2px 2px 2px rgba(255, 0, 128, 0.80);
    text-shadow: 2px 2px 2px hsla(330, 100%, 50%, 0.80);
    }
    }

    .rbText {
    animation: rainbowizeColor 10s 0 infinite alternate cubic-bezier(0, 0, 1, 1);
    }

    .rbTextDark {
    animation: rainbowizeColorDark 10s 0 infinite alternate cubic-bezier(1, 0, 0, 1);
    }

    .rbTextBright {
    animation: rainbowizeColorBright 10s 0 infinite alternate cubic-bezier(1, 0.5, 0, 0.5);
    }

    .rbTextShadow {
    color: darkgray;
    animation: rainbowizeTextShadow 10s 0 infinite alternate linear;
    }

    .rbGlow {
    animation: rainbowizeGlow 10s 0 infinite alternate linear;
    }

    .aniSCurve {
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-direction: normal;
    }

    .aniS2 {
    animation-timing-function: cubic-bezier(1, -3, 0, 3);
    animation-direction: reverse;
    }

    .rbCrazy {
    animation: rainbowizeColor 13s 0 infinite normal cubic-bezier(0, 0, 1, 1), rainbowizeGlow 5s 0 infinite reverse cubic-bezier(1, -3, 0, 3);
    }

    .rbCrazy2 {
    animation: rainbowizeColor 37s 0 infinite alternate-reverse cubic-bezier(1, 0.5, 0, 0.5), rainbowizeGlow 17s 0 infinite reverse cubic-bezier(0, 0, 1, 1);
    font-weight: 900;
    }

    .rbCrazy3 {
    animation: rainbowizeColor 2s 0 infinite normal cubic-bezier(1, 0.5, 0, 0.5), rainbowizeGlow 3s 0 infinite alternate cubic-bezier(1, -3, 0, 3);
    font-weight: 900;
    }


    /***** It doesn't have to be obnoxious. It can be subtle (read: BORING) if you prefer... *****/

    @keyframes rainbowizeBackground {
    50% {
    background-color: #ff0000;
    background-color: rgba(255, 0, 0, 1.00);
    background-color: hsla(0, 100%, 50%, 1.00);
    }
    58.333% {
    background-color: #ff8000;
    background-color: rgba(255, 128, 0, 1.00);
    background-color: hsla(30, 100%, 50%, 1.00);
    }
    66.667% {
    background-color: #ffff00;
    background-color: rgba(255, 255, 0, 1.00);
    background-color: hsla(60, 100%, 50%, 1.00);
    }
    75% {
    background-color: #80ff00;
    background-color: rgba(128, 255, 0, 1.00);
    background-color: hsla(90, 100%, 50%, 1.00);
    }
    83.333% {
    background-color: #00ff00;
    background-color: rgba(0, 255, 0, 1.00);
    background-color: hsla(120, 100%, 50%, 1.00);
    }
    91.667% {
    background-color: #00ff80;
    background-color: rgba(0, 255, 128, 1.00);
    background-color: hsla(150, 100%, 50%, 1.00);
    }
    0%,
    100% {
    background-color: #00ffff;
    background-color: rgba(0, 255, 255, 1.00);
    background-color: hsla(180, 100%, 50%, 1.00);
    }
    8.333% {
    background-color: #0080ff;
    background-color: rgba(0, 128, 255, 1.00);
    background-color: hsla(210, 100%, 50%, 1.00);
    }
    16.667% {
    background-color: #0000ff;
    background-color: rgba(0, 0, 255, 1.00);
    background-color: hsla(240, 100%, 50%, 1.00);
    }
    25% {
    background-color: #8000ff;
    background-color: rgba(128, 0, 255, 1.00);
    background-color: hsla(270, 100%, 50%, 1.00);
    }
    33.333% {
    background-color: #ff00ff;
    background-color: rgba(255, 0, 255, 1.00);
    background-color: hsla(300, 100%, 50%, 1.00);
    }
    41.667% {
    background-color: #ff0080;
    background-color: rgba(255, 0, 128, 1.00);
    background-color: hsla(330, 100%, 50%, 1.00);
    }
    }

    .rbBoring {
    text-shadow: 0 0 1.0em white, 0 0 0.1em white, 3px 3px 0.1em black;
    animation: rainbowizeColorDark 301s infinite normal linear, rainbowizeBackground 217s 0 infinite alternate-reverse ease;
    }

    .rbBoring2 {
    animation: rainbowizeColorDark 57s -37s infinite normal ease, rainbowizeBackground 103s -29s infinite alternate-reverse linear;
    }

    .rbBoring3 {
    animation: rainbowizeColorDark 301s -183s infinite alternate-reverse ease, rainbowizeBackground 251s -91s infinite normal ease;
    }

    @keyframes kfRainbowStacked {
    0%, 100% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(0, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(30, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(60, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(90, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(120, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(150, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(180, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(209, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(240, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(270, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(300, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(330, 100%, 50%, 1.0);
    }

    8.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(30, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(60, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(90, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(120, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(150, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(180, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(210, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(239, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(270, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(300, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(330, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(0, 100%, 50%, 1.0);
    }

    16.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(60, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(90, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(120, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(150, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(180, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(210, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(240, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(270, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(300, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(330, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(0, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(30, 100%, 50%, 1.0);
    }

    25.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(90, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(120, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(150, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(180, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(210, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(240, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(270, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(300, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(330, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(0, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(30, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(60, 100%, 50%, 1.0);
    }

    33.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(120, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(150, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(180, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(210, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(240, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(270, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(300, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(330, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(0, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(30, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(60, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(90, 100%, 50%, 1.0);
    }

    41.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(150, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(180, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(210, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(240, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(270, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(300, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(330, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(0, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(30, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(60, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(90, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(120, 100%, 50%, 1.0);
    }

    50.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(180, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(210, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(240, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(270, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(300, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(330, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(0, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(30, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(60, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(90, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(120, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(150, 100%, 50%, 1.0);
    }

    58.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(209, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(239, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(270, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(300, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(330, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(0, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(30, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(59, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(90, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(120, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(150, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(180, 100%, 50%, 1.0);
    }

    66.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(240, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(270, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(300, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(330, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(0, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(30, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(60, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(90, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(120, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(150, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(180, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(210, 100%, 50%, 1.0);
    }

    75.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(270, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(300, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(330, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(0, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(30, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(60, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(90, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(120, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(150, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(180, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(210, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(240, 100%, 50%, 1.0);
    }

    83.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(300, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(330, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(0, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(30, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(60, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(90, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(120, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(150, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(180, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(210, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(240, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(270, 100%, 50%, 1.0);
    }

    91.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0.100em 0.100em 4px hsla(330, 100%, 50%, 1.0),
    0.150em 0.150em 4px hsla(0, 100%, 50%, 1.0),
    0.200em 0.200em 4px hsla(30, 100%, 50%, 1.0),
    0.250em 0.250em 4px hsla(60, 100%, 50%, 1.0),
    0.300em 0.300em 4px hsla(90, 100%, 50%, 1.0),
    0.350em 0.350em 4px hsla(120, 100%, 50%, 1.0),
    0.400em 0.400em 5px hsla(150, 100%, 50%, 1.0),
    0.450em 0.450em 5px hsla(180, 100%, 50%, 1.0),
    0.500em 0.500em 5px hsla(210, 100%, 50%, 1.0),
    0.550em 0.550em 5px hsla(240, 100%, 50%, 1.0),
    0.600em 0.600em 5px hsla(270, 100%, 50%, 1.0),
    0.650em 0.650em 5px hsla(300, 100%, 50%, 1.0);
    }
    }

    .rbStacked {
    animation: kfRainbowStacked 3s 0s infinite alternate-reverse ease;
    }

    .rainbowShadows {
    text-shadow: 0 0 1px black, 2px 2px 10px hsla(0, 100%, 50%, 1.0), -2px -2px 10px hsla(0, 100%, 50%, 1.0), 2px -2px 10px hsla(0, 100%, 50%, 1.0), -2px 2px 10px hsla(0, 100%, 50%, 1.0), 4px 4px 10px hsla(30, 100%, 50%, 1.0), -4px -4px 10px hsla(30, 100%, 50%, 1.0), 4px -4px 10px hsla(30, 100%, 50%, 1.0), -4px 4px 10px hsla(30, 100%, 50%, 1.0), 6px 6px 10px hsla(60, 100%, 50%, 1.0), -6px -6px 10px hsla(60, 100%, 50%, 1.0), 6px -6px 10px hsla(60, 100%, 50%, 1.0), -6px 6px 10px hsla(60, 100%, 50%, 1.0), 8px 8px 10px hsla(90, 100%, 50%, 1.0), -8px -8px 10px hsla(90, 100%, 50%, 1.0), 8px -8px 10px hsla(90, 100%, 50%, 1.0), -8px 8px 10px hsla(90, 100%, 50%, 1.0), 10px 10px 10px hsla(120, 100%, 50%, 1.0), -10px -10px 10px hsla(120, 100%, 50%, 1.0), 10px -10px 10px hsla(120, 100%, 50%, 1.0), -10px 10px 10px hsla(120, 100%, 50%, 1.0), 12px 12px 10px hsla(150, 100%, 50%, 1.0), -12px -12px 10px hsla(150, 100%, 50%, 1.0), 12px -12px 10px hsla(150, 100%, 50%, 1.0), -12px 12px 10px hsla(150, 100%, 50%, 1.0), 14px 14px 10px hsla(180, 100%, 50%, 1.0), -14px -14px 10px hsla(180, 100%, 50%, 1.0), 14px -14px 10px hsla(180, 100%, 50%, 1.0), -14px 14px 10px hsla(180, 100%, 50%, 1.0), 16px 16px 10px hsla(210, 100%, 50%, 1.0), -16px -16px 10px hsla(210, 100%, 50%, 1.0), 16px -16px 10px hsla(210, 100%, 50%, 1.0), -16px 16px 10px hsla(210, 100%, 50%, 1.0), 18px 18px 10px hsla(240, 100%, 50%, 1.0), -18px -18px 10px hsla(240, 100%, 50%, 1.0), 18px -18px 10px hsla(240, 100%, 50%, 1.0), -18px 18px 10px hsla(240, 100%, 50%, 1.0), 20px 20px 10px hsla(270, 100%, 50%, 1.0), -20px -20px 10px hsla(270, 100%, 50%, 1.0), 20px -20px 10px hsla(270, 100%, 50%, 1.0), -20px 20px 10px hsla(270, 100%, 50%, 1.0), 22px 22px 10px hsla(300, 100%, 50%, 1.0), -22px -22px 10px hsla(300, 100%, 50%, 1.0), 22px -22px 10px hsla(300, 100%, 50%, 1.0), -22px 22px 10px hsla(300, 100%, 50%, 1.0), 24px 24px 10px hsla(330, 100%, 50%, 1.0), -24px -24px 10px hsla(330, 100%, 50%, 1.0), 24px -24px 10px hsla(330, 100%, 50%, 1.0), -24px 24px 10px hsla(330, 100%, 50%, 1.0), 26px 26px 10px hsla(360, 100%, 50%, 1.0), -26px -26px 10px hsla(360, 100%, 50%, 1.0), 26px -26px 10px hsla(360, 100%, 50%, 1.0), -26px 26px 10px hsla(360, 100%, 50%, 1.0);
    }

    @keyframes kfRainbowFuzz {
    0%, 100% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(0, 100%, 25%, 0.900),
    0 0 0.250em hsla(10, 100%, 25%, 0.903),
    0 0 0.250em hsla(20, 100%, 25%, 0.906),
    0 0 0.250em hsla(30, 100%, 25%, 0.908),
    0 0 0.250em hsla(40, 100%, 25%, 0.911),
    0 0 0.250em hsla(50, 100%, 25%, 0.914),
    0 0 0.250em hsla(60, 100%, 25%, 0.917),
    0 0 0.250em hsla(69, 100%, 25%, 0.919),
    0 0 0.250em hsla(80, 100%, 25%, 0.922),
    0 0 0.250em hsla(90, 100%, 25%, 0.925),
    0 0 0.250em hsla(100, 100%, 25%, 0.928),
    0 0 0.250em hsla(109, 100%, 25%, 0.931),
    0 0 0.250em hsla(120, 100%, 25%, 0.933),
    0 0 0.250em hsla(130, 100%, 25%, 0.936),
    0 0 0.250em hsla(139, 100%, 25%, 0.939),
    0 0 0.250em hsla(150, 100%, 25%, 0.942),
    0 0 0.250em hsla(160, 100%, 25%, 0.944),
    0 0 0.250em hsla(170, 100%, 25%, 0.947),
    0 0 0.250em hsla(180, 100%, 25%, 0.950),
    0 0 0.250em hsla(190, 100%, 25%, 0.953),
    0 0 0.250em hsla(200, 100%, 25%, 0.956),
    0 0 0.250em hsla(209, 100%, 25%, 0.958),
    0 0 0.250em hsla(219, 100%, 25%, 0.961),
    0 0 0.250em hsla(229, 100%, 25%, 0.964),
    0 0 0.250em hsla(240, 100%, 25%, 0.967),
    0 0 0.250em hsla(250, 100%, 25%, 0.969),
    0 0 0.250em hsla(260, 100%, 25%, 0.972),
    0 0 0.250em hsla(270, 100%, 25%, 0.975),
    0 0 0.250em hsla(279, 100%, 25%, 0.978),
    0 0 0.250em hsla(289, 100%, 25%, 0.981),
    0 0 0.250em hsla(300, 100%, 25%, 0.983),
    0 0 0.250em hsla(310, 100%, 25%, 0.986),
    0 0 0.250em hsla(320, 100%, 25%, 0.989),
    0 0 0.250em hsla(330, 100%, 25%, 0.992),
    0 0 0.250em hsla(340, 100%, 25%, 0.994),
    0 0 0.250em hsla(350, 100%, 25%, 0.997);
    }

    8.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(30, 100%, 38%, 0.900),
    0 0 0.259em hsla(40, 100%, 38%, 0.903),
    0 0 0.268em hsla(50, 100%, 38%, 0.906),
    0 0 0.277em hsla(60, 100%, 38%, 0.908),
    0 0 0.286em hsla(70, 100%, 38%, 0.911),
    0 0 0.295em hsla(80, 100%, 38%, 0.914),
    0 0 0.304em hsla(90, 100%, 38%, 0.917),
    0 0 0.313em hsla(99, 100%, 38%, 0.919),
    0 0 0.322em hsla(110, 100%, 38%, 0.922),
    0 0 0.331em hsla(120, 100%, 38%, 0.925),
    0 0 0.340em hsla(130, 100%, 38%, 0.928),
    0 0 0.349em hsla(140, 100%, 38%, 0.931),
    0 0 0.358em hsla(150, 100%, 38%, 0.933),
    0 0 0.367em hsla(160, 100%, 38%, 0.936),
    0 0 0.376em hsla(169, 100%, 38%, 0.939),
    0 0 0.385em hsla(180, 100%, 38%, 0.942),
    0 0 0.394em hsla(190, 100%, 38%, 0.944),
    0 0 0.403em hsla(200, 100%, 38%, 0.947),
    0 0 0.412em hsla(210, 100%, 38%, 0.950),
    0 0 0.421em hsla(220, 100%, 38%, 0.953),
    0 0 0.430em hsla(230, 100%, 38%, 0.956),
    0 0 0.439em hsla(239, 100%, 38%, 0.958),
    0 0 0.448em hsla(249, 100%, 38%, 0.961),
    0 0 0.457em hsla(260, 100%, 38%, 0.964),
    0 0 0.466em hsla(270, 100%, 38%, 0.967),
    0 0 0.475em hsla(280, 100%, 38%, 0.969),
    0 0 0.484em hsla(290, 100%, 38%, 0.972),
    0 0 0.493em hsla(300, 100%, 38%, 0.975),
    0 0 0.502em hsla(309, 100%, 38%, 0.978),
    0 0 0.511em hsla(319, 100%, 38%, 0.981),
    0 0 0.520em hsla(330, 100%, 38%, 0.983),
    0 0 0.529em hsla(340, 100%, 38%, 0.986),
    0 0 0.538em hsla(350, 100%, 38%, 0.989),
    0 0 0.547em hsla(0, 100%, 38%, 0.992),
    0 0 0.556em hsla(10, 100%, 38%, 0.994),
    0 0 0.565em hsla(20, 100%, 38%, 0.997);
    }

    16.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(60, 100%, 50%, 0.900),
    0 0 0.267em hsla(70, 100%, 50%, 0.903),
    0 0 0.285em hsla(80, 100%, 50%, 0.906),
    0 0 0.302em hsla(90, 100%, 50%, 0.908),
    0 0 0.319em hsla(100, 100%, 50%, 0.911),
    0 0 0.337em hsla(110, 100%, 50%, 0.914),
    0 0 0.354em hsla(120, 100%, 50%, 0.917),
    0 0 0.372em hsla(130, 100%, 50%, 0.919),
    0 0 0.389em hsla(140, 100%, 50%, 0.922),
    0 0 0.406em hsla(150, 100%, 50%, 0.925),
    0 0 0.424em hsla(160, 100%, 50%, 0.928),
    0 0 0.441em hsla(170, 100%, 50%, 0.931),
    0 0 0.458em hsla(180, 100%, 50%, 0.933),
    0 0 0.476em hsla(190, 100%, 50%, 0.936),
    0 0 0.493em hsla(199, 100%, 50%, 0.939),
    0 0 0.510em hsla(210, 100%, 50%, 0.942),
    0 0 0.528em hsla(220, 100%, 50%, 0.944),
    0 0 0.545em hsla(230, 100%, 50%, 0.947),
    0 0 0.563em hsla(240, 100%, 50%, 0.950),
    0 0 0.580em hsla(250, 100%, 50%, 0.953),
    0 0 0.597em hsla(260, 100%, 50%, 0.956),
    0 0 0.615em hsla(270, 100%, 50%, 0.958),
    0 0 0.632em hsla(280, 100%, 50%, 0.961),
    0 0 0.649em hsla(290, 100%, 50%, 0.964),
    0 0 0.667em hsla(300, 100%, 50%, 0.967),
    0 0 0.684em hsla(310, 100%, 50%, 0.969),
    0 0 0.701em hsla(320, 100%, 50%, 0.972),
    0 0 0.719em hsla(330, 100%, 50%, 0.975),
    0 0 0.736em hsla(339, 100%, 50%, 0.978),
    0 0 0.753em hsla(349, 100%, 50%, 0.981),
    0 0 0.771em hsla(0, 100%, 50%, 0.983),
    0 0 0.788em hsla(10, 100%, 50%, 0.986),
    0 0 0.806em hsla(20, 100%, 50%, 0.989),
    0 0 0.823em hsla(30, 100%, 50%, 0.992),
    0 0 0.840em hsla(40, 100%, 50%, 0.994),
    0 0 0.858em hsla(50, 100%, 50%, 0.997);
    }

    25.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(90, 100%, 60%, 0.900),
    0 0 0.275em hsla(100, 100%, 60%, 0.903),
    0 0 0.299em hsla(110, 100%, 60%, 0.906),
    0 0 0.324em hsla(120, 100%, 60%, 0.908),
    0 0 0.348em hsla(130, 100%, 60%, 0.911),
    0 0 0.373em hsla(140, 100%, 60%, 0.914),
    0 0 0.397em hsla(150, 100%, 60%, 0.917),
    0 0 0.422em hsla(160, 100%, 60%, 0.919),
    0 0 0.446em hsla(170, 100%, 60%, 0.922),
    0 0 0.471em hsla(180, 100%, 60%, 0.925),
    0 0 0.496em hsla(190, 100%, 60%, 0.928),
    0 0 0.520em hsla(200, 100%, 60%, 0.931),
    0 0 0.545em hsla(210, 100%, 60%, 0.933),
    0 0 0.569em hsla(220, 100%, 60%, 0.936),
    0 0 0.594em hsla(229, 100%, 60%, 0.939),
    0 0 0.618em hsla(240, 100%, 60%, 0.942),
    0 0 0.643em hsla(250, 100%, 60%, 0.944),
    0 0 0.667em hsla(260, 100%, 60%, 0.947),
    0 0 0.692em hsla(270, 100%, 60%, 0.950),
    0 0 0.716em hsla(280, 100%, 60%, 0.953),
    0 0 0.741em hsla(290, 100%, 60%, 0.956),
    0 0 0.766em hsla(300, 100%, 60%, 0.958),
    0 0 0.790em hsla(310, 100%, 60%, 0.961),
    0 0 0.815em hsla(320, 100%, 60%, 0.964),
    0 0 0.839em hsla(330, 100%, 60%, 0.967),
    0 0 0.864em hsla(340, 100%, 60%, 0.969),
    0 0 0.888em hsla(350, 100%, 60%, 0.972),
    0 0 0.913em hsla(0, 100%, 60%, 0.975),
    0 0 0.937em hsla(9, 100%, 60%, 0.978),
    0 0 0.962em hsla(19, 100%, 60%, 0.981),
    0 0 0.987em hsla(30, 100%, 60%, 0.983),
    0 0 1.011em hsla(40, 100%, 60%, 0.986),
    0 0 1.036em hsla(50, 100%, 60%, 0.989),
    0 0 1.060em hsla(60, 100%, 60%, 0.992),
    0 0 1.085em hsla(70, 100%, 60%, 0.994),
    0 0 1.109em hsla(80, 100%, 60%, 0.997);
    }

    33.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(120, 100%, 68%, 0.900),
    0 0 0.280em hsla(130, 100%, 68%, 0.903),
    0 0 0.310em hsla(140, 100%, 68%, 0.906),
    0 0 0.340em hsla(150, 100%, 68%, 0.908),
    0 0 0.370em hsla(160, 100%, 68%, 0.911),
    0 0 0.400em hsla(170, 100%, 68%, 0.914),
    0 0 0.430em hsla(180, 100%, 68%, 0.917),
    0 0 0.460em hsla(190, 100%, 68%, 0.919),
    0 0 0.491em hsla(200, 100%, 68%, 0.922),
    0 0 0.521em hsla(210, 100%, 68%, 0.925),
    0 0 0.551em hsla(220, 100%, 68%, 0.928),
    0 0 0.581em hsla(230, 100%, 68%, 0.931),
    0 0 0.611em hsla(240, 100%, 68%, 0.933),
    0 0 0.641em hsla(250, 100%, 68%, 0.936),
    0 0 0.671em hsla(260, 100%, 68%, 0.939),
    0 0 0.701em hsla(270, 100%, 68%, 0.942),
    0 0 0.731em hsla(280, 100%, 68%, 0.944),
    0 0 0.761em hsla(290, 100%, 68%, 0.947),
    0 0 0.791em hsla(300, 100%, 68%, 0.950),
    0 0 0.821em hsla(310, 100%, 68%, 0.953),
    0 0 0.851em hsla(320, 100%, 68%, 0.956),
    0 0 0.881em hsla(330, 100%, 68%, 0.958),
    0 0 0.912em hsla(340, 100%, 68%, 0.961),
    0 0 0.942em hsla(350, 100%, 68%, 0.964),
    0 0 0.972em hsla(0, 100%, 68%, 0.967),
    0 0 1.002em hsla(10, 100%, 68%, 0.969),
    0 0 1.032em hsla(20, 100%, 68%, 0.972),
    0 0 1.062em hsla(30, 100%, 68%, 0.975),
    0 0 1.092em hsla(39, 100%, 68%, 0.978),
    0 0 1.122em hsla(49, 100%, 68%, 0.981),
    0 0 1.152em hsla(60, 100%, 68%, 0.983),
    0 0 1.182em hsla(70, 100%, 68%, 0.986),
    0 0 1.212em hsla(80, 100%, 68%, 0.989),
    0 0 1.242em hsla(90, 100%, 68%, 0.992),
    0 0 1.272em hsla(100, 100%, 68%, 0.994),
    0 0 1.302em hsla(110, 100%, 68%, 0.997);
    }

    41.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(150, 100%, 73%, 0.900),
    0 0 0.284em hsla(160, 100%, 73%, 0.903),
    0 0 0.317em hsla(170, 100%, 73%, 0.906),
    0 0 0.351em hsla(180, 100%, 73%, 0.908),
    0 0 0.384em hsla(190, 100%, 73%, 0.911),
    0 0 0.418em hsla(200, 100%, 73%, 0.914),
    0 0 0.451em hsla(210, 100%, 73%, 0.917),
    0 0 0.485em hsla(220, 100%, 73%, 0.919),
    0 0 0.518em hsla(230, 100%, 73%, 0.922),
    0 0 0.552em hsla(240, 100%, 73%, 0.925),
    0 0 0.585em hsla(250, 100%, 73%, 0.928),
    0 0 0.619em hsla(260, 100%, 73%, 0.931),
    0 0 0.652em hsla(270, 100%, 73%, 0.933),
    0 0 0.686em hsla(280, 100%, 73%, 0.936),
    0 0 0.720em hsla(290, 100%, 73%, 0.939),
    0 0 0.753em hsla(300, 100%, 73%, 0.942),
    0 0 0.787em hsla(310, 100%, 73%, 0.944),
    0 0 0.820em hsla(320, 100%, 73%, 0.947),
    0 0 0.854em hsla(330, 100%, 73%, 0.950),
    0 0 0.887em hsla(340, 100%, 73%, 0.953),
    0 0 0.921em hsla(350, 100%, 73%, 0.956),
    0 0 0.954em hsla(0, 100%, 73%, 0.958),
    0 0 0.988em hsla(10, 100%, 73%, 0.961),
    0 0 1.021em hsla(20, 100%, 73%, 0.964),
    0 0 1.055em hsla(30, 100%, 73%, 0.967),
    0 0 1.088em hsla(40, 100%, 73%, 0.969),
    0 0 1.122em hsla(50, 100%, 73%, 0.972),
    0 0 1.156em hsla(60, 100%, 73%, 0.975),
    0 0 1.189em hsla(69, 100%, 73%, 0.978),
    0 0 1.223em hsla(79, 100%, 73%, 0.981),
    0 0 1.256em hsla(90, 100%, 73%, 0.983),
    0 0 1.290em hsla(100, 100%, 73%, 0.986),
    0 0 1.323em hsla(110, 100%, 73%, 0.989),
    0 0 1.357em hsla(120, 100%, 73%, 0.992),
    0 0 1.390em hsla(130, 100%, 73%, 0.994),
    0 0 1.424em hsla(140, 100%, 73%, 0.997);
    }

    50.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(180, 100%, 75%, 0.900),
    0 0 0.285em hsla(190, 100%, 75%, 0.903),
    0 0 0.319em hsla(200, 100%, 75%, 0.906),
    0 0 0.354em hsla(210, 100%, 75%, 0.908),
    0 0 0.389em hsla(220, 100%, 75%, 0.911),
    0 0 0.424em hsla(230, 100%, 75%, 0.914),
    0 0 0.458em hsla(240, 100%, 75%, 0.917),
    0 0 0.493em hsla(250, 100%, 75%, 0.919),
    0 0 0.528em hsla(260, 100%, 75%, 0.922),
    0 0 0.563em hsla(270, 100%, 75%, 0.925),
    0 0 0.597em hsla(280, 100%, 75%, 0.928),
    0 0 0.632em hsla(290, 100%, 75%, 0.931),
    0 0 0.667em hsla(300, 100%, 75%, 0.933),
    0 0 0.701em hsla(310, 100%, 75%, 0.936),
    0 0 0.736em hsla(320, 100%, 75%, 0.939),
    0 0 0.771em hsla(330, 100%, 75%, 0.942),
    0 0 0.806em hsla(340, 100%, 75%, 0.944),
    0 0 0.840em hsla(350, 100%, 75%, 0.947),
    0 0 0.875em hsla(0, 100%, 75%, 0.950),
    0 0 0.910em hsla(10, 100%, 75%, 0.953),
    0 0 0.944em hsla(20, 100%, 75%, 0.956),
    0 0 0.979em hsla(30, 100%, 75%, 0.958),
    0 0 1.014em hsla(40, 100%, 75%, 0.961),
    0 0 1.049em hsla(50, 100%, 75%, 0.964),
    0 0 1.083em hsla(60, 100%, 75%, 0.967),
    0 0 1.118em hsla(70, 100%, 75%, 0.969),
    0 0 1.153em hsla(80, 100%, 75%, 0.972),
    0 0 1.188em hsla(90, 100%, 75%, 0.975),
    0 0 1.222em hsla(99, 100%, 75%, 0.978),
    0 0 1.257em hsla(109, 100%, 75%, 0.981),
    0 0 1.292em hsla(120, 100%, 75%, 0.983),
    0 0 1.326em hsla(130, 100%, 75%, 0.986),
    0 0 1.361em hsla(140, 100%, 75%, 0.989),
    0 0 1.396em hsla(150, 100%, 75%, 0.992),
    0 0 1.431em hsla(160, 100%, 75%, 0.994),
    0 0 1.465em hsla(170, 100%, 75%, 0.997);
    }

    58.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(209, 100%, 73%, 0.900),
    0 0 0.284em hsla(219, 100%, 73%, 0.903),
    0 0 0.317em hsla(229, 100%, 73%, 0.906),
    0 0 0.351em hsla(239, 100%, 73%, 0.908),
    0 0 0.384em hsla(249, 100%, 73%, 0.911),
    0 0 0.418em hsla(260, 100%, 73%, 0.914),
    0 0 0.451em hsla(270, 100%, 73%, 0.917),
    0 0 0.485em hsla(279, 100%, 73%, 0.919),
    0 0 0.518em hsla(290, 100%, 73%, 0.922),
    0 0 0.552em hsla(300, 100%, 73%, 0.925),
    0 0 0.585em hsla(310, 100%, 73%, 0.928),
    0 0 0.619em hsla(319, 100%, 73%, 0.931),
    0 0 0.652em hsla(330, 100%, 73%, 0.933),
    0 0 0.686em hsla(340, 100%, 73%, 0.936),
    0 0 0.720em hsla(349, 100%, 73%, 0.939),
    0 0 0.753em hsla(0, 100%, 73%, 0.942),
    0 0 0.787em hsla(10, 100%, 73%, 0.944),
    0 0 0.820em hsla(20, 100%, 73%, 0.947),
    0 0 0.854em hsla(30, 100%, 73%, 0.950),
    0 0 0.887em hsla(40, 100%, 73%, 0.953),
    0 0 0.921em hsla(50, 100%, 73%, 0.956),
    0 0 0.954em hsla(59, 100%, 73%, 0.958),
    0 0 0.988em hsla(69, 100%, 73%, 0.961),
    0 0 1.021em hsla(79, 100%, 73%, 0.964),
    0 0 1.055em hsla(90, 100%, 73%, 0.967),
    0 0 1.088em hsla(100, 100%, 73%, 0.969),
    0 0 1.122em hsla(110, 100%, 73%, 0.972),
    0 0 1.156em hsla(120, 100%, 73%, 0.975),
    0 0 1.189em hsla(129, 100%, 73%, 0.978),
    0 0 1.223em hsla(139, 100%, 73%, 0.981),
    0 0 1.256em hsla(150, 100%, 73%, 0.983),
    0 0 1.290em hsla(160, 100%, 73%, 0.986),
    0 0 1.323em hsla(170, 100%, 73%, 0.989),
    0 0 1.357em hsla(180, 100%, 73%, 0.992),
    0 0 1.390em hsla(190, 100%, 73%, 0.994),
    0 0 1.424em hsla(200, 100%, 73%, 0.997);
    }

    66.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(240, 100%, 68%, 0.900),
    0 0 0.280em hsla(250, 100%, 68%, 0.903),
    0 0 0.310em hsla(260, 100%, 68%, 0.906),
    0 0 0.340em hsla(270, 100%, 68%, 0.908),
    0 0 0.370em hsla(280, 100%, 68%, 0.911),
    0 0 0.400em hsla(290, 100%, 68%, 0.914),
    0 0 0.430em hsla(300, 100%, 68%, 0.917),
    0 0 0.460em hsla(310, 100%, 68%, 0.919),
    0 0 0.491em hsla(320, 100%, 68%, 0.922),
    0 0 0.521em hsla(330, 100%, 68%, 0.925),
    0 0 0.551em hsla(340, 100%, 68%, 0.928),
    0 0 0.581em hsla(350, 100%, 68%, 0.931),
    0 0 0.611em hsla(0, 100%, 68%, 0.933),
    0 0 0.641em hsla(10, 100%, 68%, 0.936),
    0 0 0.671em hsla(20, 100%, 68%, 0.939),
    0 0 0.701em hsla(30, 100%, 68%, 0.942),
    0 0 0.731em hsla(40, 100%, 68%, 0.944),
    0 0 0.761em hsla(50, 100%, 68%, 0.947),
    0 0 0.791em hsla(60, 100%, 68%, 0.950),
    0 0 0.821em hsla(70, 100%, 68%, 0.953),
    0 0 0.851em hsla(80, 100%, 68%, 0.956),
    0 0 0.881em hsla(90, 100%, 68%, 0.958),
    0 0 0.912em hsla(100, 100%, 68%, 0.961),
    0 0 0.942em hsla(110, 100%, 68%, 0.964),
    0 0 0.972em hsla(120, 100%, 68%, 0.967),
    0 0 1.002em hsla(130, 100%, 68%, 0.969),
    0 0 1.032em hsla(140, 100%, 68%, 0.972),
    0 0 1.062em hsla(150, 100%, 68%, 0.975),
    0 0 1.092em hsla(160, 100%, 68%, 0.978),
    0 0 1.122em hsla(170, 100%, 68%, 0.981),
    0 0 1.152em hsla(180, 100%, 68%, 0.983),
    0 0 1.182em hsla(190, 100%, 68%, 0.986),
    0 0 1.212em hsla(200, 100%, 68%, 0.989),
    0 0 1.242em hsla(210, 100%, 68%, 0.992),
    0 0 1.272em hsla(220, 100%, 68%, 0.994),
    0 0 1.302em hsla(230, 100%, 68%, 0.997);
    }

    75.000% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(270, 100%, 60%, 0.900),
    0 0 0.275em hsla(280, 100%, 60%, 0.903),
    0 0 0.299em hsla(290, 100%, 60%, 0.906),
    0 0 0.324em hsla(300, 100%, 60%, 0.908),
    0 0 0.348em hsla(310, 100%, 60%, 0.911),
    0 0 0.373em hsla(320, 100%, 60%, 0.914),
    0 0 0.397em hsla(330, 100%, 60%, 0.917),
    0 0 0.422em hsla(340, 100%, 60%, 0.919),
    0 0 0.446em hsla(350, 100%, 60%, 0.922),
    0 0 0.471em hsla(0, 100%, 60%, 0.925),
    0 0 0.496em hsla(10, 100%, 60%, 0.928),
    0 0 0.520em hsla(20, 100%, 60%, 0.931),
    0 0 0.545em hsla(30, 100%, 60%, 0.933),
    0 0 0.569em hsla(40, 100%, 60%, 0.936),
    0 0 0.594em hsla(50, 100%, 60%, 0.939),
    0 0 0.618em hsla(60, 100%, 60%, 0.942),
    0 0 0.643em hsla(70, 100%, 60%, 0.944),
    0 0 0.667em hsla(80, 100%, 60%, 0.947),
    0 0 0.692em hsla(90, 100%, 60%, 0.950),
    0 0 0.716em hsla(100, 100%, 60%, 0.953),
    0 0 0.741em hsla(110, 100%, 60%, 0.956),
    0 0 0.766em hsla(120, 100%, 60%, 0.958),
    0 0 0.790em hsla(130, 100%, 60%, 0.961),
    0 0 0.815em hsla(140, 100%, 60%, 0.964),
    0 0 0.839em hsla(150, 100%, 60%, 0.967),
    0 0 0.864em hsla(160, 100%, 60%, 0.969),
    0 0 0.888em hsla(170, 100%, 60%, 0.972),
    0 0 0.913em hsla(180, 100%, 60%, 0.975),
    0 0 0.937em hsla(190, 100%, 60%, 0.978),
    0 0 0.962em hsla(200, 100%, 60%, 0.981),
    0 0 0.987em hsla(210, 100%, 60%, 0.983),
    0 0 1.011em hsla(220, 100%, 60%, 0.986),
    0 0 1.036em hsla(230, 100%, 60%, 0.989),
    0 0 1.060em hsla(240, 100%, 60%, 0.992),
    0 0 1.085em hsla(250, 100%, 60%, 0.994),
    0 0 1.109em hsla(260, 100%, 60%, 0.997);
    }

    83.333% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(300, 100%, 50%, 0.900),
    0 0 0.267em hsla(310, 100%, 50%, 0.903),
    0 0 0.285em hsla(320, 100%, 50%, 0.906),
    0 0 0.302em hsla(330, 100%, 50%, 0.908),
    0 0 0.319em hsla(340, 100%, 50%, 0.911),
    0 0 0.337em hsla(350, 100%, 50%, 0.914),
    0 0 0.354em hsla(0, 100%, 50%, 0.917),
    0 0 0.372em hsla(10, 100%, 50%, 0.919),
    0 0 0.389em hsla(20, 100%, 50%, 0.922),
    0 0 0.406em hsla(30, 100%, 50%, 0.925),
    0 0 0.424em hsla(40, 100%, 50%, 0.928),
    0 0 0.441em hsla(50, 100%, 50%, 0.931),
    0 0 0.458em hsla(60, 100%, 50%, 0.933),
    0 0 0.476em hsla(70, 100%, 50%, 0.936),
    0 0 0.493em hsla(80, 100%, 50%, 0.939),
    0 0 0.510em hsla(90, 100%, 50%, 0.942),
    0 0 0.528em hsla(100, 100%, 50%, 0.944),
    0 0 0.545em hsla(110, 100%, 50%, 0.947),
    0 0 0.563em hsla(120, 100%, 50%, 0.950),
    0 0 0.580em hsla(130, 100%, 50%, 0.953),
    0 0 0.597em hsla(140, 100%, 50%, 0.956),
    0 0 0.615em hsla(150, 100%, 50%, 0.958),
    0 0 0.632em hsla(160, 100%, 50%, 0.961),
    0 0 0.649em hsla(170, 100%, 50%, 0.964),
    0 0 0.667em hsla(180, 100%, 50%, 0.967),
    0 0 0.684em hsla(190, 100%, 50%, 0.969),
    0 0 0.701em hsla(200, 100%, 50%, 0.972),
    0 0 0.719em hsla(210, 100%, 50%, 0.975),
    0 0 0.736em hsla(220, 100%, 50%, 0.978),
    0 0 0.753em hsla(230, 100%, 50%, 0.981),
    0 0 0.771em hsla(240, 100%, 50%, 0.983),
    0 0 0.788em hsla(250, 100%, 50%, 0.986),
    0 0 0.806em hsla(260, 100%, 50%, 0.989),
    0 0 0.823em hsla(270, 100%, 50%, 0.992),
    0 0 0.840em hsla(280, 100%, 50%, 0.994),
    0 0 0.858em hsla(290, 100%, 50%, 0.997);
    }

    91.667% {
    text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1),
    0 0 1px rgb(0,0,0),
    0 0 3px rgb(255,255,255),
    0 0 0.250em hsla(330, 100%, 38%, 0.900),
    0 0 0.259em hsla(340, 100%, 38%, 0.903),
    0 0 0.268em hsla(350, 100%, 38%, 0.906),
    0 0 0.277em hsla(0, 100%, 38%, 0.908),
    0 0 0.286em hsla(10, 100%, 38%, 0.911),
    0 0 0.295em hsla(20, 100%, 38%, 0.914),
    0 0 0.304em hsla(30, 100%, 38%, 0.917),
    0 0 0.313em hsla(40, 100%, 38%, 0.919),
    0 0 0.322em hsla(50, 100%, 38%, 0.922),
    0 0 0.331em hsla(60, 100%, 38%, 0.925),
    0 0 0.340em hsla(70, 100%, 38%, 0.928),
    0 0 0.349em hsla(80, 100%, 38%, 0.931),
    0 0 0.358em hsla(90, 100%, 38%, 0.933),
    0 0 0.367em hsla(100, 100%, 38%, 0.936),
    0 0 0.376em hsla(110, 100%, 38%, 0.939),
    0 0 0.385em hsla(120, 100%, 38%, 0.942),
    0 0 0.394em hsla(130, 100%, 38%, 0.944),
    0 0 0.403em hsla(140, 100%, 38%, 0.947),
    0 0 0.412em hsla(150, 100%, 38%, 0.950),
    0 0 0.421em hsla(160, 100%, 38%, 0.953),
    0 0 0.430em hsla(170, 100%, 38%, 0.956),
    0 0 0.439em hsla(180, 100%, 38%, 0.958),
    0 0 0.448em hsla(190, 100%, 38%, 0.961),
    0 0 0.457em hsla(200, 100%, 38%, 0.964),
    0 0 0.466em hsla(210, 100%, 38%, 0.967),
    0 0 0.475em hsla(220, 100%, 38%, 0.969),
    0 0 0.484em hsla(230, 100%, 38%, 0.972),
    0 0 0.493em hsla(240, 100%, 38%, 0.975),
    0 0 0.502em hsla(250, 100%, 38%, 0.978),
    0 0 0.511em hsla(260, 100%, 38%, 0.981),
    0 0 0.520em hsla(270, 100%, 38%, 0.983),
    0 0 0.529em hsla(280, 100%, 38%, 0.986),
    0 0 0.538em hsla(290, 100%, 38%, 0.989),
    0 0 0.547em hsla(300, 100%, 38%, 0.992),
    0 0 0.556em hsla(310, 100%, 38%, 0.994),
    0 0 0.565em hsla(320, 100%, 38%, 0.997);
    }
    }

    .rbFuzz {
    animation: rainbowizeColorDark 41s -17s infinite normal ease,
    kfRainbowFuzz 11s -5s infinite normal linear;
    }

    .rbFuzz2 {
    animation: rainbowizeColorBright 37s -11s infinite normal linear,
    kfRainbowFuzz 7s 0 infinite alternate-reverse ease;
    }
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet" />