*{
    margin:0; padding: 0;
}
body{
    background-color: aliceblue;
}
h1 {
   
    font-size: 11svw;
    font-family:  "Black Ops One";
    font-weight: bold;
    text-align: center;

   
    background-image:url(../images/3mando.jpg);

    background-size: 85%;
    background-position:30% 20%;
    background-clip:text;
    color:transparent;
    line-height: 8.9svw;
    text-transform: uppercase;
   
    
}
.triple{
    margin: 150px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    
}

.triple div{
    flex-grow: 0;
   flex: 0 0 20%;
   justify-content: space-evenly;
   aspect-ratio: 1;
   border: 8px solid blue;
   border-radius: 0%;
  position: relative;
   transform: rotate(-45deg);
   overflow: hidden;
}
.triple div figure{
     background-image: url(../images/3mando.jpg);
   background-size: 300%;
   width:145%;
   aspect-ratio: 1;
   transform: rotate(45deg);
   position:absolute;
   top:-23%; left:-23%;
}
.triple div:hover{
    transform: scale(1.5);
     filter: grayscale();
     
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
     rotate: -45deg;
     
}
.hovertext:hover {
  opacity: 1;
}
.fruktur-regular {
  font-family: "Fruktur", system-ui;
  font-weight: 400;
  font-style: normal;
}

.fruktur-regular-italic {
  font-family: "Fruktur", system-ui;
  font-weight: 400;
  font-style: italic;
}

.triple div:nth-child(1) figure{
    background-position: 7% 25%;
    transform: scalex(-1);
    rotate:45deg;
}
.triple div:nth-child(2) figure{
    background-position: 55% 30%;
}
.triple div:nth-child(3) figure{
    background-position: 100% 30%;
    
}
.black-ops-one-regular {
  font-family: "Black Ops One", system-ui;
  font-weight: 400;
  font-style: normal;
}