/* Gibt die grundsätzlichen Style Informationen für jede Unterseite 
meiner Website an. Das ist durch das einfärben des Body Tags möglich. 
Das Einfärben des Body Tags sollte im gesamten Projekt nur hier durchgeführt
werden. */

@import url('../variablen.css');

body 
{
    font-family: 'Arial', sans-serif;

    /* Die Allgemeine Textfarbe von jedem Objekt im Body */
    color: var(--textFarbeBody);        
    
    /* Die Farbe von dem Objekt auf dem sich alle Komponenten befinden */
    background-color: var(--hintergrundFarbeBody);
    
    /* Layoutmanager so einstellen, dass alle Elemente im Body 
    untereinander (in einer spalte) angeordnet werden. Zusätzlich 
    sollen alle Elemente, also Nav, section, footer mittig zentriert
    werden. Das betrifft die Elemente: NavBar, Section(s), Footer*/
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;

    /* Stellt sicher, dass das Layout überall richtig ist */
    margin: 0;
    padding: 0;
}

html, section, body
{
    /* Folgendes verhindert, dass auf dem Handy zu viel leerer Bereich ist.
    Ich denke aber, dass das eine sehr unschöne lösung für dieses Problem ist
    und gehe davon aus, dass diese Problem durch Änderungen an anderer Stelle
    gelöst werden kann. */

    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
}