@media screen and (min-width: 1366px) {
    /* portfolio piece top */
    .portfolio-piece{
        width: 480px;
    }

}
/* about me */

/* cv and fact */

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

    .header{
        width: 800px;
    }
    /* cv and fact */
    .cv-content{
        width: 100%;
        margin-bottom: 0;
    }
    .cv-and-fact-container{
        grid-template-areas:
        "cv"
        "fact";
        width: auto;
    }
    .fact-wrapper{
        width: 90%;
        margin: auto;
    }
    .recommendation-wrapper{
        width: 90%;
        margin: auto;
    }
    .fact-list{
        display: flex;
        justify-content: center;
    }
    .fact-list-items{
        grid-template-columns: 1fr 1fr;
    }
    .recommendation{
        width: 380px;
        margin: 1rem 0 4rem 0;

    }
    .other-experience-wrapper{
        width: 90%;
        margin: auto
    }
}

@media screen and (max-width: 980px ){
    /* cv download link */
    .header{
        display: block;
        width: 100%;
    }
    .header-name{
        font-size: 40px;
        padding-bottom: 0.5rem;
    }
    .downloads{
        justify-content: space-evenly;
    }
    .portfolio-downloads{
        width: 400px;
        margin: auto;
    }

    /* portfolio piece top */
    .portfolio-piece{
    width: 360px;
}
    .portfolio-piece-container{
        grid-template-areas: none;
    }

    /* about me */
    .about-me-intro{
        width: 60%;
        padding: 2rem;
        font-size: 0.8rem;
    }
    .about-me-skills{
        width: 70%;
        border-radius: 1rem;
        grid-template-areas:
            "image image"
            "adobe threeD"
            "programming other";
        gap: 0 10%;
        justify-content: center;
    }
    .about-me-image{
        margin-bottom: 1rem;
    }
    .about-me-skill-example{
        font-size: 0.8rem;
        width: 100%
    }
    .about-me-image-container{
        justify-content: center;
    }


    /* cv and facts */
    .fact-container{
        width: 100%
    }
    .fact-list-items{
        grid-template-columns: 1fr 1fr;
        font-size: 0.8rem;
    }
    .fact-wrapper{
        width: 90%;
    }
    .recommendation-wrapper{
        width: 90%;
        margin: auto;
    }
    .recommendation{
        width: 100%;
        margin: 1rem auto 4rem auto;
        padding: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .recommendation-text{
        padding: 1rem;
    }
    .recommendation button{
        margin: 1rem;
        width: 100px;
    }
    /* cv and facts */
    .cv-and-fact-container{
        display: flex;
        flex-direction: column;
    }

    /* cv*/
    .cv-content{
        width: 100%;
    }
    .cv-wrapper{
        width:100%;
    }
    .cv-section-title-role-date{
        display: block;
        align-content: center;
    }
    .cv-section-date{
        padding: 0 1rem 1rem 1rem;
    }
}



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

    .header{
        width: 100%;
    }
    .marquee-info{
        width: 60%
    }
    .contact-tooltip{
        font-size: 12px;
    }
    .portfolio-downloads{
        font-size: 12px;
        padding: 0;
        width: 100%;
        margin-top: 2rem;
        flex-direction: column;
    }
    .contact-tooltip{
        display: none;
    }
    /* portfolio piece top */
    .portfolio-piece{
        width: 240px;
        font-size: 0.8rem;
        margin:  1rem auto;
    }
    .portfolio-piece p{
        font-size: 0.8rem;
        width: 100%;
        margin: 0;
        text-align: center;
        padding: 0;
    }

    /* about me */
    .about-me-image{
        width: 200px;
        height: 200px;
    }
    .recommendation{
        flex-direction: column;
        width: 100%;
    }
    .recommendation-text{
        padding: 1rem 1rem 0 1rem;
    }

    /* CV */
    .cv-section-title-date{
        display: block;
    }

    /*  SoME links */
    .SoMe-container{
        gap: 10%;
    }
}