body{
    background: radial-gradient(
    1200px at 30% 10%,
    #ab1ece,
    #ee953b 45%,
    #852525 100%);

    height: 100vh;              
    display: flex;
    justify-content: center;    
    align-items: center;        
    margin: 0;      
}
#form-container{
    display: flex;
    border-radius: 15px;
    box-shadow: #230339;
    justify-content: center;
    gap: 10px;
    padding: 25px;
    background: radial-gradient(
    1200px at 30% 10%,
    #ab1ece,
    #ee953b 45%,
    #852525 100%
  );
}
#myForm{
    font-size: large;
    color: white;
    flex-direction: column;
}
input{
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 15px; 
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

input:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.3);
}

input:invalid {
  border-color: black;
}
input.valid {
  border-color: green;
}
.error {
  color: red;
  font-size: 0.8em;
}
 button{
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 15px; 
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
 }
 #success {
  margin-top: 15px;
  font-size: 1rem;
  font-weight: bold;
  color: white;
}
#form-container {
  flex-direction: column;
}