.navbar{
    margin-bottom: 5%;
}

.heroSection{
    float: left;
    width: 1069px;
    padding-bottom: 20%;
    .titleImpressum{
        display: flex;
        justify-content: center;
    }
}



/*tablet*/

@media only screen and (min-width: 601px) and (max-width: 1200px){
    .heroSection{
        width: 530px;
    }
}

/*mobile */

@media only screen and (min-width: 430px) and (max-width: 600px){
    .heroSection{
        width: 355px;
    }
}

/* small mobile phones */

@media only screen and (max-width: 429px){ 
    .navbar{
        margin-bottom: 30%;
    }
    .heroSection{
        width: 290px;
        height: 10%;
        padding-bottom: 70%;
    }
}