body {
  position: fixed;
  overflow: hidden;
    font-family: 'IBM Plex Sans', sans-serif;
    text-align:center;
    font-weight: bold ;
    font-size: 7vw;
}

.linten img {
  position: absolute;
  width: 140%;
  overflow: hidden;
  top: -5vw;
  left: -15vw;
  transform: scale(1.5);
  margin-bottom: 20vw;
  z-index: -1;
}

.container{
  width: 80vw;
  height: 80vh;
  display: grid;
  grid-template-rows: 0.8fr 0.3fr 0.2fr 1fr;
  justify-items: center;
  margin: 10vw;
}

.start {
  background: url("../../Images/Start_Button.png");
  background-size: cover;
  width: 80vw;
  height: 15vw;
}

.character {
  width: 45vw;
}

.tekst1 {
  margin-top: 2vw;
  font-size: 5vw;
  font-weight: 100;
  text-align: center;
  width: 70vw;
  margin-bottom: 10vw;
}

.tekst2 {
  font-weight: bold;
  text-align: center;
  width: 65vw;
  font-size: 6vw;
  margin-left: 9vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

/*////////////////////////////
//splitsing bottom & top UI//
///////////////////////////*/
#botContainer {
  position: absolute;
  bottom:-10vh;
}

#botNav {
  display: grid;
  grid-template-columns: 28vw 28vw 28vw ;
  grid-template-rows: 1fr ;
  grid-gap: 2vw;
  margin: 5.5vw ;
  height: 14vw ;
}

.knop {
  position: relative;
}

.middelsteknop {
  grid-column: 2 ;
  background-image: url('../../Images/knopNA.svg');
  background-size: cover;
}
.museum {
  background-image: url('../../Images/museumICON.svg');
  background-size: cover;
  background-position: center;
  width: 45%;
  height: 90%;
  margin-top: 1.2vw ;
  transform: rotate(20deg);
  transition: 1.5s;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.popUpMenu #bgCover{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #233265;
  top: 0vw ;
  transform: translateY(+100vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: 0;
}

#popUpMenuGrid {
  position: absolute;
  bottom: 18vh ;
  display: grid;
  grid-template-columns: 28vw 28vw 28vw ;
  grid-template-rows: 1fr 1fr ;
  grid-gap: 2vw;
  margin: 5.5vw ;
  height: 30vw ;
  grid-template-areas:
    ". opties ."
    "logboek . dader";
    transform: translateY(+100vh);
    transition: .3s ;
    transition-timing-function: ease;
}

#logboek {
  grid-area: logboek;
  background-image: url('../../Images/knopNA.svg');
  background-size: cover;
}

#opties {
  grid-area: opties;
  background-image: url('../../Images/knopNA.svg');
  background-size: cover;
}

#dader {
  grid-area: dader;
  background-image: url('../../Images/knopNA.svg');
  background-size: cover;
}

#notebook {
    background-image: url('../../Images/notebookICON.svg');
    background-size: cover;
    background-position: center;
    width: 40%;
    height: 85%;
    margin-top: 1.2vw ;
    transform: rotate(20deg) scale(.8);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.notebook {
  background-image: url('../../Images/notebookICON.svg');
  width: 38%;
  height: 80%;
  margin-left: 28% ;
  margin-top: .6vh;
  background-size: cover;
  background-position: center;
  transform: rotate(20deg) scale(.8);
}

.identiteit {
  background-image: url('../../Images/daderICON.svg');
  width: 61.5%;
  height: 80%;
  margin-left: 18% ;
  margin-top: .7vh;
  background-size: cover;
  background-position: center;
  transform: scale(.8);
}

.opties {
  background-image: url('../../Images/optionsICON.svg');
  width: 61.5%;
  height: 86%;
  margin-left: 18% ;
  margin-top: .7vh;
  background-size: cover;
  background-position: center;
  transform: scale(.6);
}

/*/////////////////////////////////
//Open logboek/////////////////////
/////////////////////////////////*/

#logboekbgCover{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #10002B;
  top: 0vw ;
  transform: translate(-100vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: 1;
}

.logboekOPEN #logboekbgCover{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #10002B;
  top: 0vw ;
  transform: translate(+0vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: 1;
}

#logboekGrid {
  position: absolute;
  position: absolute;
  top:0vw;
  display: grid;
  width: 100vw;
  height: 100vh ;
  grid-template-columns: 1fr ;
  grid-template-rows: .1fr 2fr 3fr;
  gap: 1vw;
  grid-auto-flow: row;
  grid-template-areas:
    "logboekName"
    "logboekAfbeelding"
    "logboekScroll";
  transform: translateX(-100vh);
  opacity: 1;
}

.logboekOPEN #logboekGrid {
  transform: translateX(+0vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: 1;
}

.logboekName { grid-area: logboekName;
font-size: 10vw;
font-weight: bold;
text-align: center;
padding-top: 5%;
}

.logboekAfbeelding {
  grid-area: logboekAfbeelding;
  font-style: italic;
  font-size: 7vw;
  font-weight:500;
  text-align: center;
  padding-top: 20%;
}

#clueinfo {
  transform: translateY(-40vw);
}

#logbgImg {
  width: 33vw;
  height: 33vw;
background-image: url('../../Images/notebookpinkICON.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transform: translateY(-5vw) translateX(30vw) rotate(-20deg) scale(1.5);
}

.logboekScroll {
  grid-area: logboekScroll;
  overflow: scroll;
  display: grid;
  grid-template-columns:1fr ;
  grid-template-rows: 33vw 33vw 33vw;
  grid-template-areas:
    "logboekItem1"
    "logboekItem2"
    "logboekItem3";
}

.logboekItem1 { grid-area: logboekItem1;
  margin: 2vw;;
display: grid;
grid-template-rows: 1fr 1fr ;
grid-template-columns: 1fr 3fr ;
background-image: url('../../Images/CLUE.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
}

.logboekItem2 { grid-area: logboekItem2;
  margin: 2vw;
display: grid;
grid-template-rows: 1fr 1fr ;
grid-template-columns: 1fr 3fr ;
background-image: url('../../Images/CLUE.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
}

.logboekItem3 { grid-area: logboekItem3;
  margin: 2vw;
display: grid;
grid-template-rows: 1fr 1fr ;
grid-template-columns: 1fr 3fr ;
background-image: url('../../Images/CLUE.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
}

.clueDUDE {
  margin: 2vw;
  background-image: url('../../Images/trapezeDUDE.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  grid-area: 1 / 1 / 3 / 2;
}
.clueTitel{
  font-size: 6vw;
  font-weight: bold;
  padding-top: 10%;
}
.clueDesc{
  font-size: 6vw;
  font-weight:300;
}

/*///////////////////////////////////////
//Open dader menu wanneer je erop klikt//
///////////////////////////////////////*/

.daderMenu {
  position: absolute;
  background-color: #10002B;
  margin-left: auto;
  margin-right: auto;
  top: 0vw;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh ;
  display: grid;
  grid-template-columns: .5fr 1fr .5fr;
  grid-template-rows: 1fr 2fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas:
    "daderTITEL daderTITEL daderTITEL"
    "daderPREVIEW daderPREVIEW daderPREVIEW"
    "vormDADER vormDADER vormDADER"
    "kleurDADER kleurDADER kleurDADER"
    "brilDADER brilDADER brilDADER"
    "bevestigen bevestigen bevestigen"
    ". . .";
    transform: translateX(+100vh);
    opacity: 0;
    z-index: -1;
    transition: .3s ;
    transition-timing-function: ease;
}

.daderOPEN {
  transform: translateX(+0vh);
  opacity: 1;
  z-index: 0;
  transition: .3s ;
  transition-timing-function: ease;
}

.daderTITEL { grid-area: daderTITEL;
  font-size: 10vw;
  font-weight: bold;
  text-align: center;
  padding-top: 5%;
}

.vormDADER {
  background-image: url('../../Images/CLUE.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90% ;
  width: 100%;
  height: 100%;
  grid-area: vormDADER;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
      "pijltjeL Titel pijltjeR"
      "pijltjeL inhoud pijltjeR"; }

.Vknoplinks {
  background-image: url('../../Images/pijltje.svg');
  width: 80%;
  height: 80%;
  margin-top: 10%;
  margin-left: 10%;
  grid-area: pijltjeL;
  background-repeat: no-repeat;
  background-position: center;
}

.Vknoptekst {
  width: 80%;
  height: 80%;
  margin-top: 10%;
  margin-left: 10%;
  grid-area: Titel;
  background-repeat: no-repeat;
  background-position: center;
}

.VknopDesc {
  font-size: 5vw;
  font-weight: lighter;
  width: 80%;
  height: 80%;
  margin-left: 10%;
  grid-area: inhoud;
  background-repeat: no-repeat;
  background-position: center;
}

.Vknoprechts {
  background-image: url('../../Images/pijltje.svg');
  transform: rotate(180deg);
  width: 80%;
  height: 80%;
  margin-top: 10%;
  margin-left: 10%;
  grid-area: pijltjeR;
  background-repeat: no-repeat;
  background-position: center;
}

.kleurDADER { background-image: url('../../Images/CLUE.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 90% 90% ;
width: 100%;
height: 100%;
grid-area: kleurDADER;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
    "pijltjeL Titel pijltjeR"
    "pijltjeL inhoud pijltjeR"; }

  .Kknoplinks {
    background-image: url('../../Images/pijltje.svg');
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-left: 10%;
    grid-area: pijltjeL;
    background-repeat: no-repeat;
    background-position: center;
  }

  .Kknoptekst {
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-left: 10%;
    grid-area: Titel;
    background-repeat: no-repeat;
    background-position: center;
  }

  .KknopDesc {
    font-size: 5vw;
    font-weight: lighter;
    width: 80%;
    height: 80%;
    margin-left: 10%;
    grid-area: inhoud;
    background-repeat: no-repeat;
    background-position: center;
  }

  .Kknoprechts {
    background-image: url('../../Images/pijltje.svg');
    transform: rotate(180deg);
    width: 80%;
    height: 80%;
    margin-top: 10%;
    margin-left: 10%;
    grid-area: pijltjeR;
    background-repeat: no-repeat;
    background-position: center;
  }


  .brilDADER { background-image: url('../../Images/CLUE.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90% ;
  width: 100%;
  height: 100%;
  grid-area: brilDADER;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
      "pijltjeL Titel pijltjeR"
      "pijltjeL inhoud pijltjeR"; }

    .Bknoplinks {
      background-image: url('../../Images/pijltje.svg');
      width: 80%;
      height: 80%;
      margin-top: 10%;
      margin-left: 10%;
      grid-area: pijltjeL;
      background-repeat: no-repeat;
      background-position: center;
    }

    .Bknoptekst {
      width: 80%;
      height: 80%;
      margin-top: 10%;
      margin-left: 10%;
      grid-area: Titel;
      background-repeat: no-repeat;
      background-position: center;
    }

    .BknopDesc {
      font-size: 5vw;
      font-weight: lighter;
      width: 80%;
      height: 80%;
      margin-left: 10%;
      grid-area: inhoud;
      background-repeat: no-repeat;
      background-position: center;
    }

    .Bknoprechts {
      background-image: url('../../Images/pijltje.svg');
      transform: rotate(180deg);
      width: 80%;
      height: 80%;
      margin-top: 10%;
      margin-left: 10%;
      grid-area: pijltjeR;
      background-repeat: no-repeat;
      background-position: center;
    }


.bevestigenDADER { grid-area: bevestigen;
  background-image: url('../../Images/bevestigen.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90% ;
  width: 100%;
  height: 100%;
  padding-top: 6vw;
}

.previewVORM {
   grid-area: daderPREVIEW;
   overflow: visible;
   width: 700%;
   height: 100%;
   margin-left: 38vw;
}

.previewFACE {
   grid-area: daderPREVIEW;
   overflow: visible;
   width: 700%;
   height: 100%;
   margin-left: 38vw;
}

/*/////////////////////////////////
//Open Menu wanneer de knop klikt//
/////////////////////////////////*/

.openMenu {
  background-image: url('../../Images/knopActive.svg');
}

.openMenu .museum {
  transform: rotate(380deg);
  transition: 1.5s ;
}

.popUpOpen #bgCover {
  transform: translateY(+0vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: .7;
}

.popUpOpen #popUpMenuGrid {
  transform: translateY(+15vh);
  transition: .3s ;
  transition-timing-function: ease;
  opacity: 1;
}