/* header */
header {
    width: 100%;
    height: 80vh;
    background-image: url("../data/pictures/group.jpg");
    background-position: center;
    background-size: cover;
    position: relative;

    z-index: 0;
}

.leaning-border {
    position: absolute;
    bottom: -1.2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 100vw;
    border-color: transparent transparent var(--background-main1) transparent;
    overflow: hidden;

    z-index: -1;
}

@media (max-width: 900px) {
    .leaning-border {
        border-width: 0 0 70px 100vw;
    }
}

@media (max-width: 500px) {
    .leaning-border {
        border-width: 0 0 40px 100vw;
    }
}


/*background*/

@media (max-width: 1550px) {
    header {
        height: 65vh;
    }
}

@media (max-width: 1150px) {
    header {
        height: 55vh;
    }
}

@media (max-width: 750px) {
    header {
        height: 45vh;
    }
}

@media (max-width: 500px) {
    header {
        height: 35vh;
    }
}