body { font-family: 'DM Sans'; }

p a { color: var(--orange); }

.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--orange); color: #fff; }
.btn-primary:active,
.btn-primary:focus { background: #C8652D; box-shadow: 0 0 0 0.25rem rgb(200 101 45 / 10%); }
.btn-primary:active:focus { background: #C8652D; }

nav { display: flex; justify-content: space-between; padding-top: 3rem; font-family: 'DM Sans', sans-serif; transition: transform 0.3s; transition-delay: 0.3s; }
nav.hidden { transform: translateY(-100%); }
nav a { color: var(--black); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav .item { width: 25%; }
nav .nav-right { text-align: right; }
nav .nav-center { display: flex; align-items: center; margin: 0 2rem; text-align: center; width: auto; }
/* nav .nav-center::before { content: ''; background: var(--black); width: 0.35rem; height: 0.35rem; margin-right: 0.5rem; border-radius: 50%; } */

header { height: 100vh; min-height: 500px; display: flex; flex-direction: column; position: relative; }
header .header-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 2rem; position: relative; }
header .profile-img-wrap { width: 400px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s, transform 0.6s; }
header .profile-img-wrap.hidden { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateY(-10%); }

header .wall-text-wrap { color: var(--black); opacity: 0.1; overflow: hidden; text-transform: uppercase; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(3.5rem, 23vw, 20rem); position: absolute; width: 100%; margin: 0 auto; height: 100%; line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; -webkit-text-stroke-width: 0.0425em; -webkit-text-stroke-color: var(--black); user-select: none; }
header .wall-text-wrap .wall-text { display: flex; flex-direction: column; transition: opacity 0.8s; transition-delay: 0.3s; }
header .wall-text-wrap .wall-text.hidden { opacity: 0; }
header .wall-text-wrap .wall-text span:nth-child(1) { text-align: right; }

.chapter { margin-bottom: 12rem; }
.chapter .chapter-title { font-family: 'DM Sans', sans-serif; font-size: 2rem; display: inline-block; margin-bottom: 1rem; }
.chapter .line { max-width: 500px; border-bottom: 3px solid var(--black); transform-origin: left; }
.chapter h2 { font-family: 'DM Sans', sans-serif; font-size: 3rem; overflow: hidden; }
.chapter h2 span { display: inline-block; transition: transform 0.8s; }
.chapter h2.hidden span { transform: translateY(100%); }

.intro-text { font-size: 4.5rem; font-family: 'DM Sans', sans-serif; max-width: 1280px; line-height: 1.3; }
.intro-text a { color: var(--black); }
.intro-text span.my-name { display: inlin   e-block; position: relative; }
.intro-text span.my-name .my-name-content { display: inline-block; transition: opacity 0.3s; }
.intro-text span.my-name .my-name-content.hidden { opacity: 0; }
.intro-text span.item { display: none; position: absolute; bottom: 0; width: max-content; }
.intro-text span.item:last-child { position: static; display: block; visibility: hidden; }
.intro-text span.item.active { display: block; }
.intro-text span.item:last-of-type.active { visibility: visible; }

.intro-content {  }
.intro-content .word { overflow: hidden; display: inline-flex; }
.intro-content .word .sub-word { transition: transform 0.5s; display: inline-flex; transform: translateY(100%); }
.intro-content.active .word .sub-word { transform: none; }

.photo-collage { --container-width: 1320px; --half-container: calc(var(--container-width) / 2); background: var(--black); color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 475px 0; position: relative; overflow: hidden; margin-bottom: 10rem; }
.photo-collage .title-wrap { z-index: 2; }
.photo-collage h2 { font-family: 'DM Sans'; font-weight: 700; font-size: 96px; max-width: 7em; text-align: center; line-height: 1; margin-bottom: 0.25em; }
.photo-collage .img-wrap { position: absolute; border-radius: 20px; transition: transform .6s cubic-bezier(.5,1,.5,1),opacity .2s cubic-bezier(.5,1,.5,1); opacity: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.photo-collage .img-1 { top: 10%; transform: translate(-50%, -100%) rotate(-25deg); width: 340px; left: calc(calc(50% - var(--half-container)) - 100px); }
.photo-collage .img-2 { top: 7%; transform: translate(25%, -100%) rotate(14deg); width: 650px; height: 350px; left: calc(50% - 325px); transition-delay: 0.2s; }
.photo-collage .img-3 { top: 15%; transform: translate(75%, -100%) rotate(15deg); width: 350px; left: calc(calc(50% + var(--half-container)) - 230px); transition-delay: 0.15s }
.photo-collage .img-4 { top: 56%; transform: translate(-50%, 100%) rotate(8deg); width: 340px; left: calc(calc(50% - var(--half-container)) - 55px); transition-delay: 0.1s }
.photo-collage .img-5 { top: 62%; transform: translate(20%, 100%) rotate(-15deg); width: 480px; left: calc(50% - 230px); transition-delay: 0.1s }
.photo-collage .img-6 { top: 62%; transform: translate(50%, 100%) rotate(15deg); width: 375px; height: 375px; left: calc(calc(50% + var(--half-container)) - 300px); transition-delay: 0.2s }
.photo-collage.active .img-wrap { opacity: 1; transition: transform .6s cubic-bezier(.5,1,.5,1),opacity .6s cubic-bezier(.5,1,.5,1); }
.photo-collage.active .img-1 { transform: rotate(-15deg); }
.photo-collage.active .img-2 { transform: rotate(7deg); transition-delay: 0.2s; }
.photo-collage.active .img-3 { transform: rotate(15deg); transition-delay: 0.15s; }
.photo-collage.active .img-4 { transform: rotate(8deg); transition-delay: 0.1s; }
.photo-collage.active .img-5 { transform: rotate(-7deg); transition-delay: 0.25s; }
.photo-collage.active .img-6 { transform: rotate(-15deg); transition-delay: 0.2s; }

form.home-form {  }
form.home-form .form-group { margin-bottom: 1rem; }
form.home-form input,
form.home-form textarea { border: 1px solid #ccc; width: 100%; padding: 1rem 1.25rem; border-radius: 0.25rem; transition: border-color 0.3s, box-shadow 0.3s; color: var(--black); }
form.home-form input:focus,
form.home-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgb(200 101 45 / 40%); }
form.home-form textarea { resize: vertical; }

.favorite-thing { margin-bottom: 10rem; }
.favorite-thing h2 { font-size: 2.25rem; text-align: center; font-family: 'DM Sans'; font-weight: 700; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; }
.favorite-thing .showcase { font-size: 6rem; list-style-type: none; padding: 0; font-family: 'DM Sans'; font-weight: 700; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; height: 1.25em; }
.favorite-thing .showcase li::after { content: ''; position: absolute; bottom: 0; width: 100%; border-top: 8px solid var(--turqoise); transition: transform 1s; transform-origin: left; transform: scaleX(0); transition-timing-function: cubic-bezier(0,.03,.19,1); }
.favorite-thing .showcase.active li::after { transform: none; }
.favorite-thing .showcase li { position: absolute; overflow: hidden; display: flex; }
.favorite-thing .showcase li span { display: inline-block; transform: translateY(100%); }
.favorite-thing .showcase li span.animate { animation-name: letter-ani; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0,1,.5,1); }
.favorite-thing .showcase li span.space { padding-right: 10%; }

@keyframes letter-ani {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}

.freelancer-nodig { font-family: 'Poppins'; margin-bottom: 10rem; }
.freelancer-nodig h2 { font-family: 'DM Sans'; font-weight: 700; font-size: 3rem; margin-bottom: 0.25em; }
.freelancer-nodig h3 { font-family: 'DM Sans'; font-weight: 700; font-size: 2rem; margin-bottom: 0.25em; }
.freelancer-nodig .expertises ul { list-style-type: none; margin-bottom: 2rem; }
.freelancer-nodig .img-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.freelancer-nodig .img-wrap picture { width: 500px; max-width: 100%; }

.contact-me { display: flex; flex-direction: column; align-items: center; font-family: 'Poppins'; margin-bottom: 10rem; }
.contact-me h2 { font-family: 'DM Sans'; font-weight: 700; font-size: 5rem; margin-bottom: 0.5em; }
.contact-me p { font-size: 1.25rem; }
.contact-me a { color: var(--black); text-decoration: none; }
.contact-me a:hover { text-decoration: underline; }

header.vervolg-header { min-height: 0; height: auto; }

.year-wall { display: flex; justify-content: center; align-items: center; text-align: center; top: 0; height: 100vh; width: 100%; position: fixed; font-size: 15rem; font-family: 'DM Sans'; color: #d0d0d0; -webkit-text-stroke-width: 0.5rem; -webkit-text-stroke-color: #d0d0d0; z-index: 2; user-select: none; pointer-events: none; }
.year-wall .year span { display: inline-flex; width: 1ch; justify-content: center; }
.year-wall .year span:first-child { justify-content: flex-end; }
.year-wall .year span:last-child { justify-content: flex-start; }

.year-view { max-width: 1920px; margin: auto; padding: 0 0.75rem; position: relative; }
.year-view .item { max-width: 400px; }
.year-view .item [role="doc-subtitle"] { color: #aaa; font-size: 1.375rem; }
.year-view .item h2 { font-size: 3rem; font-family: 'DM Sans'; font-weight: 700; margin-bottom: 0.2em; }
.year-view .item p { font-family: 'Poppins'; font-size: 1.375rem; }

.year-view .year-1 { margin-top: 20rem; display: flex; margin-bottom: 40rem; }
.year-view .year-1 .item { margin-left: 10%; }
.year-view .year-1 .img-wrap { position: absolute; right: 20%; top: 70%; }

.year-view .year-2 { display: flex; margin-bottom: 20rem; }
.year-view .year-2 .item { margin-left: auto; margin-right: 10%; }
.year-view .year-2 .img-wrap { position: absolute; left: 20%; bottom: 25%; }

.year-view .year-3 { display: flex; margin-bottom: 30rem; }
.year-view .year-3 .item { margin-left: 15%; }

.year-view .year-4 { display: flex; margin-bottom: 20rem; }
.year-view .year-4 .item { margin-left: auto; margin-right: 10%; }
.year-view .year-4 .img-wrap { position: absolute; left: 5%; top: -10%; }
.year-view .year-4 .img2-wrap { position: absolute; left: 25%; bottom: 10%; z-index: 3; }

.year-view .year-5 { display: flex; margin-bottom: 40rem; }
.year-view .year-5 .item { margin-left: 10%; }
.year-view .year-5 .img-wrap { position: absolute; right: 20%; top: 70%; }

.year-view .year-6 { display: flex; margin-bottom: 20rem; }
.year-view .year-6 .item { margin-left: auto; margin-right: 10%; }
.year-view .year-6 .img-wrap { position: absolute; left: 10%; top: -10%; }

.year-view .year-7 { display: flex; margin-bottom: 20rem; }
.year-view .year-7 .item { margin-left: auto; margin-left: 5%; }
/* .year-view .year-7 .img-wrap { position: absolute; left: 10%; top: -10%; } */

.year-view .year-8 { display: flex; margin-bottom: 30rem; }
.year-view .year-8 .item { margin-left: 10%; }
.year-view .year-8 .img-wrap { position: absolute; right: 20%; top: 50%; }

footer { display: flex; justify-content: space-between; padding: 2rem 4rem; font-family: 'Poppins'; }
footer ul { margin: 0; list-style: none; padding: 0; display: flex; gap: 1.25rem; }
footer ul li { text-transform: uppercase; }
footer ul li.divide::before { content: '|'; display: inline-block; margin-right: 1.25rem; }
footer ul li a { color: var(--black); text-decoration: none; }
footer ul li a:hover { text-decoration: underline; }

@media only screen and (max-width: 1600px) {
    .intro-text { font-size: 4rem; }

    .photo-collage { padding: 350px 0; }
    .photo-collage h2 { font-size: 72px; }

    .photo-collage .img-1 { width: 275px; top: 5%; left: calc(calc(50% - var(--half-container)) + 75px); }
    .photo-collage .img-2 { width: 500px; height: 275px; left: calc(50% - 250px); top: 5%; }
    .photo-collage .img-3 { width: 250px; left: calc(calc(50% + var(--half-container)) - 375px); }
    .photo-collage .img-4 { width: 275px; left: calc(calc(50% - var(--half-container)) + 100px); }
    .photo-collage .img-5 { width: 375px; left: calc(50% - 185px); }
    .photo-collage .img-6 { width: 250px; height: 250px; top: 60%; left: calc(calc(50% + var(--half-container)) - 400px); }

    .favorite-thing h2 { font-size: 2rem; }
    .favorite-thing .showcase { font-size: 5rem; }
}

@media only screen and (max-width: 1399px) {
    .intro-text { font-size: 3.75rem; }

    .chapter h2 { font-size: 2.75rem; }

    .photo-collage { --container-width: 1200px; padding: 275px 0; margin-bottom: 7rem; }
    .photo-collage h2 { font-size: 64px; }

    .photo-collage .img-1 { width: 220px; left: calc(calc(50% - var(--half-container)) + 150px); }
    .photo-collage .img-2 { width: 375px; height: 225px; left: calc(50% - 186px); }
    .photo-collage .img-3 { width: 200px; top: 12%; }
    .photo-collage .img-4 { width: 215px; left: calc(calc(50% - var(--half-container)) + 150px); }
    .photo-collage .img-5 { width: 300px; left: calc(50% - 150px) }
    .photo-collage .img-6 { width: 175px; height: 175px; }

    .favorite-thing { margin-bottom: 7rem; }
    .favorite-thing h2 { font-size: 1.75rem; }
    .favorite-thing .showcase { font-size: 4rem; }

    .freelancer-nodig { margin-bottom: 7rem; }
    .freelancer-nodig h2 { font-size: 2.75rem; }
    .freelancer-nodig h3 { font-size: 1.75rem; }
}

@media only screen and (max-width: 1199px) {
    .intro-text { font-size: 3.25rem; }

    .chapter h2 { font-size: 2.5rem; }

    .photo-collage { margin-bottom: 5rem; }
    .photo-collage h2 { font-size: 52px; }

    .favorite-thing { margin-bottom: 5rem; }
    .favorite-thing h2 { font-size: 1.5rem; }
    .favorite-thing .showcase { font-size: 3.5rem; }
    .favorite-thing .showcase li::after { border-top-width: 5px; }

    .freelancer-nodig { margin-bottom: 5rem; }

    .contact-me h2 { font-size: 3.5rem; }

    footer { padding: 2rem; }
}

@media only screen and (max-width: 991px) {
    nav { padding-top: 1.5rem; }

    .intro-text { font-size: 3rem; }

    .chapter h2 { font-size: 2rem; }
    .chapter .chapter-title { font-size: 1.5rem; }

    .freelancer-nodig .content { margin-bottom: 2rem; }

    footer { flex-direction: column; }
}

@media only screen and (max-width: 767px) {
    .intro-text { font-size: 2.5rem; }

    .photo-collage { --container-width: 100%; padding: 50vw 0; }
    .photo-collage h2 { font-size: 36px; }
    .photo-collage .img-1 { width: 34vw; left: 2%; }
    .photo-collage .img-2 { width: 55vw; height: 35vw; left: 45%; }
    .photo-collage .img-3 { display: none; }
    .photo-collage .img-4 { width: 35vw; left: 54%; top: 60%; }
    .photo-collage .img-5 { width: 50vw; left: -2%; }
    .photo-collage .img-6 { display: none; }

    .favorite-thing h2 { font-size: 1.25rem; }
    .favorite-thing .showcase { font-size: 3rem; }
    .favorite-thing .showcase li::after { border-top-width: 4px; }

    .freelancer-nodig h2 { font-size: 2.5rem; }
    .freelancer-nodig h3 { font-size: 1.5rem; }

    .contact-me h2 { font-size: 3rem; }

    form.home-form input,
    form.home-form textarea { padding: 0.75rem 1rem }

    footer { padding: 1rem 0.75rem; font-size: 0.875rem; }
    footer ul { gap: 1rem; }
    footer ul li.divide::before { margin-right: 1rem; }
}

@media only screen and (max-width: 575px) {
    p,
    ul { font-size: 0.875rem; }

    header { height: auto; }    
    header .wall-text-wrap { position: static; height: auto; width: auto; font-size: clamp(3.5rem, 15vw, 20rem); margin: 0; line-height: 0.9; }
    header .wall-text-wrap .wall-text span:nth-child(1),
    header .wall-text-wrap .wall-text span:nth-child(2) { text-align: left; transform: none!important; }

    .chapter { margin-bottom: 1rem; }
    .chapter h2.hidden span { transform: none; }
    .intro-text { font-size: 2.75rem; }
    .intro-text span.my-name .my-name-content.hidden { opacity: 1; }
    .intro-content .word .sub-word { transform: none; }

    .freelancer-nodig h2 { font-size: 2rem; }

    footer .right-items { flex-direction: column; }
    footer .right-items .divide::before { display: none; }
}

@media only screen and (max-width: 479px) {
    .chapter .chapter-title { font-size: 1.25rem; }
    .chapter h2 { font-size: 2rem; }
    .chapter .line { border-bottom-width: 2px; }
    .intro-text { font-size: 1.75rem; }
}