:root
{
    --hintergrund: #1a1a2e;
    --text: #e6e6e6;
    --überschriften: #16213e;
    --akzente: #4d7cff;
    --hover: #00ff9d;
}

body 
{
    margin: 0;
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    color: var(--text);
    background-color: var(--hintergrund);
    background-image: linear-gradient(45deg, #1a1a2e 25%, #252542 25%);
    scrollbar-color: var(--akzente) var(--überschriften); /*https://www.w3schools.com/cssref/css_pr_scrollbar-color.php*/
}

header 
{
    text-align: center;
    padding: 16px;
    background-color: var(--überschriften);
    border-bottom: 2px solid var(--akzente);
}

h1 
{
    margin: 0; /* entfernt den standard abstand */
    color: var(--akzente);
    text-shadow: 0 0 10px rgba(0, 179, 255, 0.3); /* glow effekt */
}

h2 
{
    margin: 0;
    margin-top: 8px;
    color: var(--hover);
}

a{
    color: white;
    text-decoration: none;
}

nav 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

nav a, footer a 
{
    margin: 0px;
    margin-left: 8px;
    margin-right: 8px;
    color: var(--akzente);
    font-weight: bold;
    transition: all 0.3s ease; /* https://www.w3schools.com/css/css3_transitions.asp */
    display: inline-block; /* ohne das hier funktioniert das transform nicht weil der browser nicht klarkommt */
    text-decoration: none;
}

nav a:hover, nav a:active, footer a:hover, footer a:active 
{
    color: var(--hover);
    transform: scale(1.1);
}

nav ul, footer ul {
    list-style-type: none;
    padding: 0; /* posionieren der liste */
    margin: 0;
}

nav li, footer li {
    margin: 0; 
    margin-top: 10px;
    margin-bottom: 10px;
}

footer 
{
    margin-top: auto;
    background-color: var(--hintergrund);
    text-align: center;
    padding: 16px;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) and (max-width: 1023px) 
{
    nav 
    {
        position: fixed;
        left: 0; /* nav nach ganz links bzw von ganz oben nach unten fixieren */
        top: 0; 
        bottom: 0;
        width: 200px;
        background-color: var(--überschriften);
        padding-top: 100px;
        border-right: 2px solid var(--akzente);
    }

    nav ul 
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
    }

    body 
    {
        padding-left: 200px;
    }

    footer 
    {
        padding-left: 50px;
    }
}

@media (min-width: 1024px) 
{
    nav 
    {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    nav ul 
    {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    nav + ul /* jedes weitere ul nach dem ersten hat abstand */
    { 
        margin-left: 20px;
    }

    footer a 
    {
        display: inline-block;
    }

    nav ul, footer ul 
    {
        display: flex;
        flex-direction: row;
        gap: 20px;
        margin: 0; /* positioniert die liste */
        padding: 0;
        list-style: none;
        justify-content: center;
    }

    nav li, footer li 
    { 
        margin: 0;  
    }
}