:root {
  --scroll-speed: 20s;
}


html {
  overflow-x: hidden;
  background-image: url('/images/mainimages/backgroundSpace.png');
  background-size: 300px;
  
}

html, body, p, h1, div, ul, li, button, a, input {
  cursor: url('/images/other/rainbow-paw-cursor.png'), auto;
}
body {
  font-family: 'pixelifysans';
  /*background-image: url('/images/other/360_F_493697523_kFHsQhEAv2NJWTGmc44cPLTYz46f7DPL.jpg');*/
  /* background-image: url('/images/mainimages/backgroundSpace.png'); */
}


h1 {
  font-family: 'pixelifysans';
  font-size: 48pt;
  text-align: center;
  font-weight: bold;
  color: purple;
}

.logo {
  font-family: 'terminal-grotesque';
  color: white;
}

p, li {
  font-family: 'pixelifysans';
  color: white;
}

div {
  color: white;
}

.sliding-background-slow {
  animation: slide var(--scroll-speed) linear infinite;
}

.margin-t-0 {
  margin-top: 0;
}
.margin-b-0 {
  margin-bottom: 0;
}


@keyframes slide {
  0% {
    background-position: 0 300px;
  }
  100% {
    background-position: 0 0;
  }
}

.hideClass {
  visibility: hidden;
}

/*


It's a very difficult process to do so. 
Currently the only way to change an animation mid-animation is to use a setInterval to approximate the current 
keyframes percentage, save the properties of that keyframe, update the animation (in your case just the speed) 
then apply the new version of the animation starting from the saved point. I created a similar example in the 
article I wrote for CSS Tricks called Controlling CSS Animations & Transitions with Javascript
http://css-tricks.com/controlling-css-animations-transitions-javascript/

As the article described, 
it'd be easier to change the speed on animationIteration, 
n your case that would look like this demo, but it is still far from pretty
http://jsfiddle.net/52xLK/1/

var pfx = ["webkit", "moz", "MS", "o", ""],
    rotates = $('.rotate'),
    prevent = false;

function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}

function listen() {
    for(var i = 0, j = rotates.length; i < j; i ++) {
        PrefixedEvent(rotates[i], "AnimationIteration", function() {
            if(!$('#faster').is(':checked') && !prevent) {
                var el = $(this),  
                   newOne = el.clone(true)
                            .css({'animation':'rotate 2s linear infinite'});
                el.before(newOne);        
                $("." + el.attr("class") + ":last").remove();
                rotates = $('.rotate');
                listen();
                prevent = true;
            }
            else if($('#faster').is(':checked') && prevent) {
                prevent = false;
                var el = $(this),
                   newOne = el.clone(true)
                            .css({'animation':'rotate 1.5s linear infinite'});
                el.before(newOne);
                $("." + el.attr("class") + ":last").remove();
                rotates = $('.rotate');
                listen();
            }
        });
    }
}
listen();
*/