:root {
  --error-clr: #f44336;
  --success-clr: #28a745;
  --success-clr: #4caf50;
}


.error-message {
  color: var(--error-clr);
  font-size: 0.7rem;
  height: 10px;
  margin: 5px 0 0 0 ;
  visibility: hidden;
}

form {
    position: relative;
  }
  form div {
    width: 100%;
    /* min-width: 300px; */
  /* width: 400px; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px 0;
}
form label {
    font-size: 15px;
}
form div input,
form div textarea {
    width: 100%;
  border-radius: 3px;
  border: 1px solid var(--clr-grey);
  outline: none;
  padding: 8px 10px;
  background-color: var(--clr-dark);
}

div textarea {
  height: 150px;
  resize: vertical;
}
.input_group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

@media screen and (prefers-color-scheme: light) {
  label {
    color: var(--clr-dark);
  }
  form div input,
  textarea {
      color: var(--clr-dark);
    border: 1px solid var(--clr-dark);
    background-color: var(--clr-light);
  }
}

@media screen and (min-width: 480px) {
  .input_group {
    flex-direction: row;
  }  
  form div {
  width: 100%;
}
}

@media screen and (min-width: 768px) {
  .input_group {
    flex-direction: column;
  }  
  form div {
  width: 250px;
}
}
@media screen and (min-width: 1024px) {
  .input_group {
    flex-direction: row;
  }  
  form div {
  width: 400px;
}
}