/**************/
/* CSS REMEDY */
/**************/

/* naar een idee van Jen Simmons */
*, *::after, *::before {
  box-sizing:border-box;
}

body {
  margin:0;
}

button:not([disabled]) {
  cursor:pointer;
}

img {
  max-width:100%;
}

html{
	scroll-behavior: smooth;
}



/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
  --color-headings: #F2F0E8;
  /* --color-background: #272F3F; */
  --color-background: #141616;
  --color-text: #F2F0E890;

  --color-footer-background: #F2F0E8;
  /* --color-footer-headings: #272F3F; */
  --color-footer-headings: #1f2322;
  --color-footer-text: #1f232295;
  --color-footer-border: #1f232250;


  --color-borders: #F2F0E850;

  --color-text-buttons: #F2F0E890;

  /* --color-buttons: #F2F0E8; */
  --color-buttons: #232726;

  --color-buttons-hover: #BFFF0F;
  --color-text-buttons-hover: #1f2322;

  --color-menu: #BFFF0F;
  --color-cursor: #BFFF0F;
}


header a {
  transition: 0.4s;
}

header a:hover {
  color: var(--color-headings);
}



/********************/
/* ALGEMENE STYLING */
/********************/

h1, h2 {
  font-family: "larken", sans-serif;
  color: var(--color-headings);
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 400;
}

h3 {
  font-family: "larken", sans-serif;
  color: var(--color-headings);
  font-size: clamp(1.25rem, 1.75vw, 2rem);
  font-weight: 300;
  margin: 0;
}

h4 {
  font-family: "larken", sans-serif;
  color: var(--color-borders);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  line-height: 1.5;
  margin: 0;
  padding: 1em 0;
  font-style: italic;
  font-weight: 400;
}


p, a, button {
  font-family: "Satoshi", sans-serif;
  color: var(--color-text);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;

  text-decoration: none;
}


p span {
  color: var(--color-borders);
}




h1 span, h2 span, h3 span {
  font-family: "larken", sans-serif;
  font-style: italic;
}

h3 span {
  color: var(--color-borders);
}



@media (max-width: 768px) {
  .current-page {
    font-style: italic;
    font-weight: 500;
  }
}

/* ---- BUTTONS ---- */

button {
  border: none;
}

.button-primary {
  display: inline-block;
  color: var(--color-headings);
  padding: 0.8em 1.6em;
  background: var(--color-buttons);
  border-radius: 50px;
  text-decoration: none;
  transition: 0.5s ease;
  font-weight: 400;

}

.button-primary:hover {
  background: var(--color-buttons-hover);
  color: var(--color-text-buttons-hover);
}

.button-secundary {
  display: inline-block;
  color: var(--color-text);
  /* padding: 1.25em 2em; */
  padding: 0.8em 1.6em;
  background: none;
  border: 1px solid var(--color-borders);
  border-radius: 50px;
  text-decoration: none;
  transition: 0.5s ease;

  font-weight: 400;
}

.button-secundary:hover {
  color: var(--color-text-buttons-hover);
  background: var(--color-buttons-hover);
  border: 1px solid #00000000;
}





body {
  background: var(--color-background);
}


/* ---- WHITE SPACE ---- */

header, main, #footer {
  padding: 0 1em;
}

@media (min-width: 768px) {
	header, main, #footer{
    padding: 0 8%;
  }
}

@media (min-width: 1920px) {
	header, main, #footer{
    padding: 0 12%;
    max-width: 130em;
    margin: 0 auto;
  }
}

@media (min-width: 150em) {
	header, main, #footer{
    padding: 0 10em;
  }
}






.split-word {
  display: inline-block;
  will-change: transform, opacity;
}







/********************/
/*      HEADER      */
/********************/


header a > img {
  height: 32px;
  height: clamp(2.25rem, 2.5vw, 3.5rem);
  position: relative;
  z-index: 99;
  margin-top: 0.6em;
}



header button {
  padding: 0.8em;
  border: 1px solid var(--color-borders);
  background: var(--color-background);
  border-radius: 50px;
  display: flex;
  position: fixed;
  right: 1em;
  top: 1em;
  z-index: 9999;
}

header div {
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


header ul {
  margin: 0;
  padding: 0;
  /* padding:4em 1em 0; */
  list-style: none;
  background: var(--color-menu);
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;

  transform: translateX(100%);
  transition: transform 0.6s;
  transition-timing-function: ease-in-out;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;

  z-index: 999;
}

/* opmaak van text in hamburger menu */
header li a{
  color: var(--color-background);
  font-family: "larken", sans-serif;
  font-size: clamp(3rem, 12vw, 4.5rem);
}

/* haalt contact-knop weg */
header ul li:last-of-type {
  display: none;
}


nav.menu-active ul {
  transform: translatex(0);
  transition-timing-function: ease-in-out;

}



nav.menu-active button {
  background: none;
  border: 1px solid #00000030;
}

nav.menu-active button img {
  content: url('../images/close.svg');
}


@media (min-width: 768px) {

  header a > img {
    margin-top: 0em;
  }

  header button {
    display:none;
  }
  
  header ul {
    position:static;
    transform:none;
    padding:0;
    background:none;
    flex-direction: row;
    align-items: center;
    gap: 4em;
  }
  
  header ul li:last-of-type {
    display: block;
  }
  
  header > a:last-of-type {
    flex-direction:column;
  }

  header li a {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-family: "satoshi", sans-serif;
    color: var(--color-text);
  }
}





/********************/
/*      FOOTER      */
/********************/

footer h2 {
  color: var(--color-footer-headings);
}

footer p {
  color: var(--color-footer-text);
}

footer .button-secundary {
  color: var(--color-footer-headings);
  border: 1px solid var(--color-footer-border);
}

footer {
  background: var(--color-footer-background);
}

footer > div > div:nth-of-type(1) {
  padding: 4em 0;
}

footer > div > div:nth-of-type(1) p{
  margin-bottom: 2em;
}

footer > div > div:nth-of-type(1) a:nth-of-type(2){
  margin-left: 0.5em;
}

footer > div > div:nth-of-type(2) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-footer-border);
  padding: 1.5em 0;
}


footer > div > div:nth-of-type(2) p {
  font-size: clamp(0.75rem, 1vw, 1.25rem);
}








section {
  margin: 0 0 8rem 0;
}

section:first-of-type {
  margin: 8rem 0 14em;
}

@media (min-width: 1280px) {
	section{
    margin: 0 0 12rem 0;
  }

  section:first-of-type {
    margin: 7rem 0 18rem 0;
  }
}

@media (min-width: 1920px) {
	section{
    margin: 0 0 20rem 0;
  }
  section:first-of-type {
    margin: 15rem 0 30rem 0;
  }
}




/* .hero {
  margin: 6em 0 12em 0;
} */

.hero h1 {
  margin: 0;

  /* TEST */
  font-size: clamp(1.25rem, 1.6vw, 2rem);
  font-weight: 300;
  color: var(--color-text);
}

.hero p {
  font-family: "larken", sans-serif;
  color: var(--color-text);
  font-weight: 400;
  margin-top: 0.25em;
  margin-bottom: 0.5em;

  /* TEST */
  color: var(--color-headings);
  font-size: clamp(2rem, 3.75vw, 4rem);
}

@media (min-width: 700px) {
  .hero p{
    width: 85%;
  }
}

@media (min-width: 2200px) {
  .hero p{
    width: 70%;
  }
}






.wat-ik-kan {
  display: flex;
  flex-direction: column;
  gap: 10%;
}

.wat-ik-kan > div {
  display: flex;
  flex-direction: column;
  gap: 5em;
  flex-basis: 70%;
}

.wat-ik-kan h3 {
  border-top: 1px solid var(--color-borders);
  padding: 1em 0;
}

@media (min-width: 1080px) {
  .wat-ik-kan {
    flex-direction: row;
    position: relative;
    align-items: flex-start;
  }

  .wat-ik-kan h2 {
    position: sticky;
    top: 3em;

    flex-basis: 30%;
  }
}










.text-2kolom {
  display: flex;
  flex-direction: column;
  gap: 10%;
}

.text-2kolom div {
  display: flex;
  flex-direction: column;
  /* gap: 2.5em; */
  gap: 3em;
  align-items: flex-start;
}

.text-2kolom div > button, .text-2kolom div > .button-primary{
  margin-bottom: 5em;
}


@media (min-width: 1080px) {
  .text-2kolom {
    flex-direction: row;
    align-items: flex-start;

    /* sticky */
    position: relative;
  }

  .text-2kolom h2 {
    flex-basis: 30%;
    margin: 0;

    /* sticky */
    position: sticky;
    top: 3em;
  }

  .text-2kolom div {
    flex-basis: 70%;
  }
}




.projecten-2kolom > div {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

@media (min-width: 768px) {
  .projecten-2kolom > div {
    flex-direction: row;
  }
}


.project-image {
  border-radius: 10px;
  transition: 3s ease-in-out;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.project-image img {
  transition: 1s ease;
  object-fit: cover;
}

.cursor-arrow:hover .project-image img {
  transform: scale(1.1);
}



.projecten h3, .projecten-2kolom h3 {
  color: var(--color-headings);
  margin: 1em 0 0.5em 0;
}


@media (min-width: 768px) {
  .projecten p {
    width: 60%;
  }
}



/****************************/
/*      PORTFOLIO PAGE      */
/****************************/


.portfolio-page section:nth-of-type(1), .over-mij-page section:nth-of-type(1){
  margin-bottom: 4em;
}

@media (min-width: 768px) {
  .portfolio-page section:nth-of-type(1), .over-mij-page section:nth-of-type(1) {
    margin-bottom: 6em;
  }

  .portfolio-page section:nth-of-type(1) > p, .over-mij-page section:nth-of-type(1) > p {
    width: 60%;
  }
}






.portfolio-page section:nth-of-type(2) > div {
  margin-bottom: 5em;
}


@media (min-width: 1280px) {
  .portfolio-page section:nth-of-type(2) > div {
    margin-bottom: 8rem;
  }
}

@media (min-width: 1920px) {
  .portfolio-page section:nth-of-type(2) > div {
    margin-bottom: 10rem;
  }
}





.over-mij-page img {
  border-radius: 10px;
}






.over-mij-page ul li{
  font-family: "Satoshi", sans-serif;
  color: var(--color-text);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  line-height: 1.5;
  margin: 0;
  font-weight: 400;

  text-decoration: none;
}


.over-mij-page ul li:before {
  content: '✓ ';
}








body:hover > #trailer {
  opacity: 1;
}

#trailer {
  height: 25px;
  width: 25px;
  background-color: var(--color-cursor);
  border-radius: 50%;
  
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 9999999999999;
  
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  
  display: grid;
  place-items: center;

  transition: 0.5s;

}


#trailer img {
  width: 0px;
  height: 0px;
  transition: 0.5s;
}


.trailer-hover {
  height: 85px !important;
  width: 85px !important;
}

.trailer-img-hover {
  width: 15px !important;
  height: 15px !important;
}

/* .padding {
  width: 80px !important;
  height: 80px !important;
} */


@media (max-width: 768px) {

  #trailer {
    display: none;
  }
}












/* Lenis CSS */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}





/* a {
  font-size: 16px !important;
} */