.ellipse1{
    position: absolute;
    width: 600px;
    height: 600px;
    top: 500px;
    right: 900px;
    z-index: -1;
    background: var(--greenish);
    filter: blur(100px);
    opacity: 60%;
}

.heroSection{
    float: left;
    width: 1069.61px;
    padding-top: 100px;
    padding-bottom: 200px;
    .heroSectionLeft{
        width: 50%;
        float: left;
        .textHeroSection{
            width: 400px;
        }
    }
    .heroSectionRight{
        float: right;
        padding-top: 40px;
        width: 50%;
        text-align: left;
        .MeProfilBild{
            float: center;
            width: 350px;
            padding-left: 30px;
            padding-bottom: 70px;
        }
    }
}

/*tablet*/

@media only screen and (min-width: 601px) and (max-width: 1200px){
    .ellipse1{
        position: absolute;
        width: 500px;
        height: 500px;
        top: 100px;
        right: 100px;
        z-index: -1;
        background: var(--greenish);
        filter: blur(100px);
        opacity: 50%;
    }

    .heroSection{
        width: 530px;
        padding-top: 80px;
        .heroSectionLeft{
            width: 280px;
            .textHeroSection{
                width: 240px;
            }
        }
        .heroSectionRight{
            padding-top: 40px;
            width: 250px;
            text-align: left;
            .MeProfilBild{
                float: right;
                width: 190px;
                padding-left: 15px;
                padding-bottom: 90px;
            }
        }
    }
}

/*mobile */

@media only screen and (min-width: 430px) and (max-width: 600px){
    .ellipse1{
        position: absolute;
        width: 500px;
        height: 500px;
        top: 100px;
        right: 100px;
        z-index: -1;
        background: var(--greenish);
        filter: blur(100px);
        opacity: 50%;
    }

    .heroSection{
        width: 355px;
        padding-top: 80px;
        padding-bottom: 60px;
        .heroSectionLeft{
            width: 355px;
            .textHeroSection{
                width: 355px;
            }
        }
        .heroSectionRight{
            float: left;
            padding-top: 60px;
            width: 355px;
            text-align: left;
            .MeProfilBild{
                float: center;
                width: 190px;
                padding-left: 15px;
                padding-bottom: 60px;
            }
        }
    }
}

/* small mobile phones */

@media only screen and (max-width: 429px){ 
    .ellipse1{
        position: absolute;
        width: 500px;
        height: 500px;
        top: 100px;
        right: 100px;
        z-index: -1;
        background: var(--greenish);
        filter: blur(100px);
        opacity: 50%;
    }

    .heroSection{
        width: 290px;
        padding-top: 80px;
        .heroSectionLeft{
            width: 150px;
            .textHeroSection{
                width: 150px;
            }
        }
        .heroSectionRight{
            padding-top: 60px;
            width: 140px;
            text-align: left;
            .MeProfilBild{
                float: center;
                width: 120px;
                padding-left: 15px;
                padding-bottom: 40px;
            }
        }
    }
}