@font-face {
    font-family: 'fsex';
    /* set name */
    src: url(https://cdn.snapps.dev/misc/fsex.ttf);
    /* url of the font */
}


:root{
--foreground:#ccc;
--background:#000000;
--link-color-1:#0ff;
--error:#a00;
}

html,
body {
    font-family: fsex;
    padding: .0;
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    text-shadow: 0 0 .2em var(--foreground);
    white-space: pre-wrap;
}

body {
    padding: 1em;
}

p,span{
    --color: var(--foreground);
    margin: 0;
    color: var(--color);
    text-shadow: 0 0 .2em var(--color);
}

a{
    margin: 0;
    color: var(--link-color-1);
    text-shadow: 0 0 .2em var(--link-color-1);
    text-decoration: none;
}

a:hover, a:focus{
    margin: 0;
    color: var(--background);
    text-shadow: 0 0 0 var(--background);
    background-color: var(--link-color-1);
}

a.nr{
    margin: 0;
    color: var(--error);
    text-shadow: 0 0 .2em var(--error);
    text-decoration: none;
}

a.nr:hover,a.nr:focus{
    margin: 0;
    color: var(--foreground);
    text-shadow: 0 0 0em var(--foreground);
    background-color: var(--error);
    text-decoration: none;
}

a > span {
    display: none;
}

a:hover > span {
        color: var(--foreground);
    text-shadow: 0 0 .2em var(--foreground);
        background-color: var(--background);
    display: initial;
    
}

a:hover > span::before {
    
    content:' - ';
}

.red    { --color: #f00;}
.orange { --color: #f80;}
.yellow { --color: #ff0;}
.green  { --color: #0f0;}
.cyan   { --color: #0ff;}
.blue   { --color: #00f;}
.violet { --color: #f0f;}