body{
 background-color: rgb(250, 230, 230);
}
header{
    /* position: fixed; */
    top:0;
    left: 0;
    width: 100%;	
    z-index: 9999;
    transition: all 300ms ease-in-out;
}
.navbar.scolled{
    background-color: black;
    opacity: 0.98;
}
.scroll-down {
	header {
		transform: translate3d(0, -100%, 0);
	}
}
.scroll-up {
	header {
		filter: drop-shadow(0 -10px 20px rgb(170, 170, 170));
	}
}


.menu-is-open {
	overflow: hidden;

	header {
		filter: none;
	}
}

.navbar ul {
    list-style-type: none;
    background-image: url(../images/Macht_van_het_volk_1920p-1000x440.jpg);
    background-repeat: no-repeat;
    background-size:100% 100%;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.navbar a {
    text-decoration: none;
    font-size: 10px;
    height: 124px;
    color: white;
    font-size: larger;
    display: block;
    
}

.navbar a:hover {
    background-color: rgba(26, 189, 167, 0.277);
}

.navbar li {
    float: left;
    margin: 10px;
}
.container0{
  display: grid;
  grid-template-columns:1fr; 
  grid-template-rows:repeat(7, 10px);
   display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px; 
  /* width: 100%; */
  border: 10px black solid;
  margin: auto;
  margin: 5%;
}
.wat-wij-doen{
  /* margin-left: 10%; */
  /* margin-right: 10%; */
}
.flexitem{
  width: 50%;
  place-items: center;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  padding: 5%;
  /* padding-left: 5%; */
  /* padding-right: 5%; */
}
.container1 {  
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr;
    grid-template-rows: 155px 150px 1fr 350px
    ;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: */
      /* "header header"
      "meneer-doneer- meneer-doneer-"
      "wat-wij-doen wat-wij-doen" */
      /* "egypte nubie"; */
    display: flex;
    justify-content: center;
    align-items: center;
    place-items: center;
    /* border: 10px black solid; */
  }
  
  .header { grid-area: header; }
  
  .egypte { grid-area: egypte; }
  
  .nubie { grid-area: nubie; }
  
 .container2 {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "J\.P-review J\.A-review"
      "callt callt"
      "callb callb";
  }

  .J\.P-review { grid-area: J\.P-review; }
  
  .J\.A-review { grid-area: J\.A-review; }

  .container3 {  display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 100px ;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "callt"
      "callb";
  }

  .callt { grid-area: callt; }
  
  .callb { grid-area: callb; }

  .f{
    display: inline;
    color: red;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px;
  }
   .callb{
     width: 125px;
    height: 65px;
    border: 4px dotted black;
    outline: 4px dotted white;
    outline-offset: 2px;
    border-radius: 50px;
    color: black;
    background-color: white; 
    text-align: center;
    transition: transform 0.5s ease;

      } 

  .callb:hover{
    opacity: 1;
    transform: scale(1.25);
}
.callb:hover > .doe {
    opacity: 1;
    transform: scale(1.9);
    transition: transform 0.9s ease;
    text-decoration: underline;

}

.callbt:hover{
    opacity: 1;
    transform: scale(1.07);
    transition: transform 0.5s ease;
}
.doe:hover{
    opacity: 1;
    transform: scale(1.9);
    transition: all 0.9s ease;
    text-decoration: underline;
}

.doe{
   margin-top: 40px;
   font-size: xx-large;
   color: black;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 2px;
}

 .container4 {  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 100px 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Brons-tijd-"
      "sleutelperiode"
      "tekstbronstijd";
      display: flex;
      flex-direction: column;
  }
  .hs{
    border: 3px solid black ;
    font-size: 30px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 300px;
    /* margin-top: 400px; */
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px;
  }
  
  .Brons-tijd- { grid-area: Brons-tijd-; }
  
  .sleutelperiode { grid-area: sleutelperiode; }
  
  .tekstbronstijd { grid-area: tekstbronstijd; }
  
  .tekstbronstijd{
    padding-left: 30px;
    padding-right: 30px;
  }

.container5 {
  background-color: rgb(250, 230, 230);
  width: 40%;
  /* height: 140%; */
  margin-left: 72px;
  margin-right: 80px;
  padding: 10px 0px 10px;
  border: 5px solid black;
  border-radius: 2vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

input{
  margin: 2px;
  border: 2px solid black;
}

  .container6 {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "contact bezoekers-museum contactpersonen";
      margin-top: 25vh;
  }
  
  .contact { grid-area: contact; }
  
  .bezoekers-museum { grid-area: bezoekers-museum; }
  
  .contactpersonen { grid-area: contactpersonen; }
     
h1{
    /* color: white; */
    text-align: center; 
    font-size: 75px;
}
h2{
    /* float: left; */
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    /* margin: 0px 100px 0px 100px;*/
} 
.container{
    padding-bottom: 100px;
}
p{
   /* float: left; */
   text-align: center;
   padding: -10px;
}
.ftekst{
    font-size: 15px;
}