@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;
    cursor: pointer;
}

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;}

.consent-form[open] {
    background-color: var(--background);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

input[type="date"]{
    font-family: fsex;
    background-color: var(--background);
    color: var(--color);
    font-size: 1em;
    border:none;
}