.pirata-one-regular {
  font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal;
}
html {
   background-color: black;
}
body {
    background-image: linear-gradient(180deg, purple,black);
}
h1  {
    text-align: center;
    font-family: 'Pirata One', verdana, sans-serif;
    padding-top: 3svh;
    font-size: 14svw;
    line-height: 10svw;
    text-transform: uppercase;
    background-image: url(../images/3boxesphoto.jpg);
    background-size: 40svw;
    background-position: 50% 20%;
    background-clip: text;
    color: transparent;
    filter: grayscale();
}
section.threeBoxes {
    margin: 6svw auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
section.threeBoxes div{
    flex: 0 0 23%;
    aspect-ratio: 1;
    box-shadow: -0.25rem .25rem 1rem;
    border-radius: 0%;
    rotate:-45deg;
    position: relative;
    overflow: hidden;
    margin: 0svw 3.3svw;
    border-radius: 2%;
}
section.threeBoxes div figure{
    background-image: url(../images/3boxesphoto.jpg);
    background-size: 330%;
    width: 145%;
    aspect-ratio: 1;
    rotate:45deg;
    position: absolute;
    filter: grayscale();
    top: -22.5%; left: -22.5%;
     
}
section.threeBoxes div:nth-child(1) figure{
    background-position: 9% 16%;
}
section.threeBoxes div:nth-child(2) figure{
    background-position: 52.5% 11%;
}
section.threeBoxes div:nth-child(3) figure{
    background-position: 88.2% 31.75%;
}

@media (width<=1600px) {
    section.threeBoxes {
    margin: 7svw auto;
    }
    section.threeBoxes div{
    flex: 0 0 30%; 
    margin: -4svw 2svw;
    }
    section.threeBoxes div:nth-child(2) figure{
        background-position: 88.2% 31.75%;
    }
    section.threeBoxes div:nth-child(3) figure{
        background-position: 52.5% 11%;
        
    }
}