/* CONTACT CSS STYLESHEET */

/* HEADER */
.main-header{
  height: auto;
}

.heroImg {
  display: none;
}

/* FORM */

input, .segment, textarea, button {
    /*font-family: 'Roboto Mono', monospace;*/
    font-size: 16px;
}

.main{
    background-color: #000000;
}

form {
    padding: 16px;
    width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 80vh;
    justify-content: space-evenly;
}

form h1 {
    text-align: center;
    margin: 20px;
}

form input, textarea {
  border: 0;
  outline: 0;
  font-size: 16px;
  border-radius: 24px;
  padding: 12px 24px;
  background-color:#f3f4f7;
  text-shadow: 1px 1px 0 #FFF;
  color: black;
}

form label {
  display: block;
  margin-bottom: 24px;
  width: 100%;
}

form input, textarea {
  margin-right: 8px;
  box-shadow:  inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
  width: 100%;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}

form input:focus {
    box-shadow:  inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}

form textarea {
    resize: none;
    padding-top: 20px;
}

/*form button {
  font-weight: bold;
  box-shadow: -3px -3px 10px rgb(241, 240, 240),  5px 5px 15px #BABECC;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
} 

form button:hover {
    box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
  
form button:active {
    box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
  
form button {
    border-radius: 16px;
    line-height: 0;
    width: 200px;
    height: 40px;
    display:flex;
    justify-content: center;
    align-items:center;
    margin: 0 auto;
    font-size: 20px;
  
  }