/* Check my videoblog: https://www.youtube.com/watch?v=dQw4w9WgXcQ */
html,
body {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #000;
  cursor: none;
  -webkit-animation: heno 2s infinite linear;
          animation: heno 2s infinite linear;
}

.body--invert {
  -webkit-animation: none;
          animation: none;
}



canvas {
  max-width: 100%;
  width: 800px;
  margin: auto;
  overflow: hidden;
}

@-webkit-keyframes heno {
  0% {
    -webkit-filter: blur(0.5px) contrast(1);
            filter: blur(0.5px) contrast(1);
  }

  50% {
    -webkit-filter: blur(8px) contrast(1000);
            filter: blur(8px) contrast(1000);
  }

  100% {
    -webkit-filter: blur(0.5px) contrast(1);
            filter: blur(0.5px) contrast(1);
  }

}

@keyframes heno {
  0% {
    -webkit-filter: blur(0.5px) contrast(1);
            filter: blur(0.5px) contrast(1);
  }

  50% {
    -webkit-filter: blur(8px) contrast(1000);
            filter: blur(8px) contrast(1000);
  }

  100% {
    -webkit-filter: blur(0.5px) contrast(1);
            filter: blur(0.5px) contrast(1);
  }

}

@-webkit-keyframes henoMin {
  0% {
    -webkit-filter: blur(0px) contrast(1);
            filter: blur(0px) contrast(1);
  }

  50% {
    -webkit-filter: blur(4px) contrast(1000);
            filter: blur(4px) contrast(1000);
  }

  100% {
    -webkit-filter: blur(0px) contrast(1);
            filter: blur(0px) contrast(1);
  }

}

@keyframes henoMin {
  0% {
    -webkit-filter: blur(0px) contrast(1);
            filter: blur(0px) contrast(1);
  }

  50% {
    -webkit-filter: blur(4px) contrast(1000);
            filter: blur(4px) contrast(1000);
  }

  100% {
    -webkit-filter: blur(0px) contrast(1);
            filter: blur(0px) contrast(1);
  }

}

@media (max-width: 800px) {
  body {
    -webkit-animation: henoMin 2s infinite linear;
            animation: henoMin 2s infinite linear;
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}