body, html {
  height: 100%;
  margin: 0;
}

.bg-image {
  /* Replace 'path_to_your_image.jpg' with your actual image path */
  background-image: url('background.png');
  height: 100%; /* Full height */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.container {
  padding: 20px;
  border-radius: 10px;
  position: absolute;
  top: 10px; /* Adjusts the distance from the top */
  left: 180px; /* Adjusts the distance from the left */
  max-width: 500px; /* Ensures the box doesn't get too wide */
}

.text-gold {
  color: #D4AF37; /* Gold color for main heading */
  font-size: 2rem; /* Adjust size of main heading */
}

.text-silver {
  color: #C0C0C0; /* Silver color for subheading */
  font-size: 1.2rem; /* Adjust size of subheading */
}

.text-white {
  color: white;
  font-size: 1.2rem;
}

.text-purple {
  color: #66023c;
  font-size: 3rem;
  font-weight: bolder;
}

@media (max-width: 768px) {
  .text-gold {
    font-size: 1.5rem; /* Smaller heading size on smaller screens */
  }

  .text-silver {
    font-size: 1rem; /* Smaller subheading size on smaller screens */
  }
}