@font-face {
  font-family: Kaisei;
  src: url(Kaisei_HarunoUmi/KaiseiHarunoUmi-Regular.ttf);
}
@font-face {
  font-family: Jomhurai;
  src: url(Jomhuria/Jomhuria-Regular.ttf);
}

body{
  margin: 0px;
}


.container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.17fr 0.8fr 0.2fr 0.4fr 0.8fr 1fr 1.5fr 3.1fr 0.05fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Header Header Header Header Header Header"
      "Banner Banner Banner Banner Banner Banner"
      "Kop Kop Kop Kop Kop Kop"
      "Tekst Tekst Tekst Tekst Tekst Tekst"
      "Fotos Fotos Fotos Fotos Fotos Fotos"
      "Links2 Links2 Links2 Rechts2 Rechts2 Rechts2"
      "Links3 Links3 Links3 Rechts3 Rechts3 Rechts3"
      "Links-4 Links-4 Links-4 Rechts4 Rechts4 Rechts4"
      "Footer Footer Footer Footer Footer Footer";
  }
  
  .Banner { 
    grid-area: Banner;
    display: flex;
    width: 100%;
    justify-content: center;
  }

.Banner > img { 
    height: 350px;

}

  
  .Kop { 
    grid-area: Kop; 
    display: flex;
    width: 98vw;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: 20px;
    color: rgb(11, 11, 145);
    font-family: Kaisei;
    font-size: 20px;

}


  
  .Header {
    grid-area: Header;
    background-color: rgb(50, 205, 197);
    display: flex;
    align-items: center;
    color: white;
    height: 100px;
    width: 100vw;
    justify-content: space-between;
    position: fixed;
   
   
    }
     nav ul {
      margin: 0;
      padding: 0;
     
      display: flex;
      margin-bottom: 10px;
    }
    .Header > img {
      grid-area: Header;
      height: 100px;
    
     
      }


li {
        list-style: none;
        display: flex;
        
    }
    
li a {
        color: white;
        font-size: 150%;
        font-weight: bold;
        width: 20vw;
        height: 30px;
        font-family: Kaisei;
       
        
        
    }
  .Footer { 
    grid-area: Footer; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: rgb(11, 11, 145);
    background: rgb(78,213,206);
    color: rgb(11, 11, 145);
    height: 60px;
}
html{
  scroll-behavior: smooth;
}
  
  .Links2 { 
    grid-area: Links2;
    top: 100px;
}
.Links2 > iframe { 
    grid-area: Links2;
    margin-top: 30px;
    margin-left: 30px;
    box-shadow: 10px 10px 10px;
   

}
  
  .Links3 { 
    grid-area: Links3;
    margin-top: 105px;
    margin-left: 130px;
 }

 .Links3 > img {
    width: 450px;
    height: 450px;
    box-shadow: 10px 10px 10px;
   

 }
  
  .Links-4 { 
    grid-area: Links-4;
    margin-left: 130px;
    color: orange;
    font-size: 20px;
    background-color: rgb(11, 66, 184);
    height: 735px;
    width: 400px;
    padding-left: 10px;
    padding-right: 10px;
}


.Links-4 textarea{
  width: 98.7%;
  height: 90px;
}





  
  .Rechts2 { 
    grid-area: Rechts2; 
    color: rgb(11, 11, 145);
    z-index: -1;
    font-family: Kaisei;
}

.Rechts2 > div {
    font-size: 23px;
    width: 690px;
}
  
  .Rechts3 { 
    grid-area: Rechts3;
    font-size: 22px;
    width: 690px;
    margin-top: 65px;
    color: rgb(11, 11, 145);
    font-family: Kaisei;

}
  
  .Rechts4 { 
    grid-area: Rechts4; 
    margin-left: 110px;
    color: rgb(11, 11, 145);
    font-size: 20px;
    background-color: orange;
    height: 1120px;
    width: 460px;
    padding-left: 10px;
    padding-right: 10px;
    
}

.Rechts4 > h1{
  margin-left: 5vw;
  
}

.Rechts4 textarea{
  width: 98.7%;
  height: 90px;
}



  
  .Tekst { 
    grid-area: Tekst; 
    display: flex;  
    justify-content: center;
    font-size: 20px;
    color: rgb(11, 11, 145);
    font-family: Kaisei;
    width: 830px;
    margin-left: 340px;

}
  
  .Fotos { 
    grid-area: Fotos; 
    display: flex;
    gap: 17vw;
    margin-left: 120px;
}
  .Fotos > li{
    width: 500px;
    height: 300px;
    box-shadow: 10px 10px 10px;
  
}


.hoogte_id{

  height: 73px;

}
.linker_balk > h1 {
  font-size: 40px;
  margin-left: 4vw;
}

.contactenlijst{
  color: rgb(11, 11, 145);
}

.gegevens{
  display: flex;
  gap: 60px;
  
}
.b_achternaam{
  left: -20px;
}

.review {
  display: flex;
  margin-top: 100px;
  margin-left: 50px;
  gap: 18vw;

}