@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

#contactForm
{
  font: 1rem "Work Sans", sans-serif;



  #contactFormGrid
  {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;

    label
    {
      padding-top: 0.5rem;
    }

    input, textarea
    {
      padding: 0.5rem;
      border-radius: 0.5rem;
    }

    #contactFormLocationField
    {
      min-height: 3rem;
    }

    #contactFormMessageField
    {
      min-height: 8rem;
    }
  }

  #contactFormFooter
  {
    margin-top: 2rem;

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

    #submitButton
    {
      background-color: #666666;
      color: white;
      text-decoration: none;
      border-radius: 0.5rem;
      padding: 0.5rem;
      font: 1.2rem "Work Sans", sans-serif;
      transition-duration: 0.2s;

      cursor: pointer;
    }

    #submitButton:hover
    {
      background-color: #888888;
    }
  }
}

#contactFormNotes
{
  font: 1rem "Work Sans", sans-serif;
}