body {
  margin: 0;
  font-family: regularFont;
  color: darkblue;
  max-width: 100vw;
  /* scrollbar-color: #8eb0dc #00000047; */
}

html {
    overflow-y: scroll;
  overflow-x: hidden;

    text-alig-webkit-user-select: none; /* Safari */ /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */n: center;
}

.scroll{
  scroll-snap-type: y mandatory;
height: 100vh;
  overflow: hidden scroll;
}

.scrollable {
  scroll-snap-align: start;

  /* scroll-margin: 5vh; */

/* height: 100vh; */
}

.blendmode {
  mix-blend-mode: color-burn;
}

.achtergrondVideo {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  position:fixed;
  top: 0;
  z-index: -2000;

  & video {
    object-fit: cover;
  }
}

.landingPage {
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  height: 100vh ;
  gap: clamp(1rem, 4vh, 3rem);
  /* visibility: hidden; */
  display: flex;


  .album_description {
    flex: 2;
    min-width: min(500px, 90vw);

    /* min-height:min(400px, 90vh) ; */
    font-size: min(clamp(0.7rem, 2rem, 2vw), clamp(0.7rem, 2rem, 2.5vh));
  }
  .album_foto {
    flex:1;
    max-width: 50vw;
    min-width: min(200px, 20vw)
    /* max-height: 500px */
    /* max-height: 80vh; */
  }

}
#land_description {
  flex-direction: row;
  gap: 2rem;
    padding: 2rem;
  flex-wrap: wrap;
}

#land_live{
  flex-direction: row;
  gap: 2rem;
    padding: 2rem;
  flex-wrap: wrap-reverse;

  /* & .album_foto:hover { */
  /*   padding: 2rem; */
  /*   mix-blend-mode: hard-light; */
  /*   background-color: black; */
  /* } */

}
.landingPage :hover {
  color: darkred;
  cursor: pointer;
}


.stopmuziek {
  color: white;
}

.fotopage {
height: 100vh;
  display: flex;
  flex-wrap: wrap-reverse;

  & .fotodeel {
    display: flex;
    flex-direction: row;
    z-index: -10;
    max-height: 100vh;
    max-width: 100vw;
    mix-blend-mode: hard-light;

    & img {
      object-fit: contain;
    }

    & #statischachtergrond {
      position: relative;
      z-index: 4;
    }

    & #varachtergrond {
      flex: 2;
      position: relative;
    }
  }

  & .tekstdeel {
    flex: 1;
  }

  & .woorden {
    top: 100vh;
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    position: relative;
    text-alig-webkit-user-select: none; /* Safari */ /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */n: center;
  }

  & .woord, .woordclick {
    position: relative;
    mix-blend-mode: color-dodge;
    display: inline;
    color: #c2943c73;
  }

  & .woord:hover {
    color: darkred;
    cursor: pointer;
  
  }

  & .woordclick {
    color: white;
    background-color: darkblue;
    mix-blend-mode: color-dodge;
    padding: 10px;
  }

   & .woordclick:hover{
      color: darkgreen;
    background-color: white;
    cursor: pointer;
    }

  & .vartekst_container{
    position: absolute;
    display: inline-block;
    height: 100vh;
    background-color:darkblue;
    padding: clamp(1rem, 3vw, 2rem);
    left: 30vw;
    z-index: 1000;
    mix-blend-mode: soft-light;
  }

  & .vartekst_container:hover {
    mix-blend-mode: hard-light;
  }

  & .vartekst {
    /* line-height: 1.2rem; */
    top: 30vh;
    position:   nonerelative;
    mix-blend-mode:normal
      ;
    display: inline;
    color: white;
    font-style: italic;
    font-size: clamp(0.5rem, 2vw, 1rem);
  }
}

.witsectie {
  position: relative;

  /* display: none; */
  overflow: hidden;
  max-height: 100vh;

  & .witachtergrond {
    mix-blend-mode: hard-light;
    z-index: -1 ;
   position: relative;
    overflow: hidden;
    object-fit: cover;
    height: 100vh;
  }

 & .witgedicht {
    height: 100vh;
    display: flex;
    flex-flow: column wrap;
    color: #c2943c73;
    position: absolute;

  & p {
      font-size: min(clamp(0.5rem, 2vw, 1.5rem),clamp(0.5rem,2vh,1.5rem));
      padding: 1rem 0.5rem;
      margin: 0;
    mix-blend-mode: color-dodge; 
    }

    & p:hover {
      color: white;
      mix-blend-mode: hard-light;
      cursor:none
    }
  }

& .witfoto {
    mix-blend-mode: color-burn;
    height: 30vh;
    position: absolute;
    z-index: -2;
    right: 10vw;
    top: 10vw;
  }

}


.klikhier{
  background-color: yellow;
  padding: 1rem;
}

.klikhier:hover{
  background-color: red;
  cursor: pointer;
}

.klikhier_container {
  z-index: 1000;
  height: 100vh;
width: 100vw;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: color-dodge;
}



.stopmuziek{
  position: fixed;
  bottom: 0;
  padding: 1rem;
}

.pijl {
  position: absolute;
  z-index: 300;
  right: 0;
  bottom: 0;
  font-size: 2rem;
  padding: 1rem;
  color: white;
 
}

  .pijl:hover{
    color: darkred;
  cursor: pointer;
  }
#stopmuziekknop:hover{
  color: red;
  cursor: pointer;

}

h1, h2, h3 {
  font-family: titelFont;
  padding: 0;
  margin: 0;
} 

h1 {
  font-size: clamp(2rem, 8vw, 6rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1rem, 5vw, 3rem);
}

h3 {
  font-size: clamp(1rem, 3vw, 2rem);
}

@font-face {
  font-family: titelFont;
  src: url("../../ayuthaya-regular.ttf");
}

@font-face {
  font-family: regularFont;
  src: url("../../Fonts/Lato-Medium.ttf");
}

a {
  color: inherit;
  text-decoration: none;
}