:root {
  --rectangleHeight: clamp(calc(var(--headerHeight)/ 1.2), calc(var(--h2FontSize) * 1.5), 5000px);
  --inputFontSize: clamp(var(--defaultFontSize), calc(.5rem + 1vw), 200px);
  --formFontSize: clamp(12px, calc(5px + .6vw), 200px);
}

/*Overrides Start*/

main::after {
  content: "";
  position: absolute;
  top: calc(var(--headerHeight) * -1);
  left: 0;
  width: 100%;
  height: var(--headerHeight);
  background-color: var(--alternateBackgroundColor);
}

#mainHeader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--websiteBackgroundColor);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}

#mainHeader::after {
  background-color: var(--alternateBackgroundColor);
  opacity: 1;
}

#mainContentContainer {
  padding: 0 20%;
  box-sizing: border-box;
  margin: 25px 0 0 0;
}

#mainHeader h1 {
  transition: color 0.2s;
}

#mainHeader h1,
#mainHeader a {
  color: var(--altFontColor) !important;
}

#mainHeader a::after {
  background-color: var(--altFontColor) !important;
}

#mainNavList a:hover {
  filter: brightness(.9);
}

#mainNavList a:active {
  filter: brightness(.8);
}


#hamburgerButton::after,
#hamburgerButton::before,
#hamburgerButtonContainer::after {
  background-color: var(--altFontColor);
  transition: transform 0.2s, background-color 0.2s;
}
/*Overrides End*/

h2 {
  width: 100%;
  height: calc(var(--rectangleHeight) * 2);
  color: var(--altFontColor);
  font-size: var(--h2FontSize);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0px;
  overflow: hidden;
  z-index: 0;
}

h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--rectangleHeight);
  background-color: var(--alternateBackgroundColor);
  z-index: 1;
}

h2::before {
  content: "";
  position: absolute;
  top: calc(var(--rectangleHeight) - 1px);
  left: -2%;
  width: 110%;
  height: auto;
  background-image: url("../../images/connect/connectGraphicWave.svg");
  background-repeat: no-repeat;
  aspect-ratio: 16.57/1;
  z-index: 1;
}

h2 span {
  text-align: center;
  color: var(--altFontColor);
  position: absolute;
  z-index: 2;
  top: calc(var(--rectangleHeight) - var(--h2FontSize));
}

#connectTextContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
  position: relative;
  z-index: 2;
}

#connectTextContainer p {
  text-align: center;
  line-height: 1.5;
}

#connectTextContainer:has(a) {
  margin: 0 0 195px 0;
}

#connectTextContainer a {
  margin-top: 15px 0 0 0;
  text-decoration: underline;
  font-family: "gotu", Arial, Helvetica, sans-serif;
  font-size: calc(var(--defaultPFontSize) * 1.05);
  transition: filter 0.2s;
}

#connectTextContainer a:hover {
  filter: brightness(1.5);
}

#connectTextContainer a:active {
  filter: brightness(2);
}

/*Contact Form Start*/

#connectForm {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 60px 0 0 0;
}

#connectForm fieldset,
#connectForm label,
#connectForm input,
#connectForm textarea {
  width: 100%;
}

#connectForm label,
#connectForm legend {
  font-size: var(--formFontSize);
}

#connectForm label:not(#nameFieldset label) {
  margin: 25px 0 0 0;
}

#connectForm label span {
  color: #7197BA;
}

#connectForm input,
#connectForm textarea {
  font-size: var(--defaultFontSize);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  margin: 15px 0 0 0;
  padding: 10px 5px;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
}

#connectForm textarea {
  resize: vertical;
  height: calc(var(--inputFontSize) * 4 * 1.5);
}

#connectForm button {
  all: unset;
  margin: 15px 0 0 0;
  background-color: var(--alternateBackgroundColor);
  color: var(--altFontColor);
  cursor: pointer;
  padding: 20px 45px;
  border-radius: 5px;
  font-size: var(--formFontSize);
  transition: filter 0.2s;
}

#connectForm button:hover,
#connectForm button:focus-visible {
  filter: brightness(.9);
}

#connectForm button:active {
  filter: brightness(.8);
}

#connectForm button:focus-visible {
  outline: var(--focusColor) var(--focusSize) solid;
  outline-offset: var(--focusOffset);
}

#nameFieldset {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
}

#nameFieldset label {
  margin: 15px 0 0 0;
}

#otherInput {
  position: absolute;
  left: -200vw;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*Contact Form End*/

  @media (max-width: 1100px) {
    /*Overrides Start*/
      #mainContentContainer {
        margin: 15px 0 0 0;
      }
    /*Overrides End*/
  } 

  @media (max-width: 950px) {
    :root {
      --rectangleHeight: clamp(50px, calc(var(--h2FontSize) * 1.5), 5000px);
    }

    /*Overrides Start*/
    #mainHeader:has(.navOpacity)::before {
      opacity: 1;
    }

    #mainHeader:has(.navOpacity) h1 {
      color: var(--fontColor) !important;
    }

    #mainHeader:has(.navOpacity) #hamburgerButton::after,
    #mainHeader:has(.navOpacity) #hamburgerButton::before,
    #mainHeader:has(.navOpacity) #hamburgerButtonContainer::after {
      background-color: var(--fontColor) !important;
    }

    #mainHeader a {
      color: var(--fontColor) !important;
    }

    #mainContentContainer {
      padding: 0 15%;
    }
    /*Overrides End*/

    h2 span {
      top: calc(var(--rectangleHeight) - var(--h2FontSize) - .7em);
    }
    
    #connectTextContainer a {
      margin: 10px 0 0 0;
    }

    #connectTextContainer:has(a) {
      margin: 0;
    }

    /*Mobile Contact Form Start*/

    #connectForm {
      margin: 30px 0 0 0;
    }

    #connectForm label,
    #connectForm legend {
      font-size: var(--formFontSize);
      font-weight: 700;
    }

    #connectForm label:not(#nameFieldset label) {
      margin: 15px 0 0 0;
    }

    #connectForm label span {
      color: #7197BA;
      font-weight: 400;
    }

    #connectForm input,
    #connectForm textarea {
      font-weight: 400;
      border-radius: 0px;
      margin: 5px 0 0 0;
    }

    #nameFieldset {
      align-items: flex-end;
      gap: 5px;
    }

    #nameFieldset label {
      margin: 10px 0 0 0;
    }

    /*Mobile Contact Form End*/
  }

  @media (max-width: 450px) {
    /*Overrides Start*/
      #mainContentContainer {
        margin: 0 0 0 0;
      }
    /*Overrides End*/

    #nameFieldset label span {
      display: block;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #connectForm button {
      transition: filter 0.2s linear;
    }
  }

  @media (prefers-reduced-motion: reduce) AND (max-width: 950px) {
    /*Overrides Start*/
    #mainHeader:has(.navOpacity)::before {
      opacity: 0;
      transition: none;
    }

    #mainHeader:has(.navOpacity) h1 {
      color: var(--altFontColor) !important;
    }

    #mainHeader:has(.navOpacity) #hamburgerButton::after,
    #mainHeader:has(.navOpacity) #hamburgerButton::before,
    #mainHeader:has(.navOpacity) #hamburgerButtonContainer::after {
      background-color: var(--altFontColor) !important;
    }
    /*Overrides End*/
  }

  @media (prefers-reduced-motion: reduce) {
    /*Overrides Start*/
    #mainHeader::before {
      transition: opacity 0.2s linear;
    }

    #mainHeader h1 {
      transition: color none;
    }

    #hamburgerButton::after,
    #hamburgerButton::before,
    #hamburgerButtonContainer::after {
      transition: transform 0.001s linear, background-color 0.2s none;
    }
    /*Overrides End*/

    #connectTextContainer a {
      transition: none;
    }
  }