body {
    background-color: white;
    color: black;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 1.5rem;
    --n: 500;
}
  
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  
h1 {
    display: block; /*should this be block or flex? Check desktop/mobile view*/
    font-size: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    text-align: center;
}
  
h2 {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    --n: 500;
    font-size: 2rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
}
  
img {
    max-width: 90%;
    height: auto;
    margin-bottom: 2rem;
    display: block;
    margin: 0 auto;
}
  
button {
    background-color: transparent;
    color: black;
    border: 4px solid black;
    border-radius: 50px;
    padding: 1rem 5rem;
    font-size: 2rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 525;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block;
    margin: 0 auto;
}
  
button:hover {
    background-color: #5370FF;
    border: 4px #5370FF;
    color: white;
}
  
fieldset {
    text-align: left;
    border: none;
    margin-right: 0px;
    margin-left: 25px;
    display: inline-block;
}
  
label {
    text-align: center;
}
  
#question {
    text-align: center;
    padding-bottom: 10px;
}
  
#questionContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
  
#results {
    text-align: center;
    color: #5271FF;
    margin-top: 1 rem;
    margin-bottom: 1rem;
}
  
#boltcontainer {
    display: block;
    margin: 0 auto;
}
  
input {
    text-align: justify;
    padding-bottom: 5px;
    position: absolute;
    margin: 10px 0px 10px -30px;
    transform: scale(1.5);
}
  
select {
    background-color: white;
    color: black;
    font-family: Nunito, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
}
  
textarea {
    font-size: 30px;
    background-color: white;
    color: black;
    font-family: Nunito, sans-serif;
    font-weight: bold;
    width: 326px;
    height: 194px;
    border-color: #536fff;
    border-radius: 20px;
    border-width: 3px;
}
  
.writeInResponse {
    font-size: 16px;
    background-color: white;
    color: black;
    font-family: Nunito, sans-serif;
    font-weight: bold;
    width: 138px;
    height: 15px;
    border-color: #536fff;
    border-radius: 20px;
    border-width: 3px;
    margin-left: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    position: relative;
}
  
.type {
    color: #0000;
    background:
      linear-gradient(90deg, white 0px, #0000 0) 10px 0,
      linear-gradient(#000000 0 0) 0 0;
    background-size: calc(var(--n) * 1ch) 200%;
    -webkit-background-clip: padding-box, text;
    background-clip: padding-box, text;
    background-repeat: no-repeat;
    animation:
      b .5s infinite steps(1),  
      t calc(var(--n) * .02s) steps(var(--n)) forwards;
}
  
@keyframes t {
    from { background-size: 0 200% }
}
  
@keyframes b {
    50% { background-position: 0 -100%, 0 0 }
}


/* ... Existing Styles ... */

/* Stripe Card Element */
/* #card-element {
  background-color: white;
  color: black;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  border: 3px solid #536fff;
  border-radius: 20px;
  padding: 1rem;
  margin-bottom: 2rem;
  width: 500px;
} */


/* ... Existing Styles ... */

/* Container for Stripe Card Element */
#payment {
  text-align: center;
}

/* Stripe Card Element */
#card-number-element, #card-expiry-element, #card-cvc-element, #postal-code-element {
  background-color: white;
  color: black;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  border: 3px solid #536fff;
  border-radius: 20px;
  padding: 1rem;
  margin: 0 auto;  /* Center horizontally */
  max-width: 400px;  /* Or any width that you desire */
  width: 85%;  /* Takes full width up to the max-width */
  display: block;  /* To work with margin: 0 auto; */
  margin-bottom: 24px;
}

/* ... Existing Styles ... */





/* Stripe Submit Payment Button */
#submit-payment {
  background-color: transparent;
  color: black;
  border: 4px solid black;
  border-radius: 50px;
  padding: 1rem 5rem;
  font-size: 2rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 525;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: block;
  margin: 0 auto;
}

#submit-payment:hover {
  background-color: #5370FF;
  border: 4px solid #5370FF;
  color: white;
}

p {
  text-align: center;
}

p2 {
  text-align: center;
  font-size: 1rem;
}

p3 {
  font-size: 1rem;
}

form {
    text-align: center;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: #f1f1f1; 
}
.footer-links {
  font-size: 12px;
}
.footer-links a {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
}


textarea[name="phoneNumber"][type="tel"][maxlength="10"] {
  font-size: 30px;
  background-color: white;
  color: black;
  font-family: Nunito, sans-serif;
  font-weight: bold;
  width: 300px;
  height: 45px;
  border-color: #536fff;
  border-radius: 20px;
  border-width: 3px;
}

textarea[name="emailAddress"][type="email"] {
  font-size: 25px;
  background-color: white;
  color: black;
  font-family: Nunito, sans-serif;
  font-weight: bold;
  width: 326px;
  height: 75px;
  border-color: #536fff;
  border-radius: 20px;
  border-width: 3px;
}

textarea[name="zip"][maxlength="5"] {
  font-size: 30px;
  background-color: white;
  color: black;
  font-family: Nunito, sans-serif;
  font-weight: bold;
  width: 300px;
  height: 45px;
  border-color: #536fff;
  border-radius: 20px;
  border-width: 3px;
}