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

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

  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-column-gap: 2rem;
}

#contactMap
{
  width: 100%;
}

#contactMapInfo
{
  font: 0.8rem "Work Sans", sans-serif;
}

#contactDetailsContainer
{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  /*grid-gap: 0.5rem;*/
  height: min-content;

  margin-top: 4rem;

  p
  {
    margin: 0;
  }

  .contactDetailLabel
  {
    /*background-color: #b3d4fc;*/
    display: flex;
    flex-direction: row;
    align-items: center;

    font-weight: bold;
  }

  #contactDetailAddressLabel
  {
    align-items: flex-start;
  }

  .contactDetailInfo
  {

  }
}

#contactSocialMediaLinks a img
{
  height: 2rem;
}

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

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