Edit in JSFiddle

<div id="container">

  <p> <span>RED</span></p>

  <p><span>BLUE</span></p>

  <p><span>Yellow</span></p>

  <p><span>GREEN</span></p>

  <p><span>ORANGE</span></p>

  <p><span>VIOLET</span></p>

</div>
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=Courgette');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Frijole');
body {
  background-color: #222222;
}

#container {
  width: 100%;
}

/*Neon*/
p {
  text-align: center;
  font-size: 7em;
  margin: 20px 0 20px 0;
}

span {
  cursor:pointer;
  text-decoration: none;
  transition: all 0.5s;
}

p:nth-child(1) span {
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
  animation: neon1 1.5s ease-in-out infinite alternate;
  font-weight:600;
}

p:nth-child(1) span:hover {
  color: #FF1177;
  animation: none;
}

p:nth-child(2) span {
  color: #228DFF;
  font-family: 'Audiowide', cursive;
}

p:nth-child(2) span:hover {
  animation: neon2 1.5s ease-in-out infinite alternate;
}

p:nth-child(3) span {
  color: #FFDD1B;
  font-family: 'Courgette', cursive;
}

p:nth-child(3) span:hover {
  animation: neon3 1.5s ease-in-out infinite alternate;
}

p:nth-child(4) span {
  color: #B6FF00;
  font-family: 'Permanent Marker', cursive;
}

p:nth-child(4) span:hover {
  animation: neon4 1.5s ease-in-out infinite alternate;
}

p:nth-child(5) span{
  color: #FF9900;
  font-family: 'Righteous', cursive;
}

p:nth-child(5) span:hover {
  animation: neon5 1.5s ease-in-out infinite alternate;
}

p:nth-child(6) span {
  color: #BA01FF;
  font-family: 'Frijole', cursive;
}

p:nth-child(6) span:hover {
  animation: neon6 1.5s ease-in-out infinite alternate;
}

p span:hover {
  color: #ffffff;
}


@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  }
}

@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
  }
}

@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
  }
}

@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
  }
}

@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
  }
}

@media (max-width: 650px) {
  #container {
    width: 100%;
  }
  p {
    font-size: 3.5em;
  }
}