Neon style with `text-shadow`

HTML

<!-- head -->
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
<!-- /head -->

<div class="neon-board">
    <h1 class="neon">Hello world!</h1>
    <h2 class="neon">Welcome to <a href="http://ginpen.com/">Ginpen.com</a>!</h2>
    <p class="neon yellow">
        Humpty Dumpty sat on a wall.<br />
        Humpty Dumpty had a great fall.<br />
        All the king's horses and all the king's men<br />
        couldn't put Humpty together again.
    </p>
    <p class="neon blue">
        This is Ginpei, a JavaScripter.
    </p>
    <p class="neon green icon">〠</p>
</div>

CSS

.neon-board {
    border-radius: .5em;
    box-shadow:
        -1px -1px #fdf,
         1px -1px #fdf,
         1px  1px #fdf,
        -1px  1px #fdf,
        0 0 .1em #fdf,
        0 0 .1em #fdf inset,
        0 0 .5em #fdf,
        0 0 .5em #fdf inset,
        0 0 1em #fdf,
        0 0 1em #fdf inset;
    margin: .5em;
    padding: .5em;
}
.neon {
    color: #fdf;
    font-family: "Grand Hotel", fantasy;
    font-style: italic;
    text-shadow:
        0 0 .1em #fdf,
        0 0 .5em #fdf,
        0 0 1em #fdf;
    -moz-transition: text-shadow 1s;
    -ms-transition: text-shadow 1s;
    -o-transition: text-shadow 1s;
    -webkit-transition: text-shadow 1s;
    transition: text-shadow 1s;
}
.neon:hover {
    text-shadow:
        0 0 .1em #fdf,
        0 0 .1em #fdf,
        0 0 .1em #fdf,
        0 0 .5em #fdf,
        0 0 1em #fdf;
}
.neon a {
    color: #f9f;
}

.neon.yellow {
    color: #ffe;
    text-shadow:
        0 0 .1em #ffe,
        0 0 .5em #ffe,
        0 0 1em #ffe;
}
.neon.yellow:hover {
    color: #ffe;
    text-shadow:
        0 0 .1em #ffe,
        0 0 .1em #ffe,
        0 0 .1em #ffe,
        0 0 .5em #ffe,
        0 0 1em #ffe;
}

.neon.blue {
    color: #eef;
    text-shadow:
        0 0 .1em #eef,
        0 0 .5em #eef,
        0 0 1em #eef;
}
.neon.blue:hover {
    text-shadow:
        0 0 .1em #eef,
        0 0 .1em #eef,
        0 0 .1em #eef,
        0 0 .5em #eef,
        0 0 1em #eef;
}

.neon.green {
    color: #cfc;
    text-shadow:
        0 0 .1em #cfc,
        0 0 .5em #cfc,
        0 0 1em #cfc;
}
.neon.green:hover {
    text-shadow:
        0 0 .1em #cfc,
        0 0 .1em #cfc,
        0 0 .1em #cfc,
        0 0 .5em #cfc,
        0 0 1em #cfc;
}


body.night {
    background-color: #000;
    font-size: 30px;
}
h1 {
    font-size: 2em;
    text-align: center;
}
p.icon {
    font-size: 5em;
    font-style: inherit;
    text-align: center;
}