:root {
    --main-light: #ffffff;
    --main-dark: #333333;
    --main-dark-text: #000000;
    --main-light-text: var(--main-light);
    --main-fg: var(--main-dark-text);
    --main-bg: var(--main-light);
    --link-fg: #0000ee;
}

/* Set color variables for  */
@media (prefers-color-scheme: dark) {
    :root {
        --main-fg: var(--main-light-text);
        --main-bg: var(--main-dark);
        --link-fg: #00bbee;
    }
}

body {
    color: var(--main-fg);
    background-color: var(--main-bg);
    font-size: 100%;
    margin: 0;
}

p {
    margin: 8px;
    margin-left: 16px;
}

br {    /* Zeilenumbruch keine Höhe */
    content: "";
    display: block;
    height: 0px;
}

.nav_bar {
    font-family: 'Courier New', Courier, monospace;
    ul {
        /*immer oben (auch bei scrollen)*/
        position: fixed;
        top: 0;
        width: 100%;

        /*Gestaltung (Aussehen)*/
        list-style-type: none;  /* keine komischen Punkte */
        margin: 0;
        padding: 0;
        padding-left: 10px;
        overflow: hidden;

        font-size: 1.5em;   /* Schriftgröße */
        background-color: rgb(124, 240, 36);
    }

    li {
        float: left; /* <li>s schwimmen links */
        padding: 0;
    }

    li a {
        display: block;
        text-align: center;
        color: black;
        padding: 16px;
    }

    li:hover { /*Farbwechsel bei Überfahren*/
        background-color: rgb(10, 147, 15);
        a {
            color: white;
        }
    }

    .active {   /* Seite, auf der man sich befindet */
        a {
            color: white;
        }
        background-color: black;
    }
    .right {    /* rechtes <li> */
        float: right;
        margin-right: 16px; /* notwendig, da <ul> links padding hat */
    }
}

.content {
    margin-top: 76px;   /* notwendig, da Navigationsleiste fest oben */
    padding-left: 10px;
    padding-right: 10px;
}

.access_button { /* Link-Buttons */
        width: 100%;
        height: 54px;
    a {
        display: block;
        text-align: center;
        float: left;
        color: black;
        padding: 16px;
        /* background-color: rgb(0, 221, 255); */
        border-radius: 8px; /* abgerundete Ecken */
        text-decoration: none;  /* nicht unterstrichen */
        margin-right: 16px;

        img {
            vertical-align: middle;
            height: 3ex;
            width: 3ex;
            border-radius: 100%;
            background-color: var(--main-bg);
            box-shadow: 0 0 0.1em 0.1em var(--main-bg);
        }

    }

    .lightfg {
        color: var(--main-light-text);
    }

    .darkfg {
        color: var(--main-dark-text);
    }

    .intern-pad,
    .extern-pad {
        background-color: #7a1505;
    }
    .intern-cloud {
        background-color: #afcf0f;
    }
    .extern-cloud {
        background-color: #0082c9;
    }
    .intern-git {
        background-color: #100f0d;
    }
    .extern-git {
        background-color: #fb923c;
    }

    margin-bottom: 16px;

    a:hover {
        filter: brightness(80%);
    }
}

footer {
    margin-bottom: 32px;
    margin-left: 16px;
}

.quicklinks { /* Quicklink-Leiste an unterer Seite */
    ul {
        /*immer unten (auch bei scrollen)*/
        position: fixed;
        bottom: 0;
        width: 100%;

        list-style-type: none;  /* keine komischen Punkte */
        margin: 0;
        padding: 0;
        overflow: hidden;

        font-size: 1em;   /* Schriftgröße */
        background-color: black;
        color: white;
    }
    li {
        float: right; /* <li>s schwimmen rechts */
        padding-left: 10px;
        padding-right: 10px;
    }
    a {
        color: white;
    }
        a:hover {
            color: rgb(190, 190, 190);
        }
}

.hide_link { /* verschiedene Links fallen nicht auf */
    a:link {
        color: var(--link-fg);
    }
    a:visited {
        color: var(--link-fg);
    }
    a:active {
        color: var(--link-fg);
    }
}