.wrapper { 
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(140deg, #000000, #f4e42c, #7f1f81, #e73239, #fd5a20, #22336b);
  background-size: 1600% 1600%;
  z-index: -1;

-webkit-animation: made_you_look 30s ease infinite;
-z-animation: made_you_look 30s ease infinite;
-o-animation: made_you_look 30s ease infinite;
  animation: made_you_look 30s ease infinite;}

@-webkit-keyframes made_you_look {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes made_you_look {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes made_you_look {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes made_you_look { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.canvas { 
  height: 20%;
  width: 100%;
  margin: auto;
  background-image: url(slash_bg.gif);
  z-index: 1;