* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
  background-color: #fffff;
  background-image: url('homiesexuals-summermeetup-2025-lowres.png');
  background-size: 100% auto; /* Ensure image scales with width */
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start; /* Align items to the top */
  align-items: flex-start;     /* Align items to the top */
  text-align: center;
  overflow: hidden;
  flex-direction: column;      /* Allow vertical alignment */
}

body {
  min-height: 100vh;
}

.center-text {
  font-size: clamp(2rem, 8vw, 5rem); /* Responsive text size */
  font-weight: bold;
  background: linear-gradient(125deg, red, orange, yellow, green, blue, indigo, red);
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 5s infinite linear;
  margin-top: 2rem; /* Add space from the top */
  width: 100%;      /* Ensure text spans the width */
}

/* Animation for the moving rainbow effect */
@keyframes rainbow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

/* Media query to handle very narrow screens */
@media (max-width: 600px) {
  .center-text {
    font-size: clamp(1.5rem, 6vw, 4rem); /* Smaller text for small screens */
  }
}