:root {
 
   --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  }




body {
    background-image:  linear-gradient(#f5f3de, #edf1f7, #fff, #e1e5eb, #acbfc6, #f5e4b0, #fff);
     background-size:  cover;
    background-repeat:  no-repeat;
    background-size:  400% 300%; 
    background-blend-mode: screen;
    animation: shiftGradient 50s ease-in-out infinite, glow 25s ease-in-out infinite;
    
    
    min-height: 100vh;

    
    font-family: var(--font-family-mono);
    font-size: .75rem;
				color:#fffff;
				
      
     letter-spacing: 2.4px;
  
    
    
    

}
@keyframes shiftGradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
@keyframes glow {
  0%, 100% { filter: brightness(1);filter: blur(0px) }
  50% { filter: brightness(1.6);filter: blur(.6px); }
}
a {
  color: #8a8a8a;
  font-size: 0.6rem;
  letter-spacing:0px;
  text-decoration: none;
  cursor: pointer;
}

.leaves {
   
    background-size:  200%; 
    height: 100vw;
    width: 100vw;
    left: 0;
    opacity: 0.07; 
    background-repeat: repeat;
    background-size: auto; 
    background-position: left bottom; 
    position: fixed;
    z-index: -1;
}

.leaf-container {
  position: absolute;
  mix-blend-mode: screen;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
}

.leaf-container img {
  width: 57%;
  height: 57%;
  transform: scale(3.5); /* Zooms in by 1.5x, adjust the value (e.g., 1.2, 2.0) as desired */
  transform-origin: center;
  object-fit: contain;
  animation: glow 25s ease-in-out infinite;
}

}

img {
width:100%;}

.img-caption 
{padding-top:1em;
color: #8a8a8a;}



.layout {

margin: 0 auto;
max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;  
  
  text-align: center;
 
 
}

.layout img{
max-width:150px;
}


.layout-column {
  flex: 1 1 100%;
    min-width: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  
}


.block-type-buy-button {
font-family: var(--font-family-mono);
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

#product-component-presale {
  display: inline-block;
}

#product-component-presale .shopify-buy__product {
  display: inline-block;
  margin: 0;
  padding: 0;
}

#product-component-presale .shopify-buy__btn {
  
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  display: inline-block;
}
  
@media screen and (max-width: 800px) {
  .catlayout {
    flex-direction: column; /* Stack columns vertically */
    justify-content: center; /* Center the column stack */
  }
  .catlayout-column {
    flex: 1 1 100%; /* Full width in single column */
    min-width: 0; /* Override min-width for stacking */
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center the column contents */
  }
  .catlayout-column .block-type-image {
    text-align: center; /* Center the image in the stacked layout */
    padding-bottom: 1em; /* Add space below image */
    flex: 0 0 auto; /* Prevent stretching */
  }
  .catlayout-column .block-type-text {
    text-align: left; /* Keep text left-aligned in the stacked layout */
    padding-left: 0; /* Remove left padding in stacked layout */
    padding-top: 0; /* Remove top padding in stacked layout */
    flex: 1; /* Allow text to fill the space */
  }
}

@media screen and (min-width: 60rem) {
  body {
    --padding: 1rem;
  }

  

}


/* Responsive adjustments */
@media (max-width: 600px) {
  .infinity-art {
    font-size: 10px; /* Smaller on mobile */
  }
  @keyframes float {
    100% {
      transform: translateX(110%) translateY(10px) scale(0.8); /* Adjust for mobile */
    }
  }
}

.box {
  margin: 2rem auto 0; 
 max-width:500px;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.4); 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 10px; 
    backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
    text-align: center;
  color: #333; 
  box-shadow: 0 .3px 0 rgba(0, 0, 0, 0.1); 
  }