.bg-border {
    border: black solid 0.5em;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    margin: 10em 5.5em 1.5em 4.7em;
    background: white;
}

.bg-border-front {
    z-index: -1;
    top: 0;
    /*left measurment is attempting to make hte yellow even on both side, compensating for the trnaslation of the middle*/
    /*left: -0.9em;*/
    left: 0;
    bottom: 0;
    right: 0;
}

.bg-border-middle {
    z-index: -2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    translate: 1em -1em;
}

.bg-color {
    background: #ffea00;
    z-index: -5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;

}

@media (max-width: 1300px) {
    .bg-border {
        margin: 10em 4.5em 1.5em 3.7em;
    }
}

@media (max-width: 1050px) {
    .bg-border {
        margin: 10em 3.5em 1.5em 2.7em;
    }
}

@media (max-width: 970px) {
    .bg-border {
        margin: 14em 1.7em 1.5em 0.7em;
    }
}

@media (max-width: 660px) {
    .bg-border {
        margin: 18em 1.7em 1.5em 0.7em;
    }
}