:root {
    --color0:  black;
    --color1:  white;
    --color2:  #666;      /* dark grey*/
    --color3:  #eee;      /* very light grey */
    --color4:  #ccc;      /* light grey */
    --color5:  #999;      /* medium grey */
    --color6:  #3d5a80;   /* dark blue */
    --color7:  #98c1d9;   /* medium blue */
    --color8:  #e0fbfc;   /* light blue */
    --color9:  #ed6a5a;   /* red */
    --color10: #a3f7b5;   /* green */
    --color11: #cce0ec;   /* etwas dunkler: #b2d0e2 */
    --color12: #c7352d;
    --color13: #347c3b;

    /* main */
    --text1: var(--color0);
    --bg1:   var(--color1);
    --link1: var(--color2);
    /* header */
    --text2: var(--color1);
    --bg2:   var(--color6);
    --link2: var(--color4);
    /* footer */
    --text3: var(--color1);
    --bg3:   var(--color2);
    --link3: var(--color4);
    /* projects 1 */
    --text4: var(--color0);
    --bg4:   var(--color11);
    --link4: var(--color2);
    /* projects 2 */
    --text5: var(--color0);
    --bg5:   var(--color1);
    --link5: var(--color2);
    /* accent */
    --accent: var(--color7);
    /* background */
    --bgLightColor: var(--color8);
    --bgVeryLightGray: var(--color3);
    --bgLightGray:     var(--color4);
    --bgMediumGray:    var(--color5);
    --bgDarkGray:      var(--color2);
    /* text */
    --textDarkGray:   var(--color2);
    --textMediumGray: var(--color5);
    --textLightGray:  var(--color4);
    /* border */
    --border: var(--color5);
    /* signals */
    --bgRed:   var(--color9);
    --bgGreen: var(--color10);
    --bgBlue:  var(--color7);
    --textRed:   var(--color12);
    --textGreen: var(--color13);
    --textBlue:  var(--color6);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text1);
    background: var(--bg1);
}

body.no-scroll {
    overflow: hidden;
}

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

#headerBar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    color: var(--text2);
    background: var(--bg2);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav {
    margin: 0.5em;
    padding: 0.5em;
}

#home {
    width: 2.5em;
    height: auto;
}

#home path {
    fill: var(--text2);
}

#menuIcon {
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
}

header a {
    color: var(--link2);
}

header h1 {
    text-align: center;
    line-height: 120%;
}

#navMenu {
    position: fixed;
    z-index: 100;
    top: 4.5em;
    right: -19em;
    color: var(--text1);
    background: var(--bgLightGray);
    transition: right 0.3s ease-in-out;
    padding-right: 4em;
    max-height: 80vh; /* Der Container kann maximal 80% der Bildschirmhöhe einnehmen */
    overflow-y: auto;
    text-align: left;
}

#navMenu a {
    text-decoration: none;
    color: var(--link1);
}

#navMenu ul {
    list-style: none;
    padding: 0.5em;
}

#navMenu ul li {
    margin-bottom: 1em;
}

#navMenu.active {
    right: -0.5em;
}

.topLevel {
    font-weight: bold;
}

main {
    /* space for fixed header */
    margin-top: 6.5em;
    background: var(--bg1);
    color: var(--text1);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

article {
    max-width: 60em;
    padding: 0.5em;
    padding-bottom: 2em;
}

footer {
    width: 100%;
    padding-top: 2em;
    text-align: center;
    font-size: 80%;
    background: var(--bg3);
    color: var(--text3);
}

footer a {
    color: var(--link3);
}

#footer-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 2em;
}