body {
  margin:0;
  padding: 0;
}
.wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
    background-size: 800% 800%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

.glitch
  {
    position: relative;

    width: 100%;
    height: 100vh;

    background: url(http://www.matim.net/matim-logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
  }

.glitch:before
  {
    content: '';
    position: absolute;
  
    width: 100%;
    height: 100%;

    background: url(http://www.matim.net/matim-logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto; /* contain for split effect */
    opacity: .5;
    mix-blend-mode: hard-light;
    animation: glitch1 1s linear infinite;
  }


@keyframes glitch1
{
  0%
  {
    background-position: 50% 50%;
    filter: hue-rotate(0deg);
  }
  10%
  {
    
    background-position: 49% 51%;
  }
  15%
  {
    
    background-position: 51% 49%;
  }
  20%
  {
    filter: hue-rotate(360deg);
  }
  25%
  {
    background-position: 50% 51%;
    filter: hue-rotate(0deg);
  }
  35%
  {
    background-position: 51% 50%;
    filter: hue-rotate(0deg);
  }
  45%
  {
    background-position: 49% 50%;
    filter: hue-rotate(0deg);
  }
  55%
  {
    background-position: 50% 49%;
    filter: hue-rotate(0deg);
  }
  75%
  {
    background-position: 49% 50%;
    filter: hue-rotate(0deg);
  }
  90%
  {
    background-position: 50% 51%;
    filter: hue-rotate(0deg);
  }
  100%
  {background-position: 50% 50%;
    
    filter: hue-rotate(0deg);
  }
}



.button {
  position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  background-color: #f4511e;
  border: none;
  color: white;
  font-family: verdana;
  text-shadow: 2px 2px 8px #000000;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px 10px 100px 100px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button:hover {opacity: 1;cursor: not-allowed;}

.button2 {
  position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  background-color: #2ae643e0;
  border: none;
  color: white;
  font-family: verdana;
  text-shadow: 2px 2px 8px #000000;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px 10px 100px 100px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {opacity: 1;}

.glitch2
  {
    position: relative;

    width: 100%;
    height: 100vh;

    background: url(http://www.matim.net/matim-logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
  }
  .glitch2:before
  {
    content: '';
    position: absolute;
  
    width: 100%;
    height: 100%;

    background: url(http://www.matim.net/matim-logo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto; /* contain for split effect */
    opacity: .5;
    mix-blend-mode: hard-light;
    animation: glitch2 5s linear infinite;
    animation-direction: alternate;
  }

  @keyframes glitch2
{
  0%
  {
    background-position: 50% 50%;
    filter: hue-rotate(0deg);
  }
  100%
  {background-position: 50% 50%;
    
    filter: hue-rotate(360deg);
  }
}