:root {
    --default-font: 'Roboto', sans-serif;
    --special-font: 'Oswald', 'Roboto', sans-serif;
    --default-margin: 1em;
    --highlight-color: #057EAE;
    /* --highlight-color: #0EAE75; */
    --highlight-color-reduced: #057EAE88;
    --link-color: var(--text-color);
}
@media (prefers-color-scheme: light) {
    :root {
        --text-color-reduced: #888;
        --text-color: #555;
        --text-emph-color-reduced: #333;
        --text-emph-color: #111;
        --background-color-menu: #DDD;
        --background-color1: #FFF;
        --background-color2: #F8F8F8;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color-reduced: #777;
        --text-color: #AAA;
        --text-emph-color-reduced: #CCC;
        --text-emph-color: #EEE;
        --background-color-menu: #333;
        --background-color1: #000;
        --background-color2: #111;
    }
}

@font-face {
    font-family: 'Oswald';
    src: url('../font/Oswald.woff') format('woff'), url('../font/Oswald.ttf') format('truetype');
}


.hidden {
    display: none !important;
}

body {
    color: var(--text-color);
    background: var(--background-color1);
    font-family: var(--default-font);
}

a {
    color: var(--link-color);
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}