html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("/assets/landing/bg.png");
  background-repeat: repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  scroll-behavior: smooth;
}

html {
    background-color: #272239;
    color: white;
}

/* Ensure the image container takes full width */
img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.pixelated-image {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }

.landing-container {
    position: relative;
    text-align: center;
}

.landing-text {
    background-color: #2C2B2B;
    color: white;
    border: 10px solid #FFE6FF;
    border-radius: 17px;
    padding: 32px 48px;
    text-align: center;
    margin: 20px auto;
    display: inline-block;
    
}


.landing-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.landing-text.title {
    font-size: 120px;
    transform: rotate(-2deg)

} 

.landing-text.subtitle {
    padding: 24px 32px;
    
}

@keyframes bobble {
    0%, 100% {
      transform: translateY(0); 
    }
    50% {
      transform: translateY(-10px); 
    }
  }
  
  .animate-bobble {
    animation: bobble 1.5s infinite; 
  }