#about{
    color: var(--color-key);

    justify-content: center;
    align-items: start;

    padding:0;
}

#about > h2 {
    color: var(--color-key);
    width:auto;
    text-align: left;
    padding:2em 0 0 0;
    /* margin:0; */
    margin-left:var(--margin-sides);
    

}

#about > h3 {
    color: var(--color-key);
    margin-left:var(--margin-sides);
    margin-top: var(--spacing-medium);
    margin-bottom: 0;
    font-size:var(--font-size-large);
}

#about img{
    display: none;
    /* enkel zichtbaar op mobiel */
    src: url("../photos/about/aboutme.jpg"), url("../photos/about/aboutme\ lowres.jpg.jpg");
}


:where(#about > p){
    color: var(--color-accent-not-black);
    font-size:var(--font-size-normal);
    line-height: 1.4;
    width:45vw;
    max-width:1200px;
    min-width:500px;
    margin:0;
    margin-left:5vw;
    font-family: var(--font-sans);
}

#about a {
    text-shadow: 1px 1px 1px #000a;
    color:var(--color-accent-not-white);
    text-decoration-color: var(--color-accent-not-white);
    font-weight: 400;
}

.signature{
    color:var(--color-key);
    font-weight:200;
    font-family: var(--font-cursive);
    font-size: var(--font-size-big);
    padding-top:var(--spacing-medium);
    padding-bottom: var(--spacing-big);
}

#team{
    opacity: 0;
    position: absolute;
    z-index: 1002;
    &, ~ #team-img{
        width: min(90vw, 600px);
        aspect-ratio: 1.5;
    
        /* margin-inline-start:var(--margin-sides);
        margin-block-start:var(--spacing-medium);
        margin-block-end:var(--spacing-large); */
        margin-inline: auto;
    
    }
}

#team:checked ~ #team-img{
    background-image: url("../photos/about/Team2.jpg"), url("../photos/about/Team2\ lowres.jpg");
    will-change: transform;
    transform: scaleX(-1);
    animation: none;
}

#team-img{
    background-color: transparent;
    background-image: url("../photos/about/Team1.jpg"), url("../photos/about/Team1 lowres.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-small);

    box-shadow: var(--box-shadow-heavy);
    border:4px solid var(--color-accent-not-white);
    
    /* transform: scale3D(1,1,1); */
    transition: 0.5s;

}

#team-img::after{ /*preload image 2*/
    background-image: url("../photos/about/Team2.jpg"), url("../photos/about/Team2\ lowres.jpg.jpg");
    content:"";
}

@media only screen and (min-width: 1080px){
    /*override background image on desktop*/
    #about{
        background-image:url('../photos/about/aboutme.jpg'), url('../photos/about/aboutme\ lowres.jpg.jpg');
        background-size: cover;
        background-position:right 0px;
        background-attachment: fixed;
        background-clip: content-box;
    }

    #team-img, #team{
        margin-inline-start: var(--margin-sides)!important;
        margin-block: var(--spacing-big);
    }
}


@media only screen and (max-width: 1080px) {

    #about{
        color: var(--color-accent-not-white);      
    
        align-items: flex-start;
        background-attachment: fixed;
        padding:0;
        position: relative;
        /* padding-bottom:5em; */

        /* background-image: none;
        background-color: #424f49; */
    }

    #about > *{
        
        margin-left:var(--margin-sides);
        width: calc(100vw - var(--margin-sides));
        display:flex;
        
    }

    #about h2{
    display: flex;
    justify-content: left;
    align-items: center;
    color: var(--color-accent-not-white)!important;
    text-shadow: var(--box-shadow-medium);

    position: absolute;
    top: 0!important;
    padding-top:0vw;
    padding-left:20vw;
    padding-left:calc(50vw - 9ch);

    /* margin-top:2em; */
    margin-left:var(--margin-sides);

    word-spacing: 100vw; /*break after each word*/

    font-size:3em;
        
    }

    #about img{
        margin-top:300px;
    }

    #team-img{
        width: calc(100vw - var(--margin-sides));
        margin-block:var(--spacing-big);
    }


    #about img, #team{
        display: flex;
        /* margin: 0!important;
        margin-inline:auto; */
        width: min(90vw, 600px);
        
        /* min-width: 90vw; */
        box-shadow:0 7px 7px #0004;
        border-radius: 1em;
        margin: var(--spacing-big) var(--spacing-medium);
        /* margin-left:var(--margin-sides); */
        margin-inline:auto;
        margin-inline-start: auto!important;
        margin-inline-end: auto!important;
        
    }

    #about p{
        display: block;
        padding-block:1vw;
        color: var(--color-accent-not-white);
        max-width: 90vw;
        min-width: 90vw;
        font-weight: light;
        margin: 0;
        margin-left:var(--margin-sides);
        overflow-wrap: break-word;
        white-space: break-spaces;
        line-height: 1.4em;
        font-weight: 200;
    }

    #about h3{
        color: var(--color-accent-not-white);
        font-weight: 400;
        text-shadow: var(--box-shadow-light);
    }

    #about p:last-child{
        padding-bottom:5em;
    }
}

@media only screen and (max-width:600px){

    #about h2{
        font-size: 2.5em;
        padding-left:10vw;
        margin-top:1.7em;
    }

    
}