/* Fonts */
@font-face {
    font-family: "DejaVu Serif";
    src: url(fonts/DejaVuSerif.ttf)
}

@font-face {
    font-family: "DejaVu Serif";
    src: url(fonts/DejaVuSerif-Bold.ttf);
    font-weight: bold;
}

/* Color palette */
:root {
    --stWhite: #EDEEFF;
    --stBlue: #292A4B;
    --darkBlue: #00001F;
    --textBG: rgba(255,255,255,10%);
}

/* Standart */
body {
    background-color: #0F0F1F;
    color: var(--stWhite);
    font-family: sans-serif;
    margin: 0px;
    position: relative;
}

main {margin: 60px 8px 0px 8px;}

h1, h2, h3, h4 {
    color: var(--stWhite);
    font-family: "DejaVu Serif", serif;
}

h1 {
    text-align: center;
    padding: 10px;
    background-color: var(--stBlue);
}

h2, h3, h4 {
    clear: left;
    margin-left: 10px;
    margin-bottom: 10px;
}

.hidden {display: none !important;}

/* Top Navigation Bar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #00000F;
    width: 100%;
    height: 50px;
    z-index: 1;
}

nav ::selection {all:inherit;}

nav .nav-icon {
    text-decoration: none;
    color: var(--stWhite);
    float: left;
    font-size: 14px;
}

nav img {
    margin: 5px;
    vertical-align: middle;
}

nav .nav-buttons {
    display: flex;
    float: right;
    margin-right: 10px;
}

nav .nav-buttons > div {
    position: relative;
}

nav .nav-buttons button {
    height: 50px;
    padding: 0px 20px;
    border: none;
    color: inherit;
    background-color: inherit;
    cursor: pointer;
}

nav .nav-buttons button:hover {
    background-color: var(--stBlue);
}

nav .dropdown {
    background-color: var(--stWhite);
    position: absolute;
    z-index: 2;
    width: 100%;
}

nav .dropdown a {
    display: block;
    padding: 5px;
    color: black;
    text-decoration: none;
    text-align: center;
}

nav .dropdown a:hover {
    background-color: #CDCEDF;
}

/* Footer */

footer {
    background-color: #7f7f8f;
    min-height: 100px;

    display: flex;
    justify-content: space-evenly;
    color: black;
    padding: 10px 0px;
    box-sizing: border-box;
}

footer > div {
    text-align: center;
    margin: auto 0;
}

@media screen and (max-width: 600px) {
    footer {
        flex-direction: column;
        padding: 10px 20px;
    }
    
    footer > div {
        width: 90% !important; /* It is normally specified by JS */
        text-align: start;
    }

    footer img {
        width: 40px;
        margin: 5px 5px 5px 0px;
        vertical-align: middle;
    }

    footer br {display:none;}
}

footer a:link, footer a:visited {color: black;}
footer a:hover {color: var(--stBlue);}

/* Table of Contents */
.conttable {
    background-color: var(--stBlue);
    border: 1px solid var(--stWhite);
    float: left;
    padding: 0px 5px 5px;
    margin: 0px 20px 20px;
}

.conttable h3 {margin: 15px 5px;}
.conttable ol {margin-top: 0px;}

/* Tables */
table {
    color: var(--stWhite);
    padding: 5px;
    margin: 20px;
    padding-top: 0px;
    margin-top: 0px;
}

table, tr, th, td {
    border: 1px solid var(--stWhite);
    border-collapse: collapse;
}

th, td {padding: 2px 7px;}

.theader {font-size: 18px; background-color: var(--stBlue) ;}
.teven {background-color: #00001F;}
.todd {background-color: #0F0F2F;}

.tunfinished { /*DEBUG*/
    background-color: #202020 !important;
    color:#9999A5 !important;
} 

/* Links */
a:link:not(nav a, footer a) {color: var(--stWhite);}
a:visited:not(nav a, footer a) {color:#BEBECA;}
a:hover:not(nav a, footer a) {color:#9999A5;}
a:active:not(nav a, footer a) {color:#7F7FFF;}

/* Special information */
var {
    background-color: var(--textBG);
    padding: 0px 2px;
    border-radius: 5px;
    color: #ff7f7f;
}

span.tag {
    background-color: var(--textBG);
    padding: 0px 2px;
    border-radius: 5px;
    color: #7fff7f;
}

span.tag::before {content:"<";}
span.tag::after {content:">";}

span.css {
    background-color: var(--textBG);
    padding: 0px 2px;
    border-radius: 5px;
    color: #ffff7f;
}