/*========== 
HOME PAGE 
============*/
html {
    font-family: sans-serif;
    font-size: 16px;
}

body {
    height: 100%;
}

h1 {
    font-weight: bold;
    font-size: medium;
}

h2 {
    font-weight: bold;
    font-size: medium;
}

/*HEADER*/
header {
    background-color: #F5D695;
    height: 65px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-columns: Het is eigenlijk een verkorte manier om herhalende waarden compacter weer te geven. 
    In plaats van grid-template-columns: 12 keer 1 van 12 op te schrijven, pak je nu '1 fractie' van 12 */

}

header .Pcard:nth-child(1) {
    grid-column: 1 / span 4;
    margin: 13px 20px;
}

/* grid-column: de 1 benoemt bij welk blokje hij start en de 4 geeft aan over hoeveel blokjes hij pakt. */
header .Pcard:nth-child(2) {
    grid-column: 5 / span 12;
    text-align: right;
    margin: 25px;
}


/*HEADER CONTENT*/
.logo {
    max-width: 50px;
}

.rozelogo {
    position: relative;
    width: 350px;
    right: 21%;
    top: 0%;
}

.Aboutme {
    /* button om naar de about me pagina te gaan */
    margin: 40px 20px;
    text-decoration: none;
    background-color: #CD6974;
    padding: 10px 20px;
    color: white;

}


/*CONTENT met behulp van Alphonso*/
.herocontent {
    background-image: url('../images/achtergrondhomepage.png');
    height: 540px;
    background-size: cover;
    /* cover -> dan pakt hij de hele browser grootte */
}

/* dit is voor als ik de achtergrond foto nog een keer wil vervangen voor een grid met alle bij behorende foto's
in overleg met Alphonso heb ik het nu bij een achtergrond foto gelaten.

.container {
    display: grid;
    margin: 20px 0px;
    grid-gap: 12px;
    grid-template-columns: 300px 300px 300px 300px 300px;
}
*/
.persoonlijk a {
    /* button om naar de persoonlijkeprojecten en schoolprojecten pagina te gaan */
    margin: 10px 10px;
    text-decoration: none;
    background-color: #9BD695;
    padding: 15px 15px;
    width: 165px;
    text-align: center;
    color: white;
}

.persoonlijk {
    display: grid;
    position: absolute;
    left: 70%;
    top: 18%;

}

/*========== 
    footer
============*/

footer {
    background-color: #000000;
    position: relative;
    height: 90px;
    position: fixed;
    /* fixed: zorgt er voor dat hij in zijn positie blijft */
    left: 0;
    bottom: 0;
    width: 100%;
}

.contact {
    margin: 0px 20px;
    color: white;
    text-align: center;
    padding-top: 10px;
}

.footerlink {
    color: white;
}

/* css voor de footer van de homepagina */
.homefooterlink {
    color: black;
}

.homecontact {
    margin: 0px 20px;
    color: black;
    text-align: center;
    padding-top: 10px;
}

.homefooter {
    background-color: #F5D695;
    height: 90px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

/*================
    About me page
==================*/

.fotomathanja {
    width: 200px;
    place-content: center;
    position: relative;
}

/*michelcontent*/
#michelcontent {
    padding: 60px;
    background-image: url('../images/lichtrozelogo.png');
    background-repeat: no-repeat;
    background-position: center;
}

#tekst {

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
}


#tekst .cards:nth-child(1) {
    grid-column: 1 / span 3;
    margin: 13px 20px;
}

#tekst .cards:nth-child(2) {
    grid-column: 6 / span 2;
    margin: 25px;
}

#tekst .cards:nth-child(3) {
    grid-column: 10 / span 4;
    margin: 25px;
}

/*=========================
    Persoonlijke projecten
===========================*/


/* Foto's van project 1*/
.hondfoto {
    width: 400px;
}

.hond {
    text-align: center;
}

/* Foto's van project 2*/
.muisfoto {
    width: 300px;
}

.muis {
    text-align: center;
}

/* Foto's van project 3*/
.schetsenfoto {
    width: 200px;
}

.schetsen {
    text-align: center;
}

.persoonlijke-projectentekst {
    text-align: center;
}


/*=========================
    School projecten
===========================*/

.schoolcontainer {

    max-width: 1000px;
    margin: 0 auto;
    place-content: center;
    display: grid;
    grid-gap: 16px;
    margin-bottom: 175px;
}

/* Foto's van het 1e project */
.Pimone {
    width: 175px;
}

.Pim {
    width: 350px;
}

.school-projectentekst {
    text-align: center;
    width: 850px;
}

/* Foto's van het 2e project */
.campagneposter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;

}