/* MENU PAGE */

body {
    background-color: rgb(251, 240, 226);
}

/* dit is de css voor mijn logo*/
.logo {
    font-family:garamond;
    font-size: 50px;
    text-align: center;
    text-transform: uppercase;
    background-color: rgb(247, 225, 212);
    color: rgb(191, 190, 190); 
    max-width:1000px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    
}

.menu ul,
li, /* dit is de css voor de tekst in mijn menubalk*/
a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    text-align: center;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    text-transform: capitalize;
    color: rgb(135, 134, 134); 
    display: flex;
    list-style-type: none;
    justify-content:space-around;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;

}

/* dit is een container tag in mijn css die ik bij meerdere delen in mijn website hebt gebruikt. Dit is simple een beige gekleurde achtergrond voor achter
 mijn teksten en plaatjes*/
.container{
   
    max-width:1000px;
    margin: 0 auto;
    background-color: rgb(247, 225, 212);
   
}

/* dit is de css voor mijn menu balk*/
.menucontainer{
 align-items: center;
 text-align: center;
 background-color: rgb(233, 206, 190);
 max-width:1000px;
 margin: 0 auto;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

 
}

/* dit is de css voor de banner foto die op de index pagina staat*/

#aboutMe img{

    height: 350px;
    width: 1000px; 
    max-width:1000px;
    margin: 0 auto;
    background-color: rgb(247, 225, 212);
    display: grid;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
   
    
}

/* dit is de css voor mijn About me kopje in de home page*/
#aboutMe h1{
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    text-transform: capitalize;
    display: grid;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    align-items: center;
    font-weight: 300;
    color:  rgb(225, 186, 165);
    text-decoration: none;
    
          
}


/* dit is de css voor de tekst onder het about me kopje in de home page*/

#aboutMe p{
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(155, 155, 155); 
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}


/* dit is de css tekst voor de tekst onderaan de pagina*/

.onder ul,
li {
    
    max-width:1000px;
    margin: 0 auto;
    background-color:  rgb(233, 206, 190);
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(158, 125, 104); 
    font-size: 15px;
    text-transform: capitalize;
    text-align: center;
    cursor:auto;

}

.copyrightcontainer{


font-size: 15px;
max-width:1000px;
margin: 0 auto;
color: rgb(158, 125, 104);

}



/* ABOUT PAGE */


/* dit is de css voor de h1 van de about webpagina. Dit is dan specifiek voor het stukje about me tekst*/


#inforeceptie h1{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    align-items: center;
    color:  rgb(225, 186, 165);
    padding-top: 15px;
    padding-bottom: 20px;



}

/* dit is de css voor de foto's die op de about webpagina staan. Hij is gelinkt bij alle drie de foto's*/

#inforeceptie img{

   

        height: 350px;
        width: 1000px; 
        max-width:1000px;
        margin: 0 auto;
        background-color: rgb(247, 225, 212);
        display: grid;
        padding-top: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        justify-content: center;
       


}

/* dit is de css voor de tekst die onder de foto's staan bij de about webpagina.*/
#inforeceptie p{

    font-family: Arial, Helvetica, sans-serif;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    color: rgb(155, 155, 155); 


}

/* PORTFOLIO PAGE */


/* dit is de css voor de tekst voor het kopje portfolio bij de portfolio webpagina .*/
#portfolio h1{


    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    color:  rgb(225, 186, 165); 

}


/* dit is de css voor de tekst die onder de foto's staan bij de portfolio webpagina. Dus de tekst die de social media etc aangeeft.*/

#portfolio p{

font-family: Arial, Helvetica, sans-serif;
margin-left: 30px;
margin-right: 30px;
font-weight: 300;
text-align: center;
color: rgb(155, 155, 155); 

}


/* dit is de css voor de foto's die op de portfolio pagina staan*/

#portfolio img{

    max-width: 50%;  
    height: 400px;
    width: 500px; 
    margin-left: 230px;
    margin-right: 400px;
    margin-bottom: 0px;

}


/* CONTACT PAGE */

/* dit is de css voor de contactgegevens pagina en dan specifiek voor het kopje contactgegevens.*/

#contactgegevens h1{

    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    color:  rgb(225, 186, 165);  


}

/* dit is de css voor de contactgegevens pagina en dan specifiek voor de tekst onder de foto's. De tekst die de informatie bevat.*/
#contactgegevens p{

    font-family: Arial, Helvetica, sans-serif;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: 300;
    text-align: center;
    color: rgb(155, 155, 155); 
    
    }
    

/* dit is de css voor de contactgevens pagina en dan specifiek voor de foto's die erop staan. De foto's van de social media.*/

#contactgegevens img{
    
        max-width: 100%;  
        height: 80px;
        width: 200px; 
        margin-left: 400px;
        margin-right: 400px;
        margin-bottom: 0px;
    
    }
    

.grid-container {

display: grid;
grid-template-columns: repeat(1, 1000px);
grid-gap: 1px;
max-width:1000px;
margin: 0 auto;
background-color: rgb(247, 225, 212);

}

/*container voor de about,socials,privacy policy, help tekst onder*/
.navcontainer {

    display: grid;
    grid-template-columns: repeat(1, 1000px);
    grid-gap: 10px;
    max-width:1000px;
    margin: 0 auto;
    background-color:  rgb(233, 206, 190);
    
}

/*grid/card voor main*/
      .card1 {
        
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            
          }
    
      .column {
        float: left;
        width: 50%;
        padding: 10px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
            
          }
          
      .row {margin: 0px 1px;}
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
    
      .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        padding: 20px;
        text-align: center;
        background-color: #f1f1f1;
      }

  

/* onderste grid/card*/
.cardonder {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
    text-align: center;
    background-color: rgb(233, 206, 190);      
}

.cardabout {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 20px;
    text-align: center;
    background-color: #f1f1f1;
  }



  .card4 {
        
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 50%
  }

  .column22 {
    float: left;
    width: 100%;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
        
      }