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

:root {
    --primary-color: #EA6D40;
    --secondary-color: #3198B2;
    --light-color: #FFFCD5;
    --header-padding: 2%;
    --nav-padding-inline: 15%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Calibri', sans-serif;
    background-color: var(--light-color);
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: transparent;
    padding: var(--header-padding) 0;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding-inline: var(--nav-padding-inline);
}

nav a {
    color: var(--light-color);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}

body.home header nav a {
    color: var(--primary-color);
    margin-top: -1rem;
}

nav a:hover,
body.home header nav a:hover {
    color: var(--secondary-color);
}

nav ul li img,
footer img {
    max-width: 9rem;
    height: auto;
    transition: transform 0.2s ease-in-out;
}

nav ul li img:hover {
    transform: scale(1.1);
}

.image-row figure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.image-row img {
    max-width: 100%;
    height: auto;
    width: 30rem;
    display: block;
}

.image-row figure:first-of-type {
    margin-top: 5rem;
    ;
}

h1 {
    font-family: 'chicle';
    font-size: 3rem;
    text-align: center;
    color: var(--secondary-color);
    padding: 3rem 0;
    letter-spacing: 0.3rem;
}

h2 {
    font-family: 'chicle';
    font-size: 2.5rem;
    color: var(--light-color);
    padding: 1rem 0;
    letter-spacing: 0.25rem;
}

h3 {
    font-family: 'Calibri';
    font-size: 1rem;
    font-weight: bold;
    color: var(--secondary-color);
    padding: 1rem 0;
}

.image-row figure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.image-row img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hero img,
.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero {
    position: relative;
    height: 74vh;
    overflow: visible;
    margin-bottom: 5.8rem;
}

.hero figure img {
    width: 100%;
    height: auto;
    display: block;
}

.hero figure {
    position: relative;
    z-index: 1;
}

.element {
    position: absolute;
    width: 10vw;
    /* responsive grootte */
    max-width: 12rem;
    /* limiet voor desktop */
    min-width: 4rem;
    /* limiet voor mobile */
    z-index: 5;
}

/* Posities in percentages */
.bloem {
    top: 20%;
    left: 8%;
}

.palmboom {
    top: 65%;
    left: 75%;
}

.shelp {
    top: 80%;
    left: 32%;
}

.vlam {
    top: 25%;
    left: 80%;
}

footer {
    background: var(--primary-color);
    color: var(--light-color);
    padding: 2rem 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

footer h3 {
    flex: 1;
    font-size: 1.8rem;
    text-align: center;
    font-family: 'chicle';
    color: var(--light-color);
    letter-spacing: 0.2rem;
}

footer nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    list-style: none;
    padding: 0 2rem;
    gap: 0.5rem;
}

.blauwe-container {
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

#project {
    background-color: var(--secondary-color);
    color: var(--light-color);
}

.blauwe-container img,
.image-row img {
    max-width: 100%;
    height: auto;
    display: block;
}

.blauwe-container img {
    margin-top: 5rem;
}

.blauwe-container ul {
    margin-bottom: 5rem;
}

.full-width {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.full-width img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.footer-wave,
.top-wave {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

svg .top-wave {
    margin-top: 0;
    padding-top: 0;
}

.top-wave,
.bottom-wave {
    fill: var(--secondary-color);
}

.footer-wave {
    fill: var(--primary-color);
    background-color: var(--secondary-color);
}

.home .footer-wave {
    background-color: var(--light-color);
}

.bottom-wave {
    transform: rotate(180deg);
}

#projecten {
    background-color: var(--secondary-color);
}

#projecten h1 {
    color: var(--light-color);
}

.project figure {
    position: relative;
}

/* container blijft bovenop beeld */
.project-blob {
    position: absolute;
    top: 30%;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.project-blob li {
    width: 13rem !important;
    height: 13rem !important;
    perspective: 50rem;
    pointer-events: auto;
    position: relative;
}

/* links/rechts blobs */
.project-blob li.left {
    margin-left: -60%;
    align-self: flex-start;
}

.project-blob li.right {
    margin-left: 60%;
    align-self: flex-end;
}

/* flip-card zelf */
.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    border-radius: 60% 40% 50% 70% / 50% 60% 40% 50%;
}

.project-blob li:hover .flip-card {
    transform: rotateY(180deg);
}

/* voor- en achterkant */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    padding: 0;
    font-weight: bold;
    text-align: center;
    background: var(--primary-color);
    color: var(--light-color);
}

/* achterkant */
.flip-card-back {
    background: var(--secondary-color);
    transform: rotateY(180deg);
    flex-direction: column;
}

.flip-card-back .meer-info {
    margin-top: 1rem;
    background-color: var(--light-color);
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 20% 30% 20% 40%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.flip-card-back .meer-info:hover {
    background-color: var(--primary-color);
    color: var(--light-color);
    transform: scale(1.1);
}

.project img {
    width: 100%;
    height: auto;
}

.project-container {
    display: flex;
    align-items: center;
}

.about-me {
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.golf-sectie {
    margin-top: 6rem;
}

#wie-ik-ben,
#skill-groups {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15rem;
    padding: 0 16rem;
    padding-top: 5rem;
}

#skills {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.skill-groups {
    display: flex;
    line-height: 1.2rem;
}

#skills img {
    width: 6rem;
    padding: 0.5rem;
    height: auto;
}

#skills h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
    text-align: center;
}

#skills h3 {
    font-family: 'calibri';
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 1rem;
}

.skill-group {
    position: relative;
    width: 18rem;
    height: 18rem;
    margin: 2rem 6rem;
}

.skill-group h3 {
    text-align: center;
    font-family: 'chicle';
    font-size: 1.6rem;
    color: var(--secondary-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* Container met icons */
.icon-circle {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Elk icoontje */
.icon-circle img {
    width: 4rem;
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Plaats icons in een cirkelvorm (5 items) */
.icon-circle img:nth-child(1) {
    top: 11%;
    left: 40%;
}

.icon-circle img:nth-child(2) {
    top: 28%;
    left: 90%;
}

.icon-circle img:nth-child(3) {
    top: 74%;
    left: 87%;
}

.icon-circle img:nth-child(4) {
    top: 90%;
    left: 40%;
}

.icon-circle img:nth-child(5) {
    top: 52%;
    left: 8%;
}

.skill-groups {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
    /* zorgt dat het op mobiel onder elkaar komt */
}

.skill-group h3 {
    line-height: 1.9rem;
    /* meer ruimte tussen "Adobe" en "tools" */
}

.cv-button {
    background-color: var(--primary-color);
    color: var(--light-color);
    border: none;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s ease;
    border-radius: 45% 30% 60% 38%;
    display: inline-block;
    margin-top: 1rem;
}

.cv-button:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
    transform: scale(1.05);
}

.about-me p,
.about-me li {
    font-size: 1.2rem;
    color: var(--light-color);
    line-height: 1.5rem;
}

#wie-ik-ben img {
    max-width: 50%;
    height: 25em;
    object-fit: cover;
}

#samen-werken {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}

/* Formulier */
#samen-werken form {
    display: flex;
    padding: 2em;
    margin: 0 auto;
    max-width: 70rem;
}

#samen-werken a,
#samen-werken .telefoon {
    font-weight: bold;
    color: var(--primary-color);
}

/* Inputvelden naast elkaar */
.form-row {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Velden en knop: organische blobvorm */
#samen-werken input[type="text"],
#samen-werken input[type="submit"],
#samen-werken textarea {
    border: none;
    font-size: 0.85rem;
    border-radius: 35% 45% 45% 35% / 55% 30% 55% 30%;
    color: var(--light-color);
    width: 100%;
    box-sizing: border-box;
    margin-right: 3rem;
}

#samen-werken input[type="text"] {
    background-color: var(--primary-color);
    width: 13rem;
}

textarea {
    border-radius: 21% 22% 25% 32%;
    background-color: var(--primary-color);
    resize: none;
    height: 11rem;
    padding: 2rem 2rem 0rem 3rem;
}

input[type="text"],
input[type="submit"] {
    border-radius: 42% 32% 28% 42%;
    padding: 1.2rem 1rem;
}

#submit {
    background-color: var(--secondary-color);
    cursor: pointer;
    align-self: flex-start;
    font-weight: bold;
    width: 4rem;
}

input::placeholder,
textarea::placeholder,
#submit {
    color: var(--light-color);
    text-transform: uppercase;
}

#samen-werken input[type="submit"] {
    background-color: var(--secondary-color);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    width: auto;
    padding: 0.8rem 1.5rem;
    border-radius: 42% 32% 28% 42%;
    align-self: flex-start;
}

#samen-werken input[type="submit"]:hover {
    background-color: var(--primary-color);
    transform: scale(1.05);
}

.socials img {
    width: 3rem;
    height: auto;
    padding-left: 0.8rem;
}

#samen-werken h3 {
    font-family: 'calibri';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}

#samen-werken h3,
#samen-werken form,
.socials {
    width: 48%;
    margin: 0 auto;
    text-align: left;
    padding-left: 2.3rem;
    padding-right: 2.3rem;
}

.socials a {
    text-decoration: none;
    display: inline-block;
}

/* blijft voor screenreaders, maar hindert niets visueel */
.hidden {
    position: absolute;
    width: 0.1em;
    height: 0.1em;
    overflow: hidden;
    clip: rect(0.1em, 0.1em, 0.1em, 0.1em);
    white-space: nowrap;
}

.hidden,
figcaption {
    position: absolute;
    width: 0.1em;
    height: 0.1em;
    overflow: hidden;
    clip: rect(0.1em, 0.1em, 0.1em, 0.1em);
    white-space: nowrap;
}

.project-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5rem;
}

.visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.visual img {
    display: block;
    max-width: 100%;
    margin-top: 8rem;
    height: 22rem;
}

.textblock {
    flex: 1;
    max-width: 40%;
    padding-right: 5rem;
    color: var(--primary-color);
    margin-top: 10rem;
    margin-right: 7rem;
    line-height: 1.3;
    font-size: 1.1rem;
}

.project-container figure img[src*="dolphin_dive_visual.png"] {
    margin-top: 7rem;
    margin-left: 6rem;
}

strong {
    font-weight: 900;
    font-size: 1.2rem;
}

.textblock h3 {
    font-family: 'chicle';
    font-size: 2.5rem;
    color: var(--secondary-color);
    padding-bottom: 0.5rem;
}

.bolletjes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.bolletjes-container li {
    padding: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 60% 40% 50% 70%;
    width: 9rem;
    height: 9rem;
    margin: 1rem;
    transition: transform 0.2s ease;
    line-height: 1.2;
}

.bolletjes-container li:nth-child(1) {
    border-radius: 55% 45% 60% 50% / 50% 60% 40% 50%;
}

.bolletjes-container li:nth-child(2) {
    border-radius: 60% 40% 55% 45% / 45% 55% 50% 50%;
}

.bolletjes-container li:nth-child(3) {
    border-radius: 50% 55% 45% 60% / 60% 50% 55% 45%;
}

.bolletjes-container li:nth-child(4) {
    border-radius: 58% 42% 52% 48% / 52% 48% 58% 42%;
}

.bolletjes-container li:nth-child(5) {
    border-radius: 62% 38% 48% 52% / 55% 45% 50% 50%;
}

.bolletjes-container li:nth-child(6) {
    border-radius: 53% 47% 57% 43% / 47% 53% 43% 57%;
}

/* THEMAKLEUREN - GESORTEERD */
.dolphin-dive li:nth-child(1) {
    color: #D4E9D9;
    background: #3DB077;
}

.dolphin-dive li:nth-child(2) {
    color: #3DB077;
    background: #D4E9D9;
}

.dolphin-dive li:nth-child(3) {
    color: #3DB077;
    background: #E6DEEB;
}

.dolphin-dive li:nth-child(4) {
    color: #3DB077;
    background: #CFC6E3;
}

.dolphin-dive li:nth-child(5) {
    color: #D4E9D9;
    background: #A896C8;
}

.dolphin-dive li:nth-child(6) {
    color: #D4E9D9;
    background: #9878C3;
}

.Echoes-of-Jazz li:nth-child(1) {
    color: #000000;
    background: #F9EC00;
}

.Echoes-of-Jazz li:nth-child(2) {
    color: #F9EC00;
    background: #000000;
}

.cedric-de-mare li:nth-child(1) {
    color: #FFFFFF;
    background: #C3A280;
}

.cedric-de-mare li:nth-child(2) {
    color: #FFFFFF;
    background: #C3635B;
}

.back-to-the-future li:nth-child(1) {
    color: #383844;
    background: #FFFFFF;
}

.back-to-the-future li:nth-child(2) {
    color: #383844;
    background: #D9CDBF;
}

.back-to-the-future li:nth-child(3) {
    color: #FFFFFF;
    background: #A18D86;
}

.back-to-the-future li:nth-child(4) {
    color: #FFFFFF;
    background: #383844;
}

.illustratie-eekhoorn li:nth-child(1) {
    color: #7D4737;
    background: #F1EDA7;
}

.illustratie-eekhoorn li:nth-child(2) {
    color: #7D4737;
    background: #E19951;
}

.illustratie-eekhoorn li:nth-child(3) {
    color: #F1EDA7;
    background: #AB5C0E;
}

.illustratie-eekhoorn li:nth-child(4) {
    color: #F1EDA7;
    background: #7D4737;
}

.mobile-bottom-wave {
    display: none;
    width: 100%;
    overflow: hidden;
}

.mobile-bottom-wave svg {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-bottom-wave path {
    fill: var(--secondary-color);
    /* blauwe kleur */
}

.meer-projecten article {
    position: relative;
    background-color: var(--secondary-color);
}

.meer-projecten {
   padding-top: 5.7rem;
}

.meer-projecten h3 {
    font-family: 'chicle';
    text-align: center;
    color: var(--light-color);
    font-size: 2.5rem;
    margin-bottom: 5rem;
    letter-spacing: 0.2rem;
}


.meer-projecten ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5rem;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}


.meer-projecten a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.meer-projecten img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.meer-projecten span {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 80%;
    text-align: center;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.4rem;
    z-index: 2;
    pointer-events: none;
}

.meer-projecten li {
    width: 15rem;
    height: 15rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
    position: relative;
    border-radius: 55% 45% 60% 50% / 50% 60% 40% 50%;
}

/* Tekst-knop bovenop de foto */
.meer-projecten span {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: var(--light-color);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0.6rem 1rem;
    border-radius: 22% 33% 25% 40%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto;
}

/* Alleen wanneer de muis OP DE TEKST staat → niet op de foto */
.meer-projecten span:hover {
    background-color: var(--primary-color);
    color: var(--light-color);
}

.socials a img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.socials a:hover img {
    transform: scale(1.15);

}

.socials {
    margin-bottom: 2rem;
}


@media (max-width: 768px) {

    header {
        padding: 1rem 0;
        background: var(--secondary-color);
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 2rem 0;
    }

    header nav ul li img {
        max-width: 7rem;
    }

    header nav a {
        color: var(--light-color);
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
    }

    .mobile-bottom-wave {
        margin-top: 17rem;
        display: block;
    }

    .mobile-bottom-wave svg {
        transform: scaleY(-1);
    }

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

    .image-row,
    .project-container figure img {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .project-container figure img {
        height: 18rem;
    }

    .hero {
        display: none;
    }

    body.home header {
        background: transparent;
        position: relative;
    }

    nav ul {
        flex-direction: column;
        padding-inline: 0;
        gap: 1rem;
    }

    /* Footer stacken */
    footer {
        padding: 2rem 1rem;
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    footer nav ul {
        align-items: center;
        padding: 0;
        gap: 0.8rem;
    }

    footer h3 {
        text-align: center;
        flex: unset;
        width: 100%;
    }

    .meer-projecten article {
        padding-bottom: 5rem;
    }

    .meer-projecten svg {
        padding-top: 4rem;
    }

    .project-container {
        flex-direction: column;
        gap: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .visual img {
        margin-top: 2rem;
        margin-bottom: 1rem;
        max-width: 100%;
        height: auto;
    }

    .textblock {
        padding: 0;
        margin-top: 0;
    }

    .full-width {
        display: none;
    }

    /* Afbeelding in #wie-ik-ben */
    #wie-ik-ben,
    #skills {
        flex-direction: column;
        gap: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        text-align: center;
    }

    #wie-ik-ben img {
        max-width: 90%;
        height: auto;
    }

    .textblock {
        padding: 2rem;
    }

    /* Project sectie */
    .project-container {
        flex-direction: column;
    }

    .visual img {
        max-width: 100%;
        margin: 0;
        align-items: center;
    }

    .visual,
    .textblock {
        max-width: 100%;
        padding: 2rem;
    }

    #wie-ik-ben,
    .project-blob {
        top: 10%;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .project-blob li.left,
    .project-blob li.right {
        margin-left: 0;
        align-self: center;
    }

    .project-blob {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .project-blob li {
        width: 9rem !important;
        height: 8.5rem !important;
        font-size: 0.7rem;
    }

    /* Contact formulier */
    #samen-werken form,
    #samen-werken h3,
    .socials {
        width: 90%;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: 0 auto;
    }

    #samen-werken form {
        flex-direction: column;
        margin: 0;
        padding: 0;
        width: 90%;
        gap: 3rem;
    }

    .form-row {
        text-align: center;
        justify-content: center;
    }

    input[type="text"],
    textarea,
    input[type="submit"] {
        max-width: 100%;
    }

    h1,
    h2 {
        font-size: 2rem;
    }

    .meer-projecten ul {
        flex-direction: column;
        align-items: center;
    }

    .meer-projecten li {
        width: 13rem;
        height: 13rem;
        gap: 1rem;
        margin: 0;
        padding: 0;

    }

    .flip-card-back .meer-info {
        margin-top: 0.4rem;
    }

    /* Fix: margin-probleem bij project-container afbeeldingen */
    .project-container figure img {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Fix: image-row die te breed wordt */
    .image-row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Fix: individuele afwijkende margins die layout breken */
    .project-container figure img[src*="dolphin_dive_visual.png"] {
        margin-left: 0;
        margin-top: 2rem;
    }

    /* Algemene horizontale overflow kill-switch */
    body {
        overflow-x: hidden;
    }

    .socials {
        margin-bottom: 2.5rem;
    }

    .meer-projecten {
        padding-top: 4rem;
        /* ruimte voor de wave */
        overflow: visible;
    }

    #samen-werken h3 {
        max-width: 90%;
        /* tekst smaller → automatisch mooi breken */
        line-height: 1.4;
        /* beter leesbaar */
    }

}