responsivity.css

@media(max-width: 1561px){
    #first-heroe{
        background-image: url("./2_cut_small.jpg");
    }
}

@media(max-width: 1258px){
    #first-heroe-title{
        font-size: 50pt;
    }

    #first-heroe{
        background-size: 140%;
    }
}

@media(max-width: 1143px){
    #first-heroe{
        background-size: 150%;
    }

    #first-heroe-button{
        font-size: 18px;
    }

    .part-two{
        gap: 20px;
        justify-content: space-between;
    }

    .part-two-modules{
        width: 300px;
    }

    .part-two-image{
        width: 210px;
    }

    .part-two-titles{
        font-size: 18pt;
    }

    .part-two-text{
        font-size: 16px;
    }

    #hire-banner-title{
        font-size: 28pt;
    }

    #hire-banner-text{
        font-size: 14pt;
    }

    #hire-banner-button{
        font-size: 16px;
    }

    #join-text{
        font-size: 14pt;
    }

    .join-button{
        font-size: 12pt;
    }

    #profile-pic{
        width: 180px;
    }

    #profile-title{
        font-size: 48pt;
    }

    #profile-name{
        font-size: 24pt;
    }

    #profile-button{
        font-size: 16px;
    }
}

@media(max-width: 1125px){
    #workstark-logo{
    width:165px;
    }

    #header-middle-part{
        gap: 20px;
    }

    .header-middle-text1, .header-middle-text2, .header-middle-text3,
    .header-middle-text4{
        font-size: 16px;
    }

    .header-right-button{
        font-size: 13px;
    }

    #first-heroe-title{
        font-size: 40pt;
    }

    #first-heroe-button{
        font-size: 15px;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .part-two{
        gap: 10px;
    }

    .part-two-image{
        width: 180px;
    }
    .part-two-text{
        font-size: 14px;
    }

    #hire-banner-title{
        font-size: 25pt;
    }

    #hire-banner-text{
        font-size: 12pt;
    }

    #hire-banner-button{
        font-size: 14px;
    }

    #join-title{
        font-size: 42pt;
    }

    #join-text{
        font-size: 12pt;
    }

    .join-button{
        font-size: 10pt;
    }

    .flag{
        width: 25px;
        border-radius: 3px;
    }

    #profile-pic{
        width: 180px;
    }

    #profile-title{
        font-size: 45pt;
    }

    #profile-name{
        font-size: 22pt;
    }

    #profile-button{
        font-size: 15px;
    }

    #NL-email{
        width: 30%;
    }
}

@media(max-width: 1005px){
    .part-two{
        text-align: center;
    }

    .part-two-modules{
        display: inline;
        margin: 0;
    }

    .part-two-image{
        width: 150px;
    }

    .part-two-titles:hover{
        text-decoration: underline;
    }

    .part-two-text{
        display: none;
    }
}

@media(max-width: 900px){
    #first-heroe{
        background-size: 200%;
    }

    #header{
        height: 40px;
    }

    #workstark-logo{
        width: 100px;
    }

    #header-middle-part{
        gap: 15px;
    }

    .header-middle-text1, .header-middle-text2, .header-middle-text3,
.header-middle-text4{
    font-size: 12px;
    }


    .header-right-button{
        font-size: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

}