body {
	background: linear-gradient(-45deg, #000000, #000000, #000000, #000000);
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite;
			
}

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

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
:root {
	--effect: hover 1s linear infinite;
  }
  *{
	 margin:0;
  }
  
  body {
	
	
	
	align-items: center;
	justify-content: center;
	
  }
  
  div {
	text-align: center;
  }
  
  p {
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	font-size: 2em;
	font-family: arial;
	font-weight: 600;
	transform: scale(.5);
	color: #121212;
	-webkit-text-stroke: 2px gray;
  }
  
  p:nth-child(1) {
	animation: var(--effect);
	
  }
  
  p:nth-child(2) {
	animation: var(--effect) .125s;
  }
  
  p:nth-child(3) {
	animation: var(--effect) .25s;
  }
  
  p:nth-child(4) {
	animation: var(--effect) .375s;
  }
  
  p:nth-child(5) {
	animation: var(--effect) .5s;
  }
  
  p:nth-child(6) {
	animation: var(--effect) .675s;
  }
  
  p:nth-child(7) {
	animation: var(--effect) .75s;
	
  }
  
  @keyframes hover {
	0% {
	  transform: scale(.5);
	 
	  -webkit-text-stroke: 2px gray;
	}
  
	20% {
	  transform: scale(1);
	  color: pink;
	  -webkit-text-stroke: 3px red;
	  filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 3px red)drop-shadow(0 0 5px red)hue-rotate(10turn);
	}
  
	50% {
	  transform: scale(.5);
	  color: #121212;
	  -webkit-text-stroke: 2px gray;
	  
	}
  
  
  }