/************** GRADIENT ***************/

.gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
    background-position: 100% 50%;
  animation: gradient 20s linear infinite;
}
.gradient.reverse {
    background-position: 0% 50%;
  animation: gradientr 20s linear infinite;
}

.gradient.opaque {
  background: linear-gradient(-45deg, #ee7752aa, #e73c7eaa, #23a6d5aa, #23d5abaa);
  background-size: 400% 400%;
    background-position: 100% 50%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientr {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/************** PAN IMAGE ***************/
/*
.pan {
  animation: calc(pan * var(--xOffset)) 2s ease infinite;
}

@keyframes pan {
  0% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(0.5, 0.5);
  }
  75% {
    transform: translate(-0.5, -0.5);
  }
}
*/