*, *::before, *::after {
	box-sizing: border-box;
  }
  
  html, body {
	height: 100%;
  }

  
/* pulsate */

  div {
	animation: pulsate 6s linear infinite;
  }
  
  @keyframes pulsate {
	50% {
	  box-shadow:
		0 0 20px #fff,
		20px 0 80px #f0f,
		-20px 0 80px #0ff,
		inset 0 0 50px #fff,
		inset -50px 0 80px #f0f,
		inset 50px 0 80px #0ff,
		inset -50px 0 300px #f0f,
		inset 50px 0 300px #0ff;
	}
  }

/* border animation */
  
  .target {
	width: 150px;
	color: #fff;
  }
  
  /*
  .target:hover {
	animation: rotate 4s linear infinite;
  }

   @keyframes rotate {
	to {
	  transform: rotate(1turn);
	}
  }
  */

  .words {
	margin: 20px 0;
	font-weight: 900;
	font-size: 8rem;
	text-transform: uppercase;
	color: #fff;
  }
  
  .words span {
	text-shadow: 5px 5px 0 rgb(255, 255, 255);
  }
  
  .target:hover ~ .words span {
	animation-name: pop-word;
	animation-duration: 1s;
	animation-fill-mode: forwards;
  }
  
  @keyframes pop-word {
	to {
	  text-shadow:
		5px 5px 0 yellow,
		10px 10px 0 orange,
		15px 15px 0 red,
		20px 20px 0 rgb(170, 0, 248);
	}
  }
  
  .words span:nth-child(2) { animation-delay: 0.5s; }
  .words span:nth-child(3) { animation-delay: 1s; }
  .words span:nth-child(4) { animation-delay: 1.5s; }
  .words span:nth-child(5) { animation-delay: 2s; }

  
  /* font sizes smaller screens */
  @media (max-width: 620px) {
	body {
	  font-size: 1.25rem;
	}
	
	.words {
	  font-size: 1.5rem;
	}
  }