.contact-main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: left;
  justify-content: space-evenly;
  margin-bottom: 10rem;
  margin-top: -2rem;
}

h1 {
  font-size: 2rem;
  /* margin-top: 0rem; */
}

.contact-form-text-section {
  padding-bottom: 0.5rem;
}


input[type=text], select, textarea {
  width: 100%; 
  padding: 12px;  
  border: none;
  border-radius: 1ch; 
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical;
  background-color: var(--background);
  font-family: "Arial Rounded MT Bold";
  box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light);
}

input[type=text], ::placeholder {
  color: var(--foreground);
  opacity: 1;
}

input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  /* border: 1px solid #ccc;  */
  border: none;
  border-radius: 1ch; /* 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) */
  background-color: var(--background);
  font-family: "Arial Rounded MT Bold";
  box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light);
}

input[type=email], ::placeholder {
  color: var(--foreground);
  opacity: 1;
}

input[type=message], select, textarea {
  width: 100%; 
  height: 15em;/* Full width */
  padding: 12px; /* Some padding */ 
  /* border: 1px solid #ccc;  */
  border: none;
  color: var(--foreground);
  border-radius: 1ch; /* 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) */
  background-color: var(--background);
  font-family: "Arial Rounded MT Bold";
  box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light);
}

input[type=message], ::placeholder {
  color: var(--foreground);
  opacity: 1;
}

input[type=text]:-webkit-autofill,
input[type=email]:-webkit-autofill,
input[type=message]:-webkit-autofill,
textarea:-webkit-autofill {
    background-color: var(--background) !important; /* Use your custom background color */
    color: var(--foreground) !important; /* Use your custom text color */
    box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light) !important; /* Match your shadow */
    transition: background-color 5000s ease-in-out 0s; /* Prevent autofill from overriding your styles */
}

#contact-submit-button {
  background-color: var(--background);
  color: var(--foreground);
  border: none;
  border-radius: 1.5ch;
  width: 5rem;
  height: 3rem;
  cursor: pointer;
  font-family: "Arial Rounded MT Bold";
  box-shadow: 5px 5px 5px var(--shadow), -5px -5px 10px var(--light);
}

#contact-submit-button:hover {
  opacity: 50%;
  transition: 300ms;
}

#contact-submit-button:active {
  box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light);
  transition: 300ms;
}

#contact-submit-button:focus {
  box-shadow: inset 5px 5px 5px var(--shadow), inset -5px -5px 10px var(--light);
}

.contact-container {
  line-height: 2em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;

}

input[type="radio"]{
  display: none;
}




@media only screen and (max-width: 425px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 17px;
  }

  #contact-submit-button {
    font-size: 17px;
  }

}

@media only screen and (min-width: 426px) and (max-width: 666px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 17px;
  }

  #contact-submit-button {
    font-size: 17px;
  }
}

@media only screen and (min-width: 667px) and (max-width: 768px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 17px;
  }

  #contact-submit-button {
    font-size: 15px;
  }

}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea{
      font-size: 15px;
  }

  #contact-submit-button {
    font-size: 15px;
  }

}

@media only screen and (min-width: 1025px) and (max-width: 1439px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 18px;
  }

  #contact-submit-button {
    font-size: 15px;
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1800px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 18px;
  }

  #contact-submit-button {
    font-size: 16px;
  }
}

@media only screen and (min-width: 1801px) {
  input[type=email], select, textarea,
  input[type=text], select, textarea {
      font-size: 22px;
  }

  #contact-submit-button {
    font-size: 16px;
    width: 6rem;
    height: 4rem;
  }
}