#contact {
  --input-height: 2.4rem;
  --border-color: var(--gray-4);

  display: grid;
  grid-template-columns: 1fr 1fr;

  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }
 
  & [contact_input-wrap] {
    filter: drop-shadow(-1px 0 0 var(--border-color)) 
            drop-shadow(1px 0 0 var(--border-color))
            drop-shadow(0 -1px 0 var(--border-color))
            drop-shadow(0 1px 0 var(--border-color));

    &:has(#contact_body) {
      grid-column: 1 / -1;
    }
  }

  & input, textarea {
    box-sizing: border-box;
    padding: .2rem .4rem;
    
    width: 100%;
    height: var(--input-height);

    background-color: #fff;

    &:autofill, option {
      box-shadow: inset 0 0 0 99px white;
    }

    &::placeholder {
      color: transparent;
    }

    & + label {
      position: absolute;
      left: calc(anchor(left) + 1px);
      pointer-events: none;

      text-wrap: nowrap;
      place-content: center;

      padding: .2rem .4rem;
      height: var(--input-height);

      color: var(--gray-6);
      font-family: 'Century Gothic';     

      user-select: none;

      transition: transform 160ms linear;
    }
  }

  & div:focus-within > label, 
  & input:not(:placeholder-shown) + label, 
  & textarea:not(:placeholder-shown) + label {
    transform: translateY(-17px) translateX(-1px);
    background-color: #fff;
    border-color: var(--gray-3);
    height: 18px;
    font-size: .8rem;
  }

  #contact_first-name {
    anchor-name: --contact_first-name;
    
    & + label {
      position-anchor: --contact_first-name;
    }
  }

  #contact_last-name {
    anchor-name: --contact_last-name;
    
    & + label {
      position-anchor: --contact_last-name;
    }
  }

  #contact_email {
    anchor-name: --contact_email;
    
    & + label {
      position-anchor: --contact_email;
    }
  }

  #contact_subject {
    anchor-name: --contact_subject;
    
    & + label {
      position-anchor: --contact_subject;
    }
  }

  #contact_body {
    anchor-name: --contact_body;

    height: 20ch;
    text-align: start;
    
    & + label {
      position-anchor: --contact_body;
    }
  }

  & button {
    display: block;
    padding: 1rem;
    background-color: #000;
    color: #fff;
    margin-inline: auto;
    cursor: pointer;

    grid-column: 1 / -1;
    min-width: 20ch;
    text-align: center;
  }
}

#contact:not([state='received']) {
  #contact_received {
    display: none;
  }
}

#contact[state='received'] {
  & [contact_input-wrap], & > button {
    display: none;
  }
}