Edit in JSFiddle

<div id="container">
  <p><span>Zcode</span></p>  
  <p><span>Zcode</span></p>
</div>
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500,700');
body {
  background-color: #222222;
}

#container {
  width: 100%;
}

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

span {
  cursor:pointer;
  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:700;
}

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

p:nth-child(2) span {
  color: #228DFF;
 font-family: 'Ubuntu', sans-serif;
 font-weight:700;
}

p:nth-child(2) span:hover {
  animation: neon2 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;
  }
}

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