/** vh = viewpord height
100 vh = Screen höhe*/
/** CSS RESET */

/* Diese Klasse definiert das Hintergrundbild, die Höhe, die Größe, die Position und den Rand für einen Abschnitt der Webseite */
.section1 {
    background-image: url(pie_hero1.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
    margin: 0;
    }
    
    /* Legt den Rand für den body-Bereich auf 0 */
    body {
    margin: 0;
    }
    
    /* Legt den Rand für den header-Bereich auf 0 */
    header {
    margin: 0;
    }
    
    /* Legt die Position, Breite und den Rand für ein bestimmtes Element mit der ID "nav-bild" fest */
    #nav-bild {
    position: relative;
    width: 97%;
    margin: 0;
    }
    
    /* Definieren Sie die Anzeige-Eigenschaft als Flex und zentrieren Sie die Elemente */
    nav {
    display: flex;
    align-items: center;
    }
    
    /* Entfernen Sie die Aufzählungszeichen und den Rand für die unordnete Liste in nav */
    nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 50px;
    }
    
    /* Definieren Sie die Anzeige-Eigenschaft jedes Listenelements als inline-block und 
    fügen Sie einen rechten Rand und einen Abstand zum oberen Rand hinzu */
    nav li {
    display: inline-block;
    margin-right: 16px;
    margin-top: 5%;
    }
    
    /* Definieren Sie die Schriftgröße, die Textdekoration, die Schriftart und die Farbe 
    für Links innerhalb der Listenelemente */
    nav ul li a {
    font-size: 17px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    color: white;
    }
    
    /* Definieren Sie die Breite, den Abstand zum oberen Rand und die Anzeige-Eigenschaft 
    für die ID "logo" */
    #logo {
    width: 10%;
    margin-top: 1%;
    display: inline-block;
    opacity: 100;
    margin-left: 30px;
    }
    
    /* Definieren Sie die Farbe, Schriftart und Schriftgröße für ein bestimmtes Element 
    mit der ID "welcome" */
    #welcome {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 400%;
    }
    
    /* Definieren Sie den Abstand zum oberen Rand, den linken Rand und die Schriftgröße für 
    ein das Element mit der ID "überschrift" */
    #überschrift {
    padding: 20px;
    margin-top: 0%;
    margin-left: 3%;
}
        

/* Hier ist die zeite sektion. Mit einer größe von 100vh. hier wurde für die zwei boxen auch ein 
grid erstellt die jeweils von der seite 50% einnehmen. Mithilfe von den div´s werden die 
Bilder zentriert. Horizontal aber auch vertikal. */

#section2 {
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}
.div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(pattern_core.jpg);
    background-repeat: 4;
    width: 100%;
    height: 100%;
}

.div2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgb(204, 200, 200);
}

.left {
    width: 50%;
}

.right {
    width: 50%;   
}

/** Hier ist die dritte Sektion */
/* Ein Gitterlayout mit 2 gleichgroßen Zeilen einrichten */
.section3 {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    }
    
    /* Inhalt in der ersten Gitterzeile horizontal zentrieren */
    .div-horizontal-1 {
    display: flex;
    justify-content: center;
    background-color: rgb(120, 177, 252);
    height: 100%;
    }
    
    /* Inhalt horizontal zentrieren mit einer Breite von 26% */
    .ask_about {
    display: flex;
    justify-content: center;
    width: 26%;
    }
    
    /* Inhalt in der zweiten Gitterzeile horizontal zentrieren und einen Schatten hinzufügen */
    .div-horizontal-2 {
    display: flex;
    height: 100%;
    justify-content: center;
    background-color: rgb(134, 185, 252);
    box-shadow: 0px -0.5px 20px #2a2a2a;
    }
    
    /* Den Text mit einer Schriftgröße von 80px, zentriert, mit der Schriftart 'Open Sans', 
    in weißer Farbe und mit einer relativen Position zum oberen Rand von 55% defienieren */
    #Behind {
    font-size: 80px;
    display: flex;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
    color: white;
    position: relative;
    top: 55%;
}    

/* Hier ist die letzte sektion (4) */
/* Höhe der sektion wurde auf 100vh gesetzt. Display ist auf flex um
die Bilder mit algin-items und justify-content zu zentrieren */

.section4 {
    height: 100vh;
    background-color: rgb(90, 153, 212);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Die größe und der Abstand der bilder wird hier definiert*/

img {
    width: 20%;
    margin: 0 10px;
    padding: 20px;
}

/*Den Abstand zwischen den 2 und 3 bild vergrößern*/
.img1 {
    padding-right: 100px;
}