html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.back {
   position:absolute;
   z-index:-1;
    width: 100%;
    height: 100%;
    @include background-image(linear-gradient(to bottom,rgba(255,255,255,0.0) 0%,rgba(255,255,255,0.5) 100%),
      linear-gradient(to right,rgba(134, 86, 181,.5),rgba(77, 191, 191,.5),rgba(134, 175, 93,.5),rgba(191, 76, 76,.5),rgba(134, 86, 181,.5)));
    animation: hueshift 30s linear infinite;
}
.overlay {
    width: 100%;
    height: 100%;
    @include background-image(radial-gradient(circle at top,rgba(255,255,255,0.0),rgba(255,255,255,.5)),
      repeating-linear-gradient(45deg,rgba(255,255,255,0.2) 0px,rgba(255,255,255,0.2) 10px,rgba(255,255,255,0.5) 10px,rgba(255,255,255,0.5) 20px));
}
@include keyframes(hueshift) {
    from {
        background-position: 0;
    }
    to {
        background-position: 100vw 0;
    }
}

canvas{
  position:absolute;
  
}