@import url("colors.css");

/* Add a background color and some padding around the form */
.contact-form {
  border-radius: 10px;
  background-color: var(--pri);
  padding: 25px;
  margin-bottom: 30px;
  border: 4px solid var(--priAcc);
  box-shadow: 0 6px 20px var(--shadow1); /* Softer, more pronounced shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */

}

.contact-form:hover{
 transform: translateY(-5px);
  box-shadow: 0 12px 35px  var(--shadow2); /* Enhanced shadow on hover */
}

.submit {
  justify-items: center !important;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4dc69a;
  color: var(--text1);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px;
  box-shadow: 0 6px 20px  var(--shadow1);
    border: 2px solid var(--priAcc);

}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #1a7c58;
  color: white;
  box-shadow: 0 6px 20px  var(--shadow2);

}

/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=email], select, textarea {
  width: 100%;
  padding: 3px; /* Some padding */ 
  border: 2px solid var(--priAcc);
  border-radius: 10px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

.email-prompt {
  background-color: var(--bkg);
  border: 2px solid var(--priAcc);
  border-radius: 10px;
}

/* .contact {
  border-bottom: 2px solid #394648;
  padding: 20px;
} */