body {
    font-family: "Permanent Marker", cursive;
    background-color: #2a3518;

}

/* Impressum text */
.datenschutz {
    margin-top: 3vw;
}

/* impressum auf der home seite */

.impressum-main {
    padding-left: 43vw;
    padding-right: 44vw;
    background-color: #2a351881;
    color: #000000cb;

}



/* Titel homepage */
h1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #d4cf9183;
    padding: 5vw;
    font-size: 7vw;
    border-radius: 50px;
    margin-top: 12vw;

}

/* Mättis collection */
p {
    margin-top: -9vw;
    color: #000000;
    text-align: center;
    font-size: 2vw;
}

/* header */
a {
    color: #000000;
    text-decoration: none;
    font-size: 2.5vw;
}


a:hover {
    text-decoration: underline;
}

.nav {
    margin-top: 30px;
    justify-content: space-evenly;
    font-size: xx-large;
}


/* insta logo */
.social-icons {
    margin-top: 2%;
    padding-bottom: 5vw;
    display: flex;
    justify-content: space-evenly;


}

/* email logo */
.social-icons>div {
    background-color: #d4d097;
    border-radius: 5vw;
     width: 40vw;
 }

 .insta {
    font-size: 3vw;
 }


.container {
    font-family: "Permanent Marker", cursive;
    border-radius: 3vw;
}

/* header */
header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #d4d091;

    padding: 1vw;
    height: 3vw;
    margin-top: -10px;
}

/* bild über mich */
.über-mich {
    display: flex;
    margin-top: -39vw;
    margin-left: 0vw;
    width: 44vw;
}

/* text über mich  */
.text-über-mich {
    margin-top: 4vw;
    margin-left: 48vw;
    width: 45vw;
    padding: 1vw;
    background-color: #d4d091
}

/*bild über mich 2*/
.kamera {
    width: 40vw;
    margin-left: 59vw;
    margin-top: 1vw;
}

/* Text über mich 2*/
.kamera-text {
    margin-top: -45.5vw;
    margin-left: 5.5vw;
    width: 45vw;
    padding: 1vw;
    background-color: #d4d091
}


/* homepage background */
body.startseite {
    margin: 0;
    padding: 0;
    background-image: url(images/home-main.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}


/* Die Photos für die Galerie */



.agalerie {
    width: 26vw;
    margin-left: 2.5vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-top: 1.5vw;
}

.bgalerie {
    width: 10vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-top: 1.5vw;
    margin-left: 1.5vw;
}

.cgalerie {
    width: 13vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.dgalerie {
    width: 23vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.egalerie {
    width: 23vw;
    margin-left: 2.5vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
}

.fgalerie {
    width: 23vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}


.ggalerie {
    width: 18vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.hgalerie {
    width: 12vw;
    padding: 1.5vw;
    ;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
}

.igalerie {
    width: 21vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.jgalerie {
    width: 12vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 2.5vw;
    margin-top: 2.5vw;
}

.kgalerie {
    width: 22vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;

}

.lgalerie {
    width: 18vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.mgalerie {
    width: 22vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.ngalerie {
    width: 12vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;

}

.ogalerie {
    width: 28vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
}

.pgalerie {
    width: 12vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.qgalerie {
    width: 22vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
}

.rgalerie {
    width: 13vw;
    padding: 1.5vw;
    background-color: #d4d091;
    border-radius: 2vw;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
}

/* Bilder in der Galerie bei Mobilansicht */

.galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.galerie img {
    margin-top: 2vw;
    border-radius: 10px;
}

/* Ab 800px oder kleiner: Bilder untereinander */
@media (max-width: 800px) {
    .galerie {
        flex-direction: column;
        align-items: center;
    }

    .galerie img {
        width: 90%;
    }

    .social-icons {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100% ;
    }
    .social-icons>div {
        width: 100%;
 }
 .insta {
    font-size: 6vw;
 }
 }