.contact {
  --color--error--border: #900;
  --color--error--bg: #fee;
}

/* No tailwind directives here, just regular CSS */

#nav-toggle.active #nav-toggle--bars {
  display: none;
}
#nav-toggle--times {
  display: none;
}
#nav-toggle.active #nav-toggle--times {
  display: inline;
}

/*#mobile-nav {*/
/*    height: 1px;*/
/*    overflow: hidden;*/
/*}*/

/*#mobile-nav.active {*/
/*    height: auto;*/
/*}*/

/* Scroll Animation Styles */
.scroll-animation-hidden {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.scroll-animation-visible {
  opacity: 1;
}

/* Contact form extras */

.contact .messages {
  margin: 1em 0;
  background: #efe;
  border: 1px solid #090;
  padding: 0.5em;
}

.contact .errors {
  margin: 1em 0;
  background: #fee;
  border: 1px solid #900;
  padding: 0.5em;
}

.contact .errors li {
  font-weight: bold;
}

.contact form .form_field.form_field--error {
  border: 1px solid var(--color--error--border);
  background: var(--color--error--bg);
  padding: 0.5em;
}