*{ /*Universalselektor*/
    margin:0px;
    padding:0px;
    font-family: 'Times New Roman', Times, serif;
}

body{
    background-color:#332020;
    margin:0px;
}

/*allgemeine Selektoren*/
section{
    padding:50px 30px;
    border-top:1px solid #3d2727;
}

img{
    width:100%; /*Bild füllt die Breite des Elternelements vollkommen aus*/
    height:auto; /*Die Höhe passt sich automatisch an die Breite an, sodass nichts verzerrt wird*/
    border-radius:10px;
    border:3px solid #b88c96;
}

div{
    border-radius:10px;
}

h2, h3, h4, h5, h6{
    color:#f4c9d6;
}

h2{
    font-size:35px;
    font-family:"Cinzel Decorative";
}

h3{
    font-size:27px;
    color:#b88c96;
    font-family:"Dancing Script";
}

h4{
    font-size:25px;
    color:#f4c9d6;
    font-family:"Dancing Script";
}

h5{
    font-size:23px;
    color:#f4c9d6;
    font-family:"Cinzel Decorative";
}

h6{
    font-size:21px;
    color:#b88c96;
    font-family:"Dancing Script";
}

p{
    color:#fff4e4;
    padding:20px;
    font-size:20px;
}







/*auf einzelne sections und klassen bezogene Selektoren*/
header{
    background-color:#332020;
    display:flex;
    padding:15px 30px;
    position:sticky;
    top:0;
    z-index:1000; /*header hat seine Position ganz oben also alles andere liegt darunter und wird verdeckt*/
    width:100%;
    border-bottom:1px solid #5c3a3a;
}

nav a{
    padding:20px;
    text-decoration:none;
    color:#fff4e4;
    transition:1s;
}

nav a:hover{
    color:#f4c9d6;
    font-size:110%;
    font-style: italic;
}





.home{
    background-image: url(images/PGang.jpg);
    background-repeat:no-repeat; /*Hintergrund wird nur einmal angezeigt und wiederholt sich nicht ständig*/
    background-size:cover; /*Hintergrundbild wird so skaliert, dass es den Bereich genau bedeckt*/
    background-position:center;
    height:100vh;
    width:100%;
    display:flex; /*für Ausrichtung*/
    align-items:center; /*vertikal*/
    justify-content:center; /*horizontal*/
    background-attachment:fixed; /*Hintergrundbild bleibt beim Scrollen fixiert während sich der restliche Inhalt darüberbewegt - Parallaxeffekt*/
}

.home h1{
    font-size:200px;
    font-family: "Passions Conflict";
    color:#5c3a3a;
}






.about-content{
    display:grid;
    grid-template-columns:auto auto auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
    "about-img1 about-me about-me"
    "about-img1 about-text about-text"
    "about-table about-table about-img2";
    gap:30px;
    padding:30px;
    align-items:stretch; /*Die Elemente passen sich der Größe der Grid-Zellen an*/
    text-align:center;
}

.about-headline{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about a{
    text-decoration:none;
    font-style:italic;
    color:#fff4e4;
    transition:1s;
}

.about a:hover{
    color:#f4c9d6;
}

table, td{
    border:1px solid #b88c96;
}

table{
    width:100%;
    height:100%;
}

td{
    color:#f4c9d6;
}

tr:nth-child(even) { /*Jede zweite Reihe der Tabelle*/
    background-color:#7a5151;
}

.about-content div{
    background-color:#5c3a3a;
    display:flex;
    flex-direction:column;
    justify-items:center;
    border:3px solid #7a5151;
}

.about-content h6:hover{
    color:#f4c9d6;
}





.school{
    background:linear-gradient(#332020, #5c3a3a, #332020);
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:center;
}

.school-type{
    display:flex;
    flex-direction:row;
    width:50%;
    background-color:#5c3a3a;
    padding:10px;
    border:3px solid #7a5151;
}

.school-type:hover{
    border:3px solid #b88c96;
    transition:1s;
}

.school-text{
    flex:1.5; /*text bekommt 1,5 mal so viel Platz wie school-img*/
    align-content:center;
}

.school-img{
    flex:1;
}






.projects{
    text-align:center;
}

.projects h2{
    margin:10px;
}


.Illustrator{ /*Ausrichtung der Boxen*/
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:
    "Adobe-Illustrator Illustrator-content"
    "Illustrator-text Illustrator-content";
    gap:10px;
    align-items:stretch;
    text-align:center;
    padding:10px;
    margin:30px 10px;
}

.Illustrator-content{ /*Ausrichtung der Bilder*/
    padding:10px;
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto auto;
    grid-template-areas:
    "kitesurfer gym4ever"
    "kitesurfer strand"
    "abstraktionsreihe strand";
    gap:10px;
}

.projects-headline{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.Illustrator div, .MBK div{
    background-color:#5c3a3a;
    padding:10px;
    border:3px solid #7a5151;
}

.Illustrator-intro, .MBK-intro{
    color:#f4c9d6;
    font-size:22px;
}

.Illustrator-text p:hover, .MBK-text p:hover{
    border:2px solid #f4c9d6;
    border-radius:10px;
}


.MBK{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:
    "MBK-content MBK"
    "MBK-content MBK-text";
    gap:10px;
    align-items:stretch;
    text-align:center;
    padding:10px;
    margin:30px 10px;
}

.MBK-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
    "knoppers käfer"
    "knoppers äpfel";
    gap:10px;
}







.interests{
    background:linear-gradient(#332020, #5c3a3a, #332020);
    min-height:400px;
}

.interest-content{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    gap:20px;
}


.card{
    width:350px;
    height:350px;
    position:relative;
    perspective: 1000px; /*für den 3d effekt*/
}

.card-content{
    width: 100%;
    height: 100%;
    position: absolute; /*Position richtet sich nach .card*/
    top:0;
    left:0;
    transform-style: preserve-3d; /*während dem drehen den 3d-effekt behalten*/
    transition: 1s;
}

.card-front{
    position: absolute; /*Position richtet sich nach .card-content*/
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /*Wenn der Flip passiert wird das was gerade hinten ist nicht mehr angezeigt*/
}

.card-back {
    transform: rotateY(180deg); /*Die Hinterseite ist default-mäßig um 180° gedreht also "umgedreht"*/
    position: absolute; /*Position richtet sich nach card-content*/
    backface-visibility: hidden;
}

.card-back img{
    filter:grayscale(100%) brightness(0.7); /*brightness(0.5) macht das Bild dunkler*/
}

.card p{
  position: absolute; /*Position richtet sichl nach card-back*/
  top:0;
  left:0;
  padding:10px;
  text-align:justify; /*Blocksatz*/
  background-color:rgba(184, 140, 150, 0.3);
  border:1px solid #7a5151;
  border-radius:10px;
}

.card h4{
    position:absolute; /*Position richtet sich nach card-front*/
    top:10px;
    left:10px;
    padding:2px 5px;
    background-color: rgba(122, 81, 81, 0.70);
    border:1px solid #b88c96;
    border-radius:10px;
}

.card:hover .card-content{
    transform: rotateY(180deg); /*Drehung nach der y-Achse um 180°*/
}
/*card:hover bedeutet dass sich die Karte dreht wenn über dem card Bereich gehovert wird ist also quasi der Auslöser und card-content ist das was sich dann wirklich dreht also quasi die animation*/







.gallery-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-areas:
        "img1 img2 img3 img3"
        "img4 img2 img5 img6"
        "img4 img7 img7 img8";
    gap:3px;
}

.gallery img{
    filter:grayscale(100%);/*schwarz-weiß-effekt*/
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.gallery img:hover{
    filter:none;
}





footer{
    border-top:1px solid #5c3a3a;
    width:100%;
    padding:15px 30px;
}

@media(max-width:1024px){ /*Änderungen für Geräte mit unter 1024px*/

    .about-content{
        grid-template-areas:
        "about-img2 about-me"
        "about-text about-text"
        "about-table about-img1";
    }

    .school-type{
        flex-direction:column;
    }

    .interest-content{
        flex-direction:column;
        align-items:center;
    }

    .Illustrator{
        display:flex;
        flex-direction:column;
    }

    .MBK{
        display:flex;
        flex-direction:column;
    }
}