.container {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Whitespace Blackspace"
      "Greyspace Greyspace";
  }
  
  .Whitespace { grid-area: Whitespace;
     
  }
  
  .Blackspace { grid-area: Blackspace;
    background-color: #212529;
 }
  
  .Greyspace { grid-area: Greyspace;
    background-color: #E7E7E7;
    /* background-color: #00ff1e9f; */
    position: relative;
}
  
  
  html, body , .container {
    height: 100%;
    margin: 0;
  }
  
  /*
  
  .container * {
    border: 1px solid red;
    position: relative;
  }
  
  .container *:after {
    content:attr(class);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
  }
  
  */

  * {
    font-family: 'Jost';
  }

  .whitetext {
    display: flex;
    margin: 15px;
    flex-direction: column;

  }

  .whitetext h1 {
    font-size: 35px;
    font-weight:bold;
    font-family: 'Ink';

  }

  
  .whitetext h2 {
    font-size: 28px;
    color:#B5EBE8;
    margin-bottom:0px;
    font-weight:bold;

  }

  
  .whitetext p {
    font-size: 22px;
    padding:20px;
    padding-left:0px;
    margin:0px;
    
  }

  .blackitems {
    display: flex;
    margin: 0px;
    flex-direction: column;
    align-items: flex-end;
    color:white;
    max-height:100%;
  }

  .blackheaders {
    padding-bottom: 10px;
    font-weight:bold;
    
  }

  .imagery img {
    max-width: 100%;
    max-height: 100%;
  }

  .greyarea {
    display: flex;
    margin: 2px;
    flex-direction: column;
    align-items: center;    
  }

  .squares {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
  }


  
  .individualsquare {
    padding:20px;
    margin:10px;
    width:320px;
    height:150px;
    background-color: white;
  }

  .individualsquare:nth-child(1){
    background-color: #B5DAEB;
  }

  
  .individualsquare:nth-child(3){
    background-color: #B5EBE8;
  }

  .probleemoplosser {
    padding:20px;
    margin:10px;
    max-width:400px;
    background-color:#B5EBE8;
  }

  .snelleren {
    padding:20px;
    margin:10px;
    max-width:400px;
    background-color:#B5DAEB;
  }

  

  .contactsquares {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
  }

  .squares h1 {
    text-align:left;
    font-size:30px;
  }

  .squares p {
    text-align:center;
  }


  .clipPathGrey {
    position:  absolute;
    background-color: #E7E7E7;
    width: 100%;
    height: 100px;
    top: -90px;
    clip-path: polygon(0% 0%, 50% 88%, 100% 0%, 100% 100%, 0 100%);
  }

  @font-face {
    font-family: 'Jost';
    src: url('fonts/Jost/Jost-VariableFont_wght.ttf');
  }

  @font-face {
    font-family: 'Ink';
    src: url(fonts/Inknut_Antiqua/InknutAntiqua-Bold.ttf);
  }

  /* om die contact info en skills bold te maken moet je nth child 0 en 4 hebben ;) */

  @media only screen and (max-width: 450px) {
    body {
      background-color: rgb(255, 255, 255);
    }

    .squares {
    flex-direction: column;

    }

    .whitetext {
      margin-bottom: 80px;
    }


    .whitetext h1 {
      font-size:16px;
  
    }

    .whitetext h2 {
      font-size:16px;
    }

    .whitetext p {
      font-size:10px;
      padding-bottom:0px;

    }

    .clipPathGrey {
      height: 40px;
      top: -40px;
    }

    .blackheaders h1 {
      font-size:16px;
      margin:10px;
      margin-top:30px;
    }

    .greyarea h1 {
      font-size:24px;
    }

    .individualsquare{
      width: 320px;
      height: 120px;
    }

    .individualsquare h1{
      font-size: 18px;
    }

    .individualsquare p{
      font-size: 14px;
    }

    .Blackspace {
      display: flex;
      
    }

    .blackitems {
      justify-content: space-between;
    }
  }