main{
  margin-top:3.5em;
}
/* -------------------------
   Navigatie
------------------------- */

.navigatieContent {
    height: 0;
    display: flex;
    width: 30%;
    justify-self: center;
    align-self: center;
    flex-direction: column;
    text-align: end;
    font-family: 'DIN Condensed Bold';
    text-transform: uppercase;
    gap: 4rem;
    list-style: none;
    position: absolute;
    font-size: clamp(1rem, 6vw, 6rem);
    top: 0rem;
    right:7%;
    padding: 0;
    margin: 0;
    hyphens: auto;
}
.navigatieContent.open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right:0%;
    bottom: 0;
    height: 100vh;
    width: fit-content;
    background: var(--color-secondary); /* of een andere achtergrondkleur */
    box-shadow: -20px 0px 30px -10px var(--box-shadow);
    padding: 2rem;
    justify-content: center;
    opacity: 1;
    transition: all .5s ease-in-out;
    z-index: 999;
    li{
        margin:0  1em;
    }
}
.navigatieButton {
    display: none;
}

.navigatieContent.sticky {
    display: none;
}

.navigatieButton.sticky {
    display: block;
}

/* ///////////////////////////////// gestapelde fotos mijn introductie/////////////// */

#intro {
    position: relative;
    width: 50%;
    height: 100%;
    top: -1em;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center; 
    align-self: center;

}

#intro .bg {
    width: 70%;
    height: auto;    
    display: block;
    z-index: 1;
     animation: bg 3s 4 forwards linear alternate ;
}

#intro .foreground {
    position: absolute;
    top: 2em;
    left: 0;
    width: 50%;
    height: 100%;      
    object-fit: contain; 
    transform: translate(50%, 5%) rotate(-8deg); 
    z-index: 2;


}
#intro .stamp {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;     
    height: 90%;
    transform: translate(-50%, 5%) rotate(-8deg) scale(1.1); 
    transform-origin: center center;
    z-index: 3;
}

main > div:nth-of-type(2){
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center; /* horizontaal centreren */
    align-items: center; 
    svg{
        position: absolute;
        top: 0;
        left: 15%;
        width: 10%;
        height: auto;
       
    }
}

.introduction{
    container-name:about ;
    container-type:inline-size;
    >div{
        display: flex;
        padding:10em 4em;
        justify-content: space-between;
        flex-direction: row;
        section{
            width: 50%;
            h2{
                animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh;
            }
            p{
                font-weight: 500;
                font-size: 1.2em;
                margin: .4em 0;
                animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
}
            div {
                display: flex;
                gap: 1em;
                a{
                    position: relative;
                    color: var(--color-main);
                    font-family: 'DM sans';
                    font-weight: bold;
                    text-transform: capitalize;
                    font-size: 1.1em;   
                    text-decoration: none;
                    animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
                }
                /* a:hover{
                    color: var(--color-main);
                    text-decoration: none;
                    transition: .5s all ease-out ;
                } */
                a::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom:-.1em;
                    width: 0%;
                    height: 0.09em;
                    background-color: var(--color-main);
                    transition: all 0.3s ease;
                    transform-origin: left center;
                    width: 100%;
                    transform: rotate(-2.5deg);
                }
                a:hover::after {
                    width: 0%;
                    transform: rotate(-2deg);
                }
            }
            >a{
                display: block;
                font-family: 'DM sans';
                font-weight: bold;
                font-size: 1.1em;
                width: fit-content;
                margin: 1em 0;
                background: linear-gradient(
                    to bottom left,
                    var(--color-secondary) 50%,
                    var(--color-main) 50%
                );
                background-size: 300% 300%;
                background-position: bottom;
                border: .1em solid var(--color-main);
                padding: .5em 1em;
                border-radius: 2em;
                color: var(--color-secondary);
                font-weight: 400;
                text-decoration: none;
                transition: 0.3s ease-in-out;
                animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
            }
            >a:hover{
                background-position: top right;
                color: var(--color-main);
                border: .1em solid var(--color-main);
            } 
        }
        >div:nth-of-type(1){
            position: relative;
            height:15em;
            width: 11em;
            z-index: 0;
            margin-right: 2em;
            animation: image-appear ease-in both;
            animation-timeline: view();
            animation-range: entry 50% 50vh;
            svg{
                position: absolute;
                top: -1em;
                left: 35%;
                height:4em;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border: 1em double var(--light-dark-red);
                border-top-left-radius: 100% 50%;
                border-top-right-radius: 100% 50%;
                border-bottom-left-radius: 1em 1em;
                border-bottom-right-radius: 1em 1em;
                z-index: -1;
            }   
        }
    }   
}


@container about (width < 800px){
    .introduction{
        >div{
            flex-direction: column;
            gap: 5em;
            align-items: center;
            padding:5em 1em 3em 1em;
            
            section{
                width: 100%;  
            }
            >div:nth-of-type(1){
            width: 70%;
            height: auto;
                svg{
                    position: absolute;
                    top: -2em;
                    left: 40%;
                    height:7em;
                }
            }
        }
    }
}

main> section{
    width: 100%;
    place-self: center;
    padding: 0 4em;
    h2{
        margin: .5em 0;
        animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
    }
}

#projects{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    place-self: center;
    flex-direction: row;
    gap: 2em;
    padding-bottom: 10em;
    .project{
        background-color: var(--border);
        flex: 1 1 45%;  
        min-width: 20em;  
        height: 30em;
        border-radius: 1em;
        display: flex;
        flex-direction: column; 
        justify-content: space-between;
        overflow: hidden;
        z-index: 0;
        border:.2em solid var(--border);
        
        animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
        img{
            width: 100%;
            object-fit: cover;   
            display: block;
            height: 22em;
            z-index: -1;
        }
        div{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0 2em 2em 2em;
            align-items: center;
            background-color: transparent;
            z-index: 1;
            gap: 1em;
            h3{
                text-transform:uppercase;
                font-family: 'DM sans';
                font-size: 1.5em;
                hyphens: manual;
                margin: .5em 0;
            }
            a{
                background: linear-gradient(
                    to bottom left,
                    var(--color-secondary) 50%,
                    var(--color-main) 50%
                );
                background-size: 300% 300%;
                background-position: bottom;
                border: .1em solid var(--color-main);
                padding: .5em 1em;
                border-radius: 2em;
                color: var(--color-secondary);
                font-weight: 400;
                text-decoration: none;
                transition: 0.3s ease-in-out;
                }
            a:hover {
                background-position: top right;
                color: var(--color-main);
                border: .1em solid var(--color-main);
            }    
        }
    }
}
#projects .project:hover{
     transform: scale(1.015);
    transition: transform .3s ease-in-out;
   
}
.contact{
    container: contact / inline-size;
    width: 100%;
    display: flex;
    flex-direction: column;
    place-self: center;
    padding: 0 5em 0 4em;
    animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
    >div{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 2em 0;
    }
}
#contact {
    position: relative;
    width: 40%;
    height: 100%;
    top: 0em;
    left: -3em;
    display: flex;
    justify-content: center;
    align-items: center; 
    align-self: center;
    z-index: 0;
}


#contact .bg {
    width: 50%;
    height: auto;        /* hoogte bepaalt automatisch de container */
    display: block;
    z-index: 1;
}

#contact .stamp {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;       /* 20% groter dan de foto */
    height: 90%;
    transform: translate(-50%, 5%) rotate(-98deg) scale(1.1); 
    transform-origin: center center;
    z-index: 3;
}

.paperplane{
    width: 100%;
    position: relative;
    z-index: 1;
    svg{
        position: absolute;
        top: -17em;
        left: 31.5%;
        height: 13em;
    }
}

@container contact (width < 800px){
    .contact{
        h2{
            margin:1em 0 0;

        }
        >div{
            flex-direction:column;     
        }
        #contact,
        .paperplane
        {
            display: none;
            visibility: hidden;
        } 
        form{
             width: 80%;
            place-self: center;
            padding: 2em 0;
        } 
    }
}

/* ----------------- photography-------------------- */

.wrapper {
  position: relative;
  height: 300px;
  margin: 4em;
  display: flex;
  flex-direction: row;
  transition: all 200ms ease-in-out;
  animation: text-appear ease-in both;
                animation-timeline: view(); /* applies animation state relative to viewport */
                animation-range: 0vh 40vh; /* set 0% and 100% positions */
}

.image-wrapper {
  height: 300px;
  width: 450px;
  overflow: hidden;
  border-radius: 1em;
  cursor: pointer;

  transition: all 200ms ease-in-out;
}

img {
  height: 300px;
  width: 450px;
  object-fit: cover;
  object-position: top;
  transition: all 200ms ease-in-out;
}

.book-design-image {
  object-position: center;
}

.header-wrapper {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 300px;
  left: 50%;
  transition: all 200ms ease-in-out;
  overflow: hidden;
  
}
.header-wrapper a:has(h2){
    position: relative;
    bottom: 0; 
    height: 300px;
    font-family: 'DIN Condensed';
    font-size: 1em; 
    width: 100%;
    text-shadow: 1px 1px 5px #c3c3c3ab;
    text-decoration: none;
    color: var(--color-main);
    transition: all 200ms ease-in-out;
}


.header-wrapper a:has(:not(h2)){
    position: relative;
    display: block;
    bottom: -100px;
    left: 0;
    height: 300px;
    width: fit-content;
    font-family: 'DM sans';
    margin-top: 6em;
    font-size: 1.2em;
    background: linear-gradient(
        to bottom left,
        var(--color-secondary) 50%,
        var(--color-main) 50%
    );
    background-size: 300% 300%;
    background-position: bottom;
    border: .1em solid var(--color-main);
    color: var(--color-secondary);
    padding: .6em 2em;
    border-radius: 1.5em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 200ms ease-in-out;
}

.wrapper:hover img {
  transform: scale(1.5);
  /*object-position: bottom;*/
}

.wrapper:hover a:has(:not(h2)) {
  bottom: 140px;
  left: 0;
}

.wrapper a:has(:not(h2)):hover{
    background-position: top right;
    color: var(--color-main);
    border: .1em solid var(--color-main);
}
.wrapper:hover .image-wrapper {
  width: 100vw;
}
/* .photography-container {
    position: relative;
    width: 50%;
    margin: 50px auto;
    text-align: center;
    height: 80vh;
    padding-bottom: 5em; 
}

.main-btn {
    position: relative;
    display: inline-block;
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    z-index: 100;
    cursor: pointer;
    pointer-events: auto;
    margin-bottom: 5em;
    img{
        opacity: .7;
    }
}

.main-btn img {
    width: 100%;
    display: block;
}

.main-btn .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    font-weight: bold;
    font-family: 'DIN condensed';
    color: var(--color-main);
    text-shadow: 1px 1px 5px #a2a2a2ab;
    text-decoration: underline;
}

.more-link {
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom left,
        var(--color-secondary) 50%,
        var(--color-main) 50%
    );
    background-size: 300% 300%;
    background-position: bottom;
    border: .1em solid var(--color-main);
    padding: .5em 1em;
    color: var(--color-secondary);
    padding: .6em 2em;
    border-radius: 1.5em;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    opacity: 0;
    pointer-events: none;
    text-transform: capitalize;
    transition: 0.3s ease-in-out;
    }

.more-link:hover{
    background-position: top right;
    color: var(--light-dark-red);
    border: .1em solid var(--light-dark-red);
}

.extra-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.extra {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: auto;   
    opacity: 0;      
    z-index: 1;  
    pointer-events: none;
    border-radius: 1em;
} */



/* /---------------- mobiele versie --------------/ */
@media (max-width: 1100px){
    .header-wrapper a:has(h2){
        text-decoration: underline;
    }
}

@media (max-width: 800px) {
   .navigatieContent {
        display: none !important;
    }

    .navigatieButton {
        display: block;
    }

    #intro {
        position: relative;
        width: 60vw;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        display: inline-block;   
    }

    .welkom{
        height: 40vh;
    }

    #intro .bg {
        width: 100%;
        height: auto;       
        display: block;
        z-index: 1;
    }

    #intro .foreground {
        top: 1.5em;
        width: 70%;
        height: auto;
        transform: translate(20%,20%) rotate(-8deg) scale(1.2) ; 
        z-index: 2;
    }

    #intro .stamp {
        top: 1.5em;
        left: 50%;
        width: 100%; 
        height: auto;
        transform: translate(-50%, 0%) rotate(-8deg) scale(1.1); 
        transform-origin: center center;
        z-index: 3;
    }

    div:nth-of-type(2){
        svg{
            display: none;
        }
    }

    main>section{
        h2{
            margin: 1em .3em;
        }
    }

    #projects{
        margin: 0;
        width: 90%;
        .project{
            div{
                h3{
                    display: flex;
                    place-self: start;
                    hyphens: manual;
                }
                p{
                    display: flex;
                    place-self: end;
                }
            }
        }
    }
.header-wrapper a:has(h2){
    text-decoration: underline;
}
.header-wrapper a:has(:not(h2)){
    bottom: 100px; 
}
.image-wrapper { 
    width: 700px;
}

img {
  width: 700px;
}
}

@media (min-width:320px)and (max-width:460px){
    #intro .foreground {
        height: 50%;
    }

    #intro .stamp {
        height: 60%;
    }

    div:nth-of-type(2){
        svg{
            display: none;
        }
    }

    .introduction{
        >div{
            padding: 1em;
            section div svg{
                height: 2em;
            }
        }
    }

    #projects{
        width: 95%;
        margin: 0 auto;
        .project{
            width: 100%;
            div{
                flex-direction: row;
            }
        }
    } 

    .contact{
        padding: 1em;
        form {
            padding: 0;
            width: 95%;
            margin: 0 auto;
        }
    }

    .main-btn {
       img{
        margin-top: 7em;
       }
    }

    .main-btn .title {
        left: 30%;
    }
    main>section{
        padding: 0 .5em;
    }

    .wrapper {
        width: 90%;
        margin: 2em auto;
    }

    .image-wrapper {
        width: auto;
        overflow:auto;
    }   

    img {
        width: auto;
        object-fit: contain;
        object-position: center;
    }

    .header-wrapper {
        left: 0%;
        width: 100%;
    }
    .header-wrapper a:has(h2){   
        color: var(--color-secondary);
        padding-left: 1em;
    }
    .wrapper a:has(:not(h2)) {
       display:none;
    }
}