@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./chakra.f34dba119079.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Chakra Petch', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to left, #004293 0%, #00142D 100%);
  color: white;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Container skewed for effect */
.formContainer {
  transform: skewX(-5deg);
  background: linear-gradient(to right, #00142D, #004293);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  width: 50%;
  max-width: 500px;
  text-align: center;
}

/* Deskew the content inside */
.formContent {
  transform: skewX(5deg);
}

form {
    text-align: center;
}

/* Headings */
h1, h2 {
  text-align: center;
  color: white;
  margin-bottom: 1rem;
}

/* Labels and Paragraphs */
label {
  display: block;
  margin-bottom: 0.5rem;
  color: #f0f0f0;
}

p {
  margin-bottom: 1rem;
}

/* Inputs and Selects */
input, select {
  width: 40%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #e0e0e0;
  color: #00142D;
  font-size: 1em;
}

/* Button */
button {
  position: relative;
  width: 40%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 1.1em;
  cursor: pointer;
  background: linear-gradient(45deg, orange 0%, #AD0FA5 40%);
  overflow: hidden;
  z-index: 1;
}

button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, orange 20%, #AD0FA5 100%);
  opacity: 0;
  transition: opacity 1.9s ease;
  z-index: -1;
}

button:hover::before {
  opacity: 1;
}


/* Responsive */
@media (max-width: 600px) {
  .formContainer {
    padding: 1.5rem;
  }
  /* Inputs and Selects */
  input, select {
    width: 60%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #e0e0e0;
    color: #00142D;
    font-size: 1em;
  }
}

a {
  color: white;
  text-decoration: none;
}

altcha-widget {
  display: block ruby;
}

.errorlist {
  color: red;
  font-size: 1.5em;
  margin-top: 0.5rem;
}