@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);

:root {
  /* Base font size */
  font-size: 10px;

  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}

body {
  font-family: 'Exo 2', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  min-height: 100vh;
}

h3 {
    font-size: 2rem;
    font-weight: 200;
    /* font-style: italic; */
    color: #fff !important;
    padding: 2rem 2rem 1.5rem;
    border: 0.4rem solid #fff;
    border-radius: 0rem;
    /* text-transform: uppercase; */
    animation: flicker 1.5s infinite alternate;
}

h3::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h3::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h3:focus {
  outline: none;
}

/* Animate neon flicker */
@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

        text-shadow:
            -0.2rem -0.2rem 1rem rgb(88, 69, 158),
            0.2rem 0.2rem 1rem rgb(19, 7, 7),
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);

        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);
    }

    20%, 24%, 55% {
        text-shadow: none;
        box-shadow: none;
    }
}