/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.background {
  background-image: url("LuckyDuckRich.png"); /* Replace with the path to your background image */
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center; /* Center the content horizontally */
}

.ambassador-message {
  font-size: 18px;
  color: #ffffff;
  background-color: rgba(255, 0, 0, 0.8); /* Use RGBA to set the transparency (0.8 = 80% opaque) */
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  max-width: 450px; /* Set the max-width to match the form */
  margin: auto; /* Center the message horizontally */
}


.Only-places-left-text {
  font-size: 22px; /* Make the text bold */
}

.bold-text {
  font-weight: bold; /* Make the text bold */
  text-decoration: underline; /* Add underline */
}

.coming-soon {
  max-width: 450px; /* Set the max-width of the form */
  margin: auto; /* Center the form horizontally */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  /* Add flexbox layout to center children vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coming-soon h1 {
  font-size: 36px;
  color: #333333;
}

.coming-soon .description {
  font-size: 18px;
  color: #777777;
  margin-bottom: 20px;
}

.coming-soon input {
  padding: 10px; /* Add padding to center the input field */
  width: 100%; /* Set the input field width to 100% */
  margin: 10px 0; /* Add vertical margin between the input field and button */
  border: 1px solid #cccccc;
  border-radius: 4px;
  
  /* Center the input field horizontally */
  box-sizing: border-box;
}

.coming-soon button[name="subscribe"] {
  padding: 10px 20px;
  background-color: #333333;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.coming-soon button[name="subscribe"]:hover {
  background-color: #555555;
}

.success-message {
  color: green;
  font-weight: bold;
  text-align: center;
}

.back-button {
  display: block;
  text-align: center;
  margin-top: 10px;
  text-decoration: none;
  background-color: #ff4500;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

/* Style the login button */
.coming-soon form[action="login.php"] button[name="login"] {
  background-color: #007bff; /* Blue color for login */
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  margin-right: 10px; /* Add margin to separate from the "Sign Up" button */
}

/* Style the sign-up button */
.coming-soon form[action="signup.php"] button[name="signup"] {
  background-color: #28a745; /* Green color for sign up */
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  margin-left: 10px; /* Add margin to separate from the "Login" button */
}