.backgroundLines {
  position: absolute;
  top: 0;
  width: auto;
  height: 78rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

h1 {
  font-size: 4rem;
}

.mSpacer {
  height: .5rem;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* ----- Form ----- */

.contactWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contactFrame {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 66rem;
  min-width: 13.5rem;
}

.contactBodyWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contactBody{
  display: flex;
  flex-direction: column;
  height: 27rem;
  width: 100%;
  z-index: 2;
}

.contactContentWrapper {
  display: flex;
  height: 100%;
  padding: 1rem;
}

.contactContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 1rem;
}

.contactContent form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 1rem;
  text-align: left;
  
}

/* baseline */
.contactContent form > div { 
  flex: 0 0 auto;
}

/* make the message block grow (your 3rd div inside the form) */
.contactContent form > div:nth-of-type(3) {
  flex: 1 1 auto;
  display: flex;
}

/* allow label to stretch and give textarea a flex context */
.contactContent form > div:nth-of-type(3) > label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical for flex children to shrink/grow properly */
}

/* textarea fills remaining space under the <p> */
.contactContent textarea {
  flex: 1 1 auto;
  min-height: 0; /* critical */
  resize: none;
}

.contactContent input,
.contactContent textarea {
  width: 100%;
  background-color: #202020;
  border: 1.5px solid #232323;
  color: #ffffff;
  box-sizing: border-box;
}

.buttonOuter {
  margin-top: auto; /* this pushes it to the bottom */
}