* {
    margin: 0; padding: 0; box-sizing: 0;
}

body{
    background-color: #8fc6f6;
}

.ripple {
    border-radius: 50%;
    margin: 3% 15%;
    box-shadow: 0 -6px 0 rgb(255, 174, 0),
     0 -12px 0 #8fc6f6, 0 -16px 0 rgb(255, 200, 0),
     0 -22px 0 #8fc6f6, 0 -24px 0 rgb(255, 238, 0),
     0 -30px 0 #8fc6f6, 0 -31px 0 rgb(255, 255, 0);
}


h1 {
    text-align: center;
    font-family: "Badeen Display", system-ui, 'arial black', verdana, sans-serif;
    font-size: 14svw;
    line-height: 10.2svw;
    font-weight: 200;
    font-style: normal;
    text-transform: uppercase;
    padding-bottom: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(0, 255, 123), blue);
    box-shadow: 0 6px 0 rgb(230, 0, 255),
     0 12px 0 #8fc6f6, 0 16px 0 rgb(255, 0, 195),
     0 22px 0 #8fc6f6, 0 24px 0 rgb(255, 0, 144),
     0 30px 0 #8fc6f6, 0 31px 0 rgb(255, 0, 60);
     
}

h1 span{
display: inline-block;
filter: hue-rotate(120deg);
background-image: url(../images/river_people.jpg);
/*background-image: url(../images/lego.jpg);*/
/*background-image: url(../images/western.jpg);*/
background-size: 150%;
background-position: 50% 24%;
background-clip: text;
color: transparent;
-webkit-text-stroke: 2px  rgb(124, 255, 23);
}  

.container{
     border: 4px solid transparent;
    justify-content: center;
    display: flex;
    margin-bottom: 15px;
}

a {
    margin-top: 10%;
    display: inline-block;
   text-align: center; 
   color: black;
   font-family: "Bowlby One SC", sans-serif;
   padding: 7px;
   letter-spacing: .1svw;
   background-color:  rgb(255, 174, 0);
   flex-grow: 0;
   border: 8px groove rgb(214, 147, 0);
   border-radius: 50px;
   transition: color 300ms linear;
   text-decoration: none;
}

h3 {
    display: block;
   text-align: center; 
   font-family: "Bowlby One SC", sans-serif;
    font-weight: 400;
    font-size: 2svw;
    font-style: normal;
    margin: 0 auto;
   margin-bottom: 80px;
   margin-top: 60px;
   color: rgb(230, 0, 255);
   background: rgb(255, 174, 0);
}

a:hover {
    color:rgb(230, 0, 255);
}

a:active {
    background-color: rgb(204, 139, 0);
}

.three_boxes {
    border: 2px transparent;
    display: flex;
    margin: 2%;
    border-radius: 10%;
    flex: 0;
    flex-flow: row wrap;
    justify-content: space-evenly;
    padding: 10;
    box-shadow: 0 2px 0 rgb(0, 255, 123),
    0 8px 0 #8fc6f6, 0 12px 0 rgb(0, 255, 183),
    0 18px 0 #8fc6f6, 0 22px 0 rgb(0, 255, 195),
    0 28px 0 #8fc6f6, 0 34px 0 aqua;
    margin-bottom: 80px;
}


.three_boxes div{
    border: 4px solid rgb(255, 154, 23);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%; /*I modified this to make them overlap a bit, i thought it looked better*/
    aspect-ratio: 1;
    background-color: ghostwhite;
    border-radius: 0%;
    transform: rotate(-45deg);
    background-position: 48% 36%;
    position: relative;
    overflow: hidden;
    
}




.three_boxes div figure {
    background-image: url(../images/river_people.jpg);
    background-size: 500%;
    background-position: 48% 36%;
    width: 150%;
    position: absolute;
    aspect-ratio: 1;
    left: -25%; top: -25%;
    margin: 0;
    rotate: 45deg;
}

.three_boxes div:nth-child(1) figure
{
    background-size: 520%;
    background-position: 29% 36.35%;
    filter: hue-rotate(-120deg);
    transition: all 300ms linear;
}

.three_boxes div:nth-child(1) figure:hover {
    filter: hue-rotate(0deg);
    background-size: 560%; 
} 

.three_boxes div:nth-child(2) figure
{
    background-size: 500%;
    background-position: 47% 34%;
    filter: hue-rotate(-60deg);
    transition: all 300ms linear;
}
 
.three_boxes div:nth-child(2) figure:hover {
    filter: hue-rotate(0deg);
    background-size: 560%;
} 

.three_boxes div:nth-child(3) figure
{
    background-size: 500%;
    background-position: 70% 35%;
    filter: hue-rotate(60deg);
    transition: all 300ms linear;
}

.three_boxes div:nth-child(3) figure:hover {
    filter: hue-rotate(0deg);
    background-size: 560%;
    
} 

.three_boxes div p{
    position: absolute;
    rotate: 45deg;
    background-color: #eee;
    padding-left: 62px;
    padding-right: 3px;
    max-height: 28px;
    font-family: "Bowlby One SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    top: 6%; left: 6%; 
}