* { 

    background-color:black;
}
  
html, body , .container {
  height: 100%;
  margin: 0;
}



.container {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Heather Heather Heather"
      "Tekstie Tekstie Tekstie"
      "Knoppen Knoppen Knoppen"
      "Knoppen Knoppen Knoppen"
      "Knoppen Knoppen Knoppen"
      "Footer Footer Footer";
  }
  
  .Heather { grid-area: Heather;
  
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .Tekstie { grid-area: Tekstie; }
  
  .Footer { grid-area: Footer; }
  
  .Knoppen { grid-area: Knoppen; 
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
  }
  
  
  .Heather h1 {

    color:#BF7E04;
    font-size: 32px;
    padding: 10px;

  }
.linkiewinkie a {
  text-decoration: none;
  color:white;
  font-size: 20px;
  padding: 10px

}
  .linkiewinkie {
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height:100px;
  }

  .Footer {

    background-color: #F19F05;
    
  }
  .Knoppie {
    background-color: #F19F05;
    width: 650px;
    height: 200px;
    display: flex;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    justify-content: space-around;
    align-items: center;
    border-radius:160px;
    }

  .tekst {
    display:flex;
    color:white;
    flex-direction: column;
    align-items: center;
  }

  .tekst h1 {
    color: white;
    font-size:60px;

  }

  .tekst h2 {
    color: white;
    font-size:40px;
  }

  .cleanLink {
    width:150px;
    height:150px;

  }
  .Knoppie img {
      background-color:#F19F05;
      width:150px;  
      height:150px;
    }

    @media (max-width:768px) {

      .Heather h1{
        font-size:28px;
      }

      .linkiewinkie a{
        font-size:18px;
      }

      .tekst h1 {
        font-size:48px;
      }

      .tekst h2 {

        font-size:32px;
      }
    }

    @media (max-width:450px) {

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

      .linkiewinkie a{
        font-size:12px;
      }

      .tekst h1 {
        font-size:36px;
      }

      .tekst h2 {

        font-size:26px;
      }

      .Knoppie img {
        width:100px;
        height:100px;
      }

        .cleanLink {
            background: #F19F05;
            display: flex;
            justify-content: center;
            align-items: center;
            width:125px;
            height:125px;
        }

        .body {
          height: 100 vh;
          overflow:hidden;
        }

    }