@charset "UTF-8";
/* CSS Document */


.box.neon-box {
  background-image: url("../../images/brick_highlights.png");
  background-color: #4f575c; background-color: var(--dark-color);
  background-size: cover;
  background-position: center;
}

.neon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  text-align: center;
  line-height: 1;
  color: #fff1ec;
}

.neon:hover {
  -webkit-animation: neon .09s ease-in-out infinite alternate;
          animation: neon .09s ease-in-out infinite alternate;
}

/*-- Animation Keyframes --*/
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(248, 161, 136, 0.92), 0 0 20px #f04939, 0 0 54px #f04939;
  }
  to {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.98), 0 0 30px #f04939,  0 0 64px #f04939;
  }
}
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(248, 161, 136, 0.92), 0 0 20px #f04939, 0 0 54px #f04939;
  }
  to {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.98), 0 0 30px #f04939,  0 0 64px #f04939;
  }
}

@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(248, 161, 136, 0.92), 0 0 20px var(--accent-color), 0 0 54px var(--accent-color);
  }
  to {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.98), 0 0 30px var(--accent-color),  0 0 64px var(--accent-color);
  }
}