* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/*////////////*/
/*FONT FAMILY*/
/*//////////*/

@font-face {
    font-family: 'Buljirya';
    src: url('../fonts/buljirya.otf');
}
 
@font-face {
    font-family: 'ppneuemachina';
    src: url('../fonts/ppneuemachina-regular.otf');
}

@font-face {
    font-family: 'Hanken-grotesk';
    src: url('../fonts/hanken_grotesk.ttf');
}

@font-face {
    font-family: 'Pixeloid-sans';
    src: url('../fonts/pixeloidsans.ttf');
}

@font-face {
    font-family: 'sk-concretica';
    src: url('../fonts/sk-concretica-trial.ttf');
}

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

:root {
	/* color */
    --background-color: #f7f6f5;
	--primary-color: #0554F2;
    --primary-color2:  #374c8c;
    --secundair-color:  #F2C7BD;
    --secundair-color2: #F2BBB6;
    --basic-color: black;
    --extra-color: #BFBFBF;
    /*font style */
    --fontfamily-kop1: 'Buljirya', Arial, Helvetica;
    --fontfamily-kop2: 'Pixeloid-sans', Arial, Helvetica;
    --fontfamily-kop3: 'ppneuemachina', Arial, Helvetica;
    --fontfamily-smalltext1: 'sk-concretica', sans-serif;
    --fontfamily-smalltext2: 'Hanken-grotesk', sans-serif;
    --space-letter: 1px;

    /*font size */
    --titel-text-size: 6em;
    --proces-section-text: 10em;
    --kop-text-size: 2em;
    --small-text-size: 1em;

    /*font size mobile */
    --titel-mobile-text: 3.5em;
    --proces-mobile-text: 5em;
    --kop-mobile-text: 1.8em;
    --small-mobile-text: 1.2em;
}

body {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.2s linear;
}

.main-container {
    display: grid;
    grid-template-rows: 1fr auto; 
    height: 100vh;
}


/*/////////////////////////*/
/*/////// navigation ///////*/
/*////////////////////////*/

/* --- MOBILE NAVIGATION --- */
@media (max-width: 900px) {
    .container-menu {
      height: 15vh;
      padding: 0 1em;
    }
    .logo {
      width: 34px;
    }
    .text-underlogo {
      display: none;
    }
    .nav-bar {
      justify-content: space-between;
      align-items: center;
    }

    /* Hamburger icon visible, desktop links hidden */
    .menu-toggle {
      display: flex;
      align-items: center;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      z-index: 1002;
      font-size: 2.2em;
      color: var(--basic-color);
    }
    .menu-icon, .menu-icon:before, .menu-icon:after {
      content: '';
      display: block;
      width: 28px;
      height: 3.5px;
      background: #3b3b3b;
      border-radius: 2px;
      position: relative;
      transition: all 0.33s cubic-bezier(.77,0,.175,1);
    }
    .menu-icon {
      position: relative;
    }
    .menu-icon:before {
      position: absolute;
      top: -9px;
    }
    .menu-icon:after {
      position: absolute;
      bottom: -9px;
    }
    .menu-toggle.open .menu-icon {
      background: transparent;
    }
    .menu-toggle.open .menu-icon:before {
      top: 0;
      transform: rotate(45deg);
      background: var(--basic-color);
    }
    .menu-toggle.open .menu-icon:after {
      bottom: 0;
      transform: rotate(-45deg);
      background: var(--basic-color);
    }
    .nav-pill-wrapper,
    .nav-right-wrapper {
      display: none !important;
    }
  
    /* Mobile menu */
    .mobile-menu {
      position: fixed;
      top: 0;
      right: -100vw;
      width: 80vw;
      max-width: 80vw;
      height: 200vh;
      background: var(--background-color);
      box-shadow: -2px 0 18px rgba(0,0,0,0.07);
      z-index: 1001;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 90px 32px 32px 32px;
      transition: right 0.35s cubic-bezier(.77,0,.175,1);
    }
    .mobile-menu.open {
      right: 0;
    }
    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin-bottom: 44px;
    }
    .mobile-nav-links a {
      text-decoration: none;
      color: var(--basic-color);
      font-size: var(--small-mobile-text);
      font-family: var(--fontfamily-smalltext1);
      font-weight: 500;
      padding: 10px 0;
      border-radius: 4px;
      transition: background .2s, color .2s;
      text-align: left;
    }
    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
      color: var(--primary-color);
    }
    .mobile-socials {
      display: flex;
      flex-direction: row;
      gap: 2em;
      justify-content: flex-start;
      margin-top: 5vh;
    }
    .mobile-socials a {
      color: var(--basic-color);
      font-size: var(--small-mobile-text);
      font-family: var(--fontfamily-smalltext1);
      text-decoration: none;
      transition: color .2s;
      display: flex;
      align-items: center;
    }
    .mobile-socials a:hover {
      color: var(--primary-color);
    }
    .menu-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; 
      height: 200vh;
      background: rgba(0,0,0,0.20);
      z-index: 1000;
      transition: opacity 0.3s ease;
    }
    .menu-overlay.open {
      display: block;
      opacity: 1;
    }
}

    /* Hide mobile menu and hamburger on desktop */
@media (min-width: 901px) {
    .mobile-menu,
    .menu-overlay,
    .menu-toggle {
      display: none !important;
    }
  }

.container-menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    padding: 0 2em;
    background-image: url('../images/asfalt-light.png');
    background-color: rgba(247, 246, 245, 0.6); /* Semi-transparante achtergrond */
    backdrop-filter: blur(6px); /* Blur effect op de achtergrond */
    z-index: 900; /* Zorg ervoor dat het boven andere elementen staat */
    transition: all 0.3s ease; /* Voor smooth transitions */
}

/* Standaard uit de weergave als de gebruiker naar beneden scrolt */
.container-menu.hidden {
    transform: translateY(-100%); /* Schuif de navigatie naar boven uit beeld */
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15vh;
}

/*/// Logo aan de linkerkant ///*/
.nav-left-wrapper .logo-block {
    display: flex;
    flex-direction: column;
}

.logo {
    width: 4em;
    height: auto;
}

.text-underlogo {
    font-size: 0.9em;
    font-family: var(--fontfamily-smalltext2);
    color: rgb(169, 169, 169);
}

/*/// Navigatie in het midden ///*/
.nav-pill-wrapper {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

/*/// Basisstijl voor de navigatielinks ///*/
.nav-pill a {
    margin: 0 20px;
    text-decoration: none;
    color: #000;
    font-size: var(--small-text-size);
    font-family: 'sk-concretica';
    letter-spacing: var(--space-letter);
    font-weight: 500;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Soepele overgang */
}


/*/// Stijl voor de actieve link ///*/
.nav-pill a.active {
    color: #000;
    border-bottom: 2px solid #000; /* Zwart lijntje onder de actieve link */
}

/*/// Stijl voor de inactieve link ///*/
.nav-pill a.inactive {
    color: #999; /* Lichtgrijs voor de inactieve link */
}

.nav-pill a:hover {
    color: #007bff;
}

/*/// Socials aan de rechterkant ///*/
.nav-right-wrapper {
    display: flex;
    align-items: center;
}

.socials-wrapper {
    display: flex;
    gap: 1.2em;
}

.socials-wrapper a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext1);
    letter-spacing: var(--space-letter);
    transition: color 0.3s;
}

.socials-wrapper a:hover {
    color: #007bff;
}

.socials-wrapper svg {
    margin-left: 5px;
    width: 1.2em;
    height: auto;
    transition: stroke 0.3s;
}

.socials-wrapper a:hover svg {
    stroke: #007bff;
}

/*/// intro main ///*/

.container-intro {
    margin: 10em 2em;
    display: flex;
    align-items: flex-start;
}

.intro-tekst {
    display: flex;
    flex-direction: column;
    opacity: 0; /* Begin met een lage opaciteit */
    animation: fadeIn 1.5s forwards; /* Voeg animatie toe */
}

/*/// Fade-in animatie ///*/
@keyframes fadeIn {
    from {
        opacity: 0; /* Begin met 0 opaciteit */
    }
    to {
        opacity: 1; /* Eindig met volledige opaciteit */
    }
}

.intro-tekst p:nth-of-type(1) {
    font-family: var(--fontfamily-kop3);
    font-size: var(--titel-text-size);
    opacity: 0; /* Begin met een lage opaciteit */
    animation: fadeIn 1s forwards; /* Voeg animatie toe */
    animation-delay: 0s; /* Geen vertraging voor de eerste tekst */
}

.intro-tekst p:nth-of-type(3) {
    font-family: var(--fontfamily-kop2);
    font-size: var(--titel-text-size);
    color: var(--primary-color);
    opacity: 0; /* Begin met een lage opaciteit */
    animation: fadeIn 1s forwards; /* Voeg animatie toe */
    animation-delay: 1s; /* Voeg vertraging toe voor de tweede tekst */
}

.gif-oog {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    z-index: 0;
    margin: 0;
}

.gif-oog img {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.arrowdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    animation: bounce 1.5s infinite;
    animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1); 
    margin: -15em 0 5em 0;
}

.arrowdown img {
    width: 5em;
    height: auto;
    transition: filter 0.2s ease; /* Maak de kleurverandering soepel */
}

/*/// Bounce animatie met pauze ///*/
@keyframes bounce {
    0%, 20% {
        transform: translateY(0); /* Begin op de originele positie */
        filter: brightness(0); /* Begin met zwart */
    }
    40% {
        transform: translateY(-20px); /* Verhoog de afstand naar omhoog */
        filter: brightness(0.5); /* Maak de pijl grijs */
    }
    60% {
        transform: translateY(-20px); /* Blijf op het hoogste punt */
        filter: brightness(0.5); /* Blijf grijs */
    }
    80% {
        transform: translateY(0); /* Beweeg terug naar de originele positie */
        filter: brightness(0); /* Maak de pijl zwart */
    }
    100% {
        transform: translateY(0); /* Zorg ervoor dat het op de originele positie eindigt */
        filter: brightness(0); /* Zorg ervoor dat het zwart eindigt */
    }
}

/*/// Hover effect ///*/
.arrowdown:hover {
    filter: brightness(0.5); /* Maak de pijl grijs bij hover */
}

/*/// scroll text ///*/

.scroll-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: auto;
    height: 30vh;
    overflow: hidden; 
    background-color: var(--primary-color);
    opacity: 0;
    transition: opacity 0.3s ease-in;
}


.scroll-text h1 {
    font-family: var(--fontfamily-kop3);
    color: white;
    font-size: 8em;
    font-weight: 300;
    white-space: nowrap; /* Zorg ervoor dat de tekst op één regel blijft */
    position: relative;
    transition: transform 0.1s ease-out; /* Vloeiende overgang voor het verschuiven */
    margin: 0;
    transform: translateX(0); /* Startpositie */
    will-change: transform; /* Verbetert de performance */
}

/* mobile screen*/
@media (max-width: 700px) {

    .container-intro {
        flex-direction: column;
        justify-content: center;
    }

    .intro-tekst p:nth-of-type(1), 
    .intro-tekst p:nth-of-type(3) {
        font-size: var(--titel-mobile-text);
    }

    .gif-oog {
        margin: 0 0 3em 0;
    }

    .scroll-text {
        height: 20vh;
    }

    .scroll-text h1 {
        font-size: var(--proces-mobile-text);
    }

}


/*/// project section ///*/

.container-project {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2em; 
}

.projects-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    height: auto;
    gap: 2em;
    margin-bottom: 10em;
}

.projects-section a {
    text-decoration: none;
    color: #000;
}

.projects-section h2 {
    grid-column: 1;
    align-self: flex-start;
    font-family: var(--fontfamily-kop3);
    font-size: var(--kop-text-size);
    letter-spacing: var(--space-letter);
    margin: 2em 0;
}

/* Standaard verborgen voordat animatie begint */
.projects-section img,
.projects-section h3,
.projects-section p {
    opacity: 0;
    transform: translateY(50px); /* Verschoven naar beneden */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Vloeiende overgang */
}

/* Wanneer zichtbaar in viewport, afbeeldingen komen direct */
.project-visible img {
    opacity: 1;
    transform: translateY(0); /* Verplaatsing terug naar normale positie */
    transition-delay: 0s; /* Geen vertraging voor afbeeldingen */
}

/* Tekst (h3, p) met een vertraging */
.project-visible h3,
.project-visible p {
    opacity: 1;
    transform: translateY(0); /* Verplaatsing terug naar normale positie */
    transition-delay: 0.4s; /* Voeg een vertraging toe voor de tekstanimatie */
}

.projects-section img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    transition: border-radius 0.3s ease-in-out, transform 0.3s ease-in-out; 
}


.project-item img:hover {
    border-radius: 50%;
    border-radius: 50%; 
}


.projects-section h3 {
    margin-top: 1em;
    font-family: var(--fontfamily-smalltext1);
    font-size: var(--kop-text-size);
    letter-spacing: var(--space-letter);
    border-top: 2px solid black;
    padding-top: 0.5em;
}

.projects-section p {
    font-family: var(--fontfamily-smalltext2);
    font-size: var(--small-text-size);
}

.project-1 {
    grid-column: 1;
    grid-column-end: 4;
    align-self: flex-start;
}

.project-2 {
    grid-column: 4;
    grid-column-end: 7;
    align-self: center;
    margin-top: 10em;
}

.project-3 {
    grid-column: 1;
    grid-column-end: 4;
    align-self: center;
    margin-top: -6em;
}

.project-4 {
    grid-column: 4;
    grid-column-end: 7;
    align-self: flex-end;
    margin-top: 10em;
}

.project-5 {
    grid-column: 1;
    grid-column-end: 4;
    align-self: flex-start;
}

.project-6 {
    grid-column: 4;
    grid-column-end: 7;
    align-self: flex-end;
    margin-top: 10em;
}


/* Standaard styling voor projecten */
.project-item {
    position: relative;
    overflow: hidden;
}

/* Styling voor de hover-button */
.hover-button {
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* Verborgen totdat de gebruiker hovert */
    z-index: 1; /* Zorg ervoor dat de button boven andere elementen staat */
    pointer-events: none; /* Button volgt muis zonder interactie te blokkeren */
}

.hover-button a {
    display: flex; /* Flexbox voor het uitlijnen van tekst en icoon */
    align-items: center; /* Center de inhoud verticaal */
    background-color: var(--primary-color);
    color: white;
    padding: 0.8em 1.5em;
    border-radius: 50px;
    font-size: var(--small-text-size);
    text-decoration: none;
    font-family: var(--fontfamily-smalltext2);
    letter-spacing: var(--space-letter);
    transition: background-color 0.3s ease;
}

.hover-button a svg {
    width: 1.2em;
    height: auto;
    margin-left: 8px; /* Ruimte tussen de tekst en het icoon */
    fill: currentColor; /* Zorgt ervoor dat het icoon dezelfde kleur als de tekst heeft */
}

/* Laat de hover-button alleen zien bij hoveren */
.project-item:hover ~ .hover-button {
    display: block;
}

/* mobile screen */
@media (max-width: 900px) {
    .projects-section {
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 100%;
        margin: 0;
      }

      .projects-section a,
      .project-item {
        width: 100%;
        display: block;
      }

      .project-1,
      .project-2,
      .project-3,
      .project-4,
      .project-5,
      .project-6 {
        grid-column: auto !important;
        grid-column-end: auto !important;
        align-self: auto !important;
        margin-top: 0 !important;
        margin-bottom: 3em;
      }
    
}

/*//////////sectie eigen werk//////////*/

.freetime-work-section {
    position: relative;
    padding:  5em 2em;
}

.freetime-work-section h4 {
    position: relative;
    padding-bottom: 0.5em;
    color: black;
    font-family: var(--fontfamily-kop3);
    font-size: var(--kop-text-size); 
    letter-spacing: var(--space-letter);
    transition: color 0.3s ease-in
}

.freetime-work-section h4::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #F2C7BD, #000000);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 1;
    z-index: 2;
    border-radius: 2px;
}

.freetime-work-section h4.underline-animated::after {
    transform: scaleX(var(--underline-scale, 0));
}

/* Paragraph transition */
.freetime-work-section p {
    color: #222;
    transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.freetime-work-section.pink p {
    color: #F2C7BD;
}

.img-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1.5em;
    margin-top: 2em;
}

.img-gallery img {
    width: 100%;
    border-radius: 15px;
    height: auto;
    margin: 0;
}

.free-work {
    opacity: 0;
    transform: translateY(20px); 
    animation: fadeIn 0.5s ease-out forwards; 
}

.free-work p {
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    padding-top: 0.5em;
}

.free-work:nth-child(1) {
    animation-delay: 0.1s;
}

.free-work:nth-child(2) {
    animation-delay: 0.3s;
}

.free-work:nth-child(3) {
    animation-delay: 0.5s;
}

.free-work:nth-child(4) {
    animation-delay: 0.7s;
}

/* Definieer de fade-in animatie */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.img-gallery .free-work:first-of-type {
    grid-column: 1;
    grid-column-end: 3;
    grid-row: 1;
    grid-row-end: 2;
}


.img-gallery .free-work:nth-of-type(2) {
    grid-column: 3;
    grid-column-end: 5;
    grid-row: 1;
    grid-row-end: 3;
}

.img-gallery .free-work:nth-of-type(3) {
    grid-column: 5;
    grid-column-end: 7;
    grid-row: 1;
    grid-row-end: 5;
}


.img-gallery .free-work:nth-of-type(4) {
    grid-column: 1;
    grid-column-end: 3;
    grid-row: 2;
    grid-row-end: 3;
}

@media (max-width: 900px) {
    .img-gallery {
        display: flex;
        flex-direction: column;
        gap: 5em;
        margin-bottom: 3em;
    }

}


/*///////Footer////////////*/

.hele-footer {
    margin-top: auto;
    bottom: 0;
    height: auto;
}


.footer-intro {
    display: flex; 
    align-items: center;
    justify-content: center;
    background-color: #000;
    width: 100%;
    color: white;
    font-size: var(--titel-text-size);
    font-family: var(--fontfamily-kop2);
}

.footer-intro img {
    margin: 0;
    padding: 0;
    width: 3.5em;
    height: auto;
    vertical-align: middle;
}

 footer {
    display: flex;
    width: 100%;
    height: 40vh;
    background: #000;
    color: white;
}

.container-footer {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 100%;
    padding: 0 10em;
}

.top-footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-footer-wrapper .logo {
    width: 10em;
    height: auto;
    vertical-align: middle;
}

.right-footer-wrapper {
    display: flex;
    gap: 6em;
}

.main-footer, .contact-footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1em;
}

.main-footer a, .contact-footer a {
    text-decoration: none;
    color: white;
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext1);
    letter-spacing: var(--space-letter);
}

.main-footer p, .contact-footer p {
    font-size: 0.8em;
    font-family: var(--fontfamily-smalltext2);
    color: var(--extra-color);
}

.contact-footer a {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 0.5em;
}

.contact-footer svg {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
    width: 1.2em;
}

.bottom-footer-wrapper {
    display: flex;
    height: 20vh;
    align-items: center;
}

.copyrights {
    font-family: var(--fontfamily-smalltext1);
    font-size: var(--small-text-size);
    letter-spacing: var(--space-letter);
}

/* Responsive footer */ 
@media (max-width: 900px) {
    .footer-intro {
        padding-top: 1em;
        font-size: var(--titel-mobile-text);
    }
    .footer-intro img {
        width: 2em;
    }
    .top-footer-wrapper {
        justify-content: center;
        padding: 1.5em;
    }

    .top-footer-wrapper .logo {
        display: none;
    }

    .container-footer {
        padding: 1em;
    }

    .bottom-footer-wrapper {
        padding: 2em;
        align-items: flex-start;
    }
    
}

/*////////////About moi/////////////*/

.intro-aboutme {
    height: 80vh;
    width: 100%;
    padding: 5em 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Begin met een lage opaciteit */
    animation: fadeIn 1.5s forwards; /* Voeg animatie toe */
}

.container-aboutme {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    position: relative;
    z-index: 0;
    gap: 1.5em;
}

.container-aboutme  h1 {
    font-size: 7em;
    font-family: var(--fontfamily-kop2);
    font-weight: 300;
    grid-column: 1;
    grid-column-end: 6;
    grid-row: 1;
    grid-row-end: 2;
    z-index: 1;
    position: absolute;
}

.container-aboutme h2 {
    font-size: 6em;
    font-family: var(--fontfamily-kop3);
    color: var(--background-color);
    font-weight: 300;
    grid-column: 2;
    grid-column-end: 5;
    grid-row-end: 3;
    grid-row: 2;
    z-index: 1;
    position: absolute;
    align-self: center;
}


.container-aboutme p {
    font-family: var(--fontfamily-smalltext2);
    grid-column: 5;
    grid-row: 5;
    align-self: flex-end;
}

.container-img-aboutme {
    grid-column: 2;
    grid-column-end: 5;
    grid-row: 5;
    grid-row-end: 6;
}

.container-img-aboutme img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.line {
    text-align: center;
    height: 4rem;
    overflow: hidden;
    padding: 0;
    margin-bottom: 1em;
}

/*bron: https://codepen.io/alvarotrigo/pen/NWvQObB*/
/* flipY class and keyframes*/
.flipY {
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  font-size: var(--kop-text-size);
  font-family: var(--fontfamily-kop3);
  color: var(--primary-color);
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes depth {
  0% {
    text-shadow: 0 0 black;
  }
  25% {
    text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
  }
  50% {
    text-shadow: 0 0 black;
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
      -5px 0 black;
  }
  100% {
    text-shadow: 0 0 black;
  }
}

.column-aboutme {
    width: 100%;
    margin-bottom: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-column-aboutme {
    width: 40vw;
}

.container-column-aboutme p {
    font-size: var(--kop-text-size);
    font-family: var(--fontfamily-smalltext2);
    font-weight: 300;
    line-height: 1.5em;
}

/*///////Skills table//////////*/

.container-table-skills {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 5em 0 10em 0;
}

.skills-table {
    border-collapse: collapse;
    font-size: 1.5em;
}

.skills-table th {
    font-family: var(--fontfamily-kop3);
    padding: 1em;
    text-align: left;
    border-bottom: 2px solid var(--secundair-color);
}

.skills-table th:nth-of-type(1) {
    border-right: 2px solid var(--secundair-color);
}

.skills-table td {
    font-family: var(--fontfamily-smalltext2);
    padding: 1em;
    border-bottom: 2px solid var(--secundair-color);
}

.skills-table tr td:first-child {
    border-right: 2px solid var(--secundair-color);
}

/*////// Project 1 page intro ////////*/

/*/////go back button//////*/

.go-back {
    display: flex;
    margin: 2em;
    height: auto;
    position: fixed;
    z-index: 1;
}

.go-back a {
    transition: transform 0.3s ease; /* Smooth overgang van de beweging */
}

.go-back a svg {
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    font-size: var(--kop-text-size); 
    transition: transform 0.3s ease; /* Smooth overgang van de beweging */
}

.go-back a:hover, .go-back svg:hover {
    transform: translateX(-10px);
}

/*////// Column project ////////*/

.info-project {
    margin: 10em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-project h2 {
  display: none;
}

.column-project-container {
    columns: 2;
    width: 80vw;
    gap: 2em;
    break-inside: avoid;
}

.column-project-container p {
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    line-height: 1.5em;
    vertical-align: baseline;
    letter-spacing: var(--space-letter);
}

.column-project-container p:first-child::first-letter  {
    font-size: 3em; /* Vergroot de letter */
    font-weight: bold; /* Maakt de letter vet */
    float: left; /* Zorgt ervoor dat de tekst ernaast stroomt */
    line-height: 1; /* Zorgt ervoor dat de grote letter goed uitgelijnd is */
    margin-right: 0.1em; /* Een kleine ruimte tussen de grote letter en de rest van de tekst */
}

.column-project-container h2 {
    margin-bottom: 0.5em;
}

/*////////link website button///////*/

.text-seeproject {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2em 2em;
}

.text-seeproject a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    letter-spacing: var(--space-letter);
    padding: 0.8em 1.5em;
    border-radius: 50px;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    transition: color 0.5s ease;
}

.text-seeproject svg {
    width: 1.2em;
}

.text-seeproject a:hover {
    background-color: var(--primary-color);
    color: white;
}

/*/////////Proces sectie project 1///////////*/

.proces-sectie {
    height: 100%;
    width: 100%;
    padding: 5em 2em;
}

.proces-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.proces-sectie h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--kop-text-size);
    font-family: var(--fontfamily-kop3);
}

.proces-sectie p:nth-of-type(1) {
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    grid-column: 1;
    grid-row: 1;
    margin: 1em 0;
}

.proces-sectie p:nth-of-type(2) {
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    grid-column: 2;
    margin: 1em 0;
}

.proces-sectie img:nth-of-type(1) {
    width: 100%;
    height: auto;
    grid-column: 1;
    grid-row: 1;
    grid-row-end: 3;
    align-self: flex-end;
    border-radius: 15px;
    border: 2px solid var(--primary-color2);
}

.proces-sectie img:nth-of-type(2) {
    width: 60%;
    height: auto;
    border-radius: 15px;
    border: 2px solid var(--primary-color2);
}


/*////// Project page intro ////////*/

.website-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3em;
}

.website-container img  {
    width: 100%;
    height: auto;
}

/*//////// project kenmerken ////////*/

.project-type {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0;
    height: 0;
    margin: 4em 2em;
}

.project-type p {
    padding: 0.8em 1.5em;
    border: var(--secundair-color2) 2px dashed;
    border-radius: 50px;
    font-family: var(--fontfamily-smalltext2);
    font-size: var(--small-text-size);
    color: black;
}

.container-type-project-table {
    margin: 0 2em;
    display: flex;
    flex-direction: column; 
    gap: 0.8em; 
}

.container-type-project-table h1, p {
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
}

.table-typeproject h1 {
    width: 150px; 
    flex-shrink: 0; 
  }

  .table-typeproject p {
    flex: 1; /* Zorgt ervoor dat p de resterende ruimte inneemt */
  }

.table-typeproject {
    display: flex;
    align-items: baseline;
}

/*////////Download button///////////*/

.download-project {
    display: flex;
    margin: 2em 2em;
}

.download-project  a {
    text-decoration: none;
}

.download-button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1.5em;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.5s ease;
    text-decoration: none;
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
}


.download-button:hover {
    background-color: var(--primary-color);
    color: white;
}

.download-button:active {
    box-shadow: -1px 2px 13px 3px rgba(55,76,140,0.75) inset;
    -webkit-box-shadow: -1px 2px 13px 3px rgba(55,76,140,0.75) inset;
    -moz-box-shadow: -1px 2px 13px 3px rgba(55,76,140,0.75) inset;;
}


/*/////////Proces sectie///////////*/
.proces {
    margin: 6em 0 10em 0;
}

.titel-proces {
    display: flex;
    align-items: baseline;
    gap: 3em;
    margin: 0 2em;
    border-bottom: 2px dashed var(--secundair-color2);
}

.proces .titel-proces h3 {
    font-size: var(--proces-section-text);
    font-family: var(--fontfamily-kop2);
    font-weight: 200;
}

.proces .titel-proces p {
    font-size: var(--kop-text-size);
    font-family: var(--fontfamily-kop3);
    font-weight: 300;
}

.container-proces-img-text  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 2em;
}

.container-image-proces  {
    grid-column-start: 2;
    grid-column-end: 4;
    margin: 2em 0;
}

.container-image-proces img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 1em;
}

.container-text-proces {
    margin: 5em 0;
}

.container-text-proces ul {
    letter-spacing: var(--space-letter);
    font-weight: 300;
    font-size: var(--small-text-size);
    font-family: var(--fontfamily-smalltext2);
    margin: 1em 2em;
    width: 34em;
}

.container-text-proces p {
    grid-column: 1;
    letter-spacing: var(--space-letter);
    font-weight: 300;
    width: 34em;
}

.proces-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.proces-timeline img {
    width: 90%;
    height: auto;
    margin: 3em 0;
}

.figma-prototype {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0 10em 0;
}