body{
    background-color: #fef5ea; /*achtergrond van de hele pagina*/
    font-family: 'Karla'; /*Letertype van de hele site*/
}


h1{font-size: 100%;} /*grote van de tekst van alle H1 */

h2{font-size: 200%;} /*grote van de tekst van alle H2*/
h2{
  text-align: center; /*tekst in het midden*/
}

header{ /*alles hieronder betreft de header*/
    ul {
        list-style-type: none;
        margin: 0; 
        padding: 0; /*padding is opvulling*/
      }
      
      li {
        display: inline; /*de default voor span*/
      }
}

/* NAVIGATIE */
.navbar{
  font-size: 160%;
  width: 50%; /*Breedte van de navbar*/
  margin: 24px auto; /*hoeveel ruimte er rondom zit*/
}

.navbar a{
  display: block; /*block voor onder elkaar*/
  text-decoration: none;
  color:#000000;
  transition: 0.3s;
}

.navbar a:hover{ /*dit zorg voor een overgang in de kleuren, van zwart naar groen*/
  color:#969c6d;
  transition: 0.3s; /*lengte van de overgang*/
}

.navbar ul{ /*dit target alleen het ul stukje binnen de navigatie*/
  display:table;
  width: 100%;
  text-align: center; 
  margin-bottom: 100px; /*ruimte aan de onderkant van de nagigatie bar*/
}

.navbar ul li{ /*dit taget de li*/
  display:table-cell;
  width: 10%;
}

/* HERO afbeeling en tekst */
#hero{
  width: 100%;
  overflow:hidden;
  font-size: 500%;
  margin: 150px auto; /*auto om het element horizontaal te centreren in de container.*/
}

#herotext2{
  transform: translate(0%, -500px);
  display: inline-block;
  font-size: 500%;
}

.smallherotext{
    font-size: 30%;
    display: inline-block;
    padding-left: 12px;
}

#heroimage2 {
  display: inline-block;
  width: 400px;
  margin-left: 300px;
}

#hero .container {
  display: grid; /*opzet van grid*/
  grid-template-columns: repeat(12,1fr); /*grid in kolommen*/
  grid-gap: 64px;/*ruimte tussen de grids*/
}

#hero .container .heroimage {
  grid-column: 3 / span 4; /*van af waar het element op het grind begint en over hoeveel vakjes die gaat*/
}

#hero .container .herotext {
  grid-column: 8 / span 4;
}

/*PROJECTEN cards*/
#projecten{
  max-width: 1200px ;
  margin: 60px auto; 
}

#projecten h1{
  font-size: 64px;
  margin-bottom: 35px;
  font-weight: 300;
}

#projecten .container {
    display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-gap: 64px;
  margin: 35px;
}

#projecten .container .card {
  padding: 32px;
}

#projecten .container .card:nth-child(1) { 
grid-column: 1 / span 4;
border-radius: 25px; /*ronde hoekjes*/
border: 2px solid #000000;
text-align: center;
}

#projecten .container .card:nth-child(2) { 
  grid-column: 5 / span 4;
  border-radius: 25px; /*ronde hoekjes*/
  border: 2px solid #000000;
  text-align: center;
  }

 #projecten .container .card:nth-child(3) { 
    grid-column: 9 / span 4;
    border-radius: 25px; /*ronde hoekjes*/
    border: 2px solid #000000;
    text-align: center;
    } 

    #projecten .container .card:nth-child(4) { 
      grid-column: 9 / span 4;
      border-radius: 25px; /*ronde hoekjes*/
      border: 2px solid #000000;
      text-align: center;
      }



    /* geeft maximale breedte en ruimte aan over de grids */
   

/*ABOUT */

#Portret img{
  border-radius: 100%;
   width: 300px;
}

#Portret .container {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-gap: 64px;
}

#Portret .container .portret{
  grid-column: 3 / span 3;
}

#Portret .container .tekstkop{
  grid-column: 6 / span 4;
  font-size: 200%;
}

#Portret .container .tekstinhoud{
  grid-column: 6 / span 4;
   }
 
#About{
  max-width: 1200px ;
  margin: 60px auto; 
}

#About .container {
  display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 64px;
}

#About .container .card:nth-child(1) { 
  grid-column: 1 / span 4;
  border-radius: 25px; /*ronde hoekjes*/
  border: 2px solid #000000;
  height: 300px
  }

  #About .container .card:nth-child(2) {
    grid-column: 5 / span 4;
    border-radius: 25px;
    border: 2px solid #000000;
  }

  #About .container .card:nth-child(3) { 
    grid-column: 9 / span 4;
    border-radius: 25px;
    border: 2px solid #000000;
    }

  /* footer */
footer {
  text-align: center; /*zet tekst in het midden*/
  padding: 20px; /*opvulling*/
  background-color: #d9d9d9; /*kleur van de footerbalk*/
 }