*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* padding und border innen abbilden*/
}

@font-face {
    font-display: swap; 
    font-family: nunito;
    src: url("../fonts/Nunito-Bold.ttf") format('truetype'); 
  }


body {
    margin: 0;
    padding: 0;
    font-family: nunito;

}

header {
    position: relative; /* Positionierung für das Pseudo-Element */
    margin: 0;
    text-align: center;
    color: #3982aa; 
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    min-height: 20vh;
    overflow: hidden; /* Überlauf verbergen */
}

header::before {
    content: ""; /* Notwendiges Pseudo-Element */
    position: absolute; /* Absolut positioniert */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/waffel.png'); /* Füge den Pfad zu deinem Hintergrundbild hinzu */
    background-size: cover;
    opacity: 1; /* Transparenz einstellen, z.B. 0.5 für 50% */
    z-index: 0; /* Hinter den anderen Inhalten */
}

    

h1 {
    padding: 5%;
    position: relative; 
    z-index: 1;
    font-size: 5em; /* Größe der Schriftart anpassen, z.B. 4em für größere Schrift */
    margin: 0; /* Abstand rund um die Überschrift entfernen */
    text-shadow:  2px  2px 2px black,
                  2px -2px 2px black,
                 -2px  2px 2px black,
                 -2px -2px 2px black;
}

h2 {
    text-align: center;
    color: #e47d97; 
    position: relative; 
    z-index: 1;
    font-size: 3em; /* Größe der Schriftart anpassen, z.B. 4em für größere Schrift */
    margin: 0; /* Abstand rund um die Überschrift entfernen */
    text-shadow:  2px  2px 2px black,
                  2px -2px 2px black,
                 -2px  2px 2px black,
                 -2px -2px 2px black;
}
h3 {
    text-align: center;
    position: relative; 
    z-index: 1;
    font-size: 5em; /* Größe der Schriftart anpassen, z.B. 4em für größere Schrift */
    margin: 0; /* Abstand rund um die Überschrift entfernen */
    text-shadow:  2px  2px 2px black,
                  2px -2px 2px black,
                 -2px  2px 2px black,
                 -2px -2px 2px black;
}

main {
    position: relative; /* Positionierung für das Pseudo-Element */
    text-align: center;
    padding: 60px 0; /* Abstand oben und unten */
    color: white; /* Textfarbe */
    overflow: hidden; /* Überlauf verbergen */
}

main::before {
    content: ""; /* Notwendiges Pseudo-Element */
    position: absolute; /* Absolut positioniert */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/background.png'); /* Füge den Pfad zu deinem Hintergrundbild hinzu */
    background-size: cover;
    opacity: 0.3; /* Transparenz einstellen, z.B. 0.5 für 50% */
    z-index: 0; /* Hinter den anderen Inhalten */
}

footer {
    background-color: #333; /* Dunkelgraue Farbe */
    color: #e47d97; /* Textfarbe */
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
    min-height: 10vh;
    padding: 10px;
}


.pad {
    padding: 25px;
}
.logo {
    position: relative;
    width: 80%;
    height: auto;
    z-index: 100;
}
.mar {
    margin: 25px;
}
.blue {
    color: #3982aa;
}