body {
    background-image: linear-gradient(to top right, rgba(255, 105, 180, 0.788), purple);
    filter: contrast(120%) saturate(150%);
}


h1 {  /*I'm having issues getting the picture to fit inthe text without cutting off the edges of the image. The below was the best I could get it.*/
    text-align: center;
    font-family: 'Permanent Marker','arial black', verdana, sans-serif;
    font-size: 18vw;
    line-height: 13vw;
    text-transform: uppercase;
    background-image: url(../images/three_people.jpg);
    background-size: 70%;
    /* background-position: 45% 8%; */
    background-position: center;
    background-clip: text;
    background-repeat: no-repeat;
    color: transparent;
    padding: 8px 10px 8px 10px;
}

section.three_boxes {
    margin: 150px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}


section.three_boxes div {
    flex: 0 0 18%;
    aspect-ratio: 1;
    border: 8px solid rgba(0, 0, 0, 0.795);
    border-radius: 8%;
    /* background-image: url(../images/three_people.jpg);
    background-size: 275%; */
    background-repeat: no-repeat;
    transform: rotate(-45deg);
    position: relative;
    overflow:hidden;
    box-shadow: 5px 5px 15px darkmagenta;
}

section.three_boxes div figure {
    background-image: url(../images/three_people.jpg);
    background-size: 300%;
    width: 150%; 
    aspect-ratio: 1;
    transform: rotate(45deg);
    position: absolute;
    top: -24.5%; left: -38%;

}

section.three_boxes div:nth-child(1) figure {
    background-position: 10% 10%;
}

section.three_boxes div:nth-child(2) figure {
    background-position: 53% 15%;
}

section.three_boxes div:nth-child(3) figure {
    background-position: 99% 0%;
}