Hmmm, hay algo en tu página que me está cargando la memoria del Firefox. Al cambiar de pestaña se nota que tarda bastante más de lo normal, y el scroll me va muy muy lento. Creo que debe ser ese reproductor de música que has puesto arriba (sin autoload, gracias a Dios xD).
Deberías ponerle alguna imagen al lado de cada link con el típico logo de Twitter, Facebook, etc. Y quizá no centrarlo todo directamente, sino usar una tabla para centrar el conjunto pero alinearlo todo al mismo nivel, tras la imagen.
Y, oh, en el código, estás usando IDs para llamar a estilos CSS. Para empezar, las IDs no se deberían usar para meros estilos, sino para identificadores únicos en la página. El ID Twitter lo usas varias veces, y eso es un error, debe aparecer solo una vez. En lugar de eso debes definir la clase Twitter y llamar a la clase Twitter para que se vea su estilo. La idea de una ID es que "identifica" algo único en la página, mientras que una Class te "clasifica" un elemento para aplicarle un estilo.
También de paso vinculo la clase Twitter solo para links (a.Twitter), porque no parece que lo vayas a usar para otra cosa.
Aún así, usas DIV en el html de forma superflua. Si quieres ponerle el estilo al link, pónselo al link, no es necesario un DIV adicional para que funcione (salvo que hayas probado con lo que te pongo ahora y no te funcione, pero es raro).
Luego, no te funciona la font-family Mistral. Tú la verás bien en tu PC, salvo por los jap chars (seguramente porque esta font no los tiene), pero el resto tendríamos que tenerla instalada para verla. Y no parece que sea del set típico instalado en Windows (creo). Veo que en CSS metiste la llamada al font, pero ¿has subido el archivo ttf al servidor? porque he probado la url directa y no va. Si quieres dejarla, genial, pero sube la font para que la veamos el resto. Y de paso ponle una secundaria de reserva, que tenga todo el mundo (puse Helvetica por ejemplo).
Los estilos de color prefiero ponerlos siempre en Hex completo (#000000 y no #000), aunque para usar ése, puedes poner directamente black.
a.Twitter {
font-family: Mistral, Helvetica;
text-align: center;
margin: 20px auto;
font-size: 40px;
color: #000000;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #006db9, 0 0 70px #006db9, 0 0 80px #006db9, 0 0 100px #006db9, 0 0 150px #006db9;
}
---
<a href="http://www.formspring.me/Suzamax" class="Twitter">Formspring</a>
También, como comentario general, creo que repites estilos en diferentes clases. Puedes reordenar todo el sistema de clases del CSS para que cada clase haga "una cosa", en vez de andar repitiendo las mismas propiedades en todas las clases (ahora IDs, pero deberían ser clases).
Por ejemplo, puedes ponerlo así:
a.Link {
font-family: Mistral;
text-align: center;
margin: 20px auto;
font-size: 40px;
color: #000000;
};
a.LinkJap {
font-family: Apricot;
text-align: center;
margin: 20px auto;
font-size: 48px;
text-transform: uppercase;
color: #ffffff;
};
.Japanese {
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;
};
etc. para el resto de clases, solo poniendo la propiedad text-shadow
Y no repitas las clases Twitter y Facebook (o MAL y yt) si van a ser idénticas, con una te basta. Twitter y Facebook tienen un color hex mínimamente distinto, pero apenas veo la diferencia xD.
