@import "font.css";
/* @import "modern.css"; */

:root {
    /* #34b3ca */
    --primary-value: 52, 179, 202;
    --primary: rgb(var(--primary-value));
    /* #878787 */
    --secondary-value: 135, 135, 135;
    --secondary: rgb(var(--secondary-value));
    /* BNP-Grün: --highlight: rgb(0, 145, 90); */
    --highlight: rgb(var(--primary-value));
    /* --text: rgb(0, 0, 0); */
    --text: rgb(255, 255, 255);
    /* not a regular IK color: */
    /* --text: hsl(0, 0%, 33%);  */
    /* --text-inv: rgb(255, 255, 255); */
    --text-inv: rgb(0, 0, 0);
    /* by BNP: --background: rgb(235, 241, 238); */
    /* old: --background: rgb(243, 243, 243); */
    /* --background-value: 255, 255, 255; */
    /* #424242 */
    --background-value: 66, 66, 66;
    --background: rgb(var(--background-value));
}

body {
    /* background-image: url("../imgs/background-left_bottom.png"); */
    /* background-position: left bottom; */
    /* background-size: auto; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */

    background-color: var(--background);
    color: var(--text);
}

.primary-background {
    background-color: var(--primary);
}

.secondary-background {
    background-color: var(--secondary);
}

.secondary-transparent-background {
    background-color: rgba(var(--secondary-value), 0.8);
}

.highlight-background {
    background-color: var(--highlight);
}

footer {
    border-style: solid;
    border-width: 0;
    border-top-width: medium;
    border-color: var(--highlight);
}

a {
    color: var(--highlight);
}

a.primary-background.text-inv:hover {
    background-color: var(--background);
    color: var(--primary);
    box-shadow: 0px 0px 5px rgba(var(--primary-value), 0.8);
}

.reader {
    background-color: rgba(var(--background-value), 0.6);
}

nav a {
    color: var(--text);
}

.nav-tabs a {
    text-transform: uppercase;
}



nav a:hover {
    color: var(--highlight);
}

.text-inv {
    color: var(--text-inv);
}

hr {
    border: none;
}

#title>div {
    background-color: rgba(var(--primary-value), 0.8);
}


.nav-container {
    background: rgba(var(--secondary-value), 0.8);

    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2);
}


.nav-tabs>li {
    background-color: var(--primary);
}

.nav-tabs a {
    color: var(--text-inv);
}



.menu-btn {
    border-radius: 5px 5px 0px 0px;
    background-color: var(--secondary)
}

.menu {

    background-color: var(--text)
}


@media (min-width : 1130px) {
    .menu {
        display: none;
    }

    .nav-container>.nav-tabs>li>a:hover {
        background-color: var(--background);
    }
    .nav-container>.nav-tabs>li {
        background-color: transparent;
    }

    .nav-container {
        background: rgba(var(--secondary-value), 0.4);
    }

    .nav-tabs a {
        color: var(--text);
    }

}