.contain {
  display: flex;
  margin: 20px;
  justify-content: center;
  align-items: center;
 

}

.box {
  min-width: 50px; /* prevents collapsing on very small viewports */
}
img.box#box1,

#box1 img {

  
  flex: 0 0 auto;    /* don't grow or shrink */
  width: auto;       /* keep intrinsic width */
  height: 300px;     /* fixed display height */
  object-fit: contain; /* preserve aspect ratio */
  align-self: flex-start; /* align to bottom of the flex container */
  mask-image: url(Texturelabs_Grunge_232M.jpg);
  /* cross-browser mask settings -- ensure the image path is correct */
  -webkit-mask-image: url("mask.jpg");
  -webkit-mask-position: middle;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size: 98% 99%;
  mask-image: url("mask.jpg");
  mask-position: middle; ;
  mask-repeat: no-repeat;
  mask-size: 98% 99% ;
  /* use luminance if your mask is a JPG (no alpha channel) */
  mask-mode: luminance;
}

/* remove default page margin so elements can be flush to edges */

.buttons {
  background-color: transparent;
  border: none;
  padding: 0; 
  cursor: pointer;
  animation-name: ani1;
  animation-duration: var(--random-height); /* The total time for one full loop */
  animation-iteration-count: infinite; /* Makes it loop forever */
  animation-timing-function: linear; /* Ensures constant speed throughout the loop */

  

} 

/* Utility: stack multiple buttons vertically
   Usage: wrap your buttons in an element with class="btn-stack" */
.btn-stack {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: row;
}