/*Animates the background gradient*/
/*https://csshero.org/mesher/*/
/*https://codepen.io/P1N2O/pen/pyBNzX*/
/*  USAGE:
  background: linear-gradient(-45deg, #232931, #334252, #232855, #163a5f);
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
*/
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*Animates the letters to come one at a time*/
/* Credit: https://stackoverflow.com/questions/33486228/how-to-reveal-one-letter-at-a-time*/
/* USAGE:
  animation: type 2s steps(60, end);
 */
@keyframes type {
  from { width: 0; }
}

/* Appears to make an element blink by toggling the opacity */
@keyframes blink {
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: inherit;
    }
}

/* Changes the colour of the div/image to grayscale and back again */
/* Credit: chatgpt */
/* USAGE:
  animation: loadingColourChange 2s infinite;
 */
@keyframes loadingColourChange {
  0%, 100% {
    filter: grayscale(0%);
  }
  50% {
    filter: grayscale(100%);
  }
}